html基础内容二

xiaoxiao2021-02-28  52

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<img src="xxx.jpg" width="104" height="142" />

 

 

HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。但还是推荐使用小写的HTML标签。

 

HTML 注释

 

html中的注释如以下显示:

 

<!-- This is a comment -->

不赞成使用的标签和属性

 

 

标签描述<center>定义居中的内容。<font> 和 <basefont>定义 HTML 字体。<s> 和 <strike>定义删除线文本<u>定义下划线文本属性描述align定义文本的对齐方式bgcolor定义背景颜色color定义文本颜色

 

使用时,请用style代替。

 

 

文本格式化标签

标签描述<b>定义粗体文本。<big>定义大号字。<em>定义着重文字。<i>定义斜体字。<small>定义小号字。<strong>定义加重语气。<sub>定义下标字。<sup>定义上标字。<ins>定义插入字。<del>定义删除字。<s>不赞成使用。使用 <del> 代替。<strike>不赞成使用。使用 <del> 代替。<u>不赞成使用。使用样式(style)代替。

“计算机输出”标签

标签描述<code>定义计算机代码。<kbd>定义键盘码。<samp>定义计算机代码样本。<tt>定义打字机代码。<var>定义变量。<pre>定义预格式文本。<listing>不赞成使用。使用 <pre> 代替。<plaintext>不赞成使用。使用 <pre> 代替。<xmp>不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签描述<abbr>定义缩写。<acronym>定义首字母缩写。<address>定义地址。<bdo>定义文字方向。<blockquote>定义长的引用。<q>定义短的引用语。<cite>定义引用、引证。<dfn>定义一个定义项目。

 

表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

在浏览器显示如下:

row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

在浏览器显示如下:

HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

表格中的空单元格

在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table>

浏览器可能会这样显示:

注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td> </td> <td>row 2, cell 2</td> </tr> </table>

在浏览器中显示如下:

row 1, cell 1row 1, cell 2 row 2, cell 2

HTML5 语义元素

header定义文档或节的页眉nav定义导航链接的容器section定义文档中的节article定义独立的自包含文章aside定义内容之外的内容(比如侧栏)footer定义文档或节的页脚details定义额外的细节summary定义 details 元素的标题

 

 

 

HTML 响应式 Web 设计

 

什么是响应式 Web 设计?

RWD 指的是响应式 Web 设计(Responsive Web Design)RWD 能够以可变尺寸传递网页RWD 对于平板和移动设备是必需的 <!DOCTYPE html> <html lang="en-US"> <head> <style> .city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; } </style> </head> <body> <h1>W3School Demo</h1> <h2>Resize this responsive page!</h2> <br> <div class="city"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </body> </html>

 

 

 

使用 Bootstrap

另一个创建响应式设计的方法,是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>W3School Demo</h1> <p>Resize this responsive page!</p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </div> </body> </html>

JavaScript 使 HTML 页面具有更强的动态和交互性。。

 

HTML script 元素

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”:

<script type="text/javascript"> document.write("Hello World!") </script>

 

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标(target):

<head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head>

 

HTML中大小写以及等于号

 

如需显示小于号,我们必须这样写:< 或 <

HTML 中的常用字符实体是不间断空格( )。

 

HTML 中有用的字符实体

注释:实体名称对大小写敏感!

显示结果描述实体名称实体编号 空格  <小于号<<>大于号>>&和号

&

;

&"引号""'撇号 ' (IE不支持)'¢分(cent)¢¢£镑(pound)££¥元(yen)¥¥€欧元(euro)€€§小节§§©版权(copyright)©©®注册商标®®™商标™™×乘号××÷除号÷÷

HTML 颜色

颜色由红色、绿色、蓝色混合而成。

颜色值

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

这个表格给出了由三种颜色混合而成的具体效果:

ColorColor HEXColor RGB #000000rgb(0,0,0) #FF0000rgb(255,0,0) #00FF00rgb(0,255,0) #0000FFrgb(0,0,255) #FFFF00rgb(255,255,0) #00FFFFrgb(0,255,255) #FF00FFrgb(255,0,255) #C0C0C0rgb(192,192,192) #FFFFFFrgb(255,255,255)

颜色名

大多数的浏览器都支持颜色名集合。

提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色,需要使用十六进制的颜色值。

ColorColor HEXColor Name #F0F8FFAliceBlue #FAEBD7AntiqueWhite #7FFFD4Aquamarine #000000Black #0000FFBlue #8A2BE2BlueViolet #A52A2ABrown

Web安全色

数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。

216 跨平台色

最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

0000000000330000660000990000CC0000FF0033000033330033660033990033CC0033FF0066000066330066660066990066CC0066FF0099000099330099660099990099CC0099FF00CC0000CC3300CC6600CC9900CCCC00CCFF00FF0000FF3300FF6600FF9900FFCC00FFFF3300003300333300663300993300CC3300FF3333003333333333663333993333CC3333FF3366003366333366663366993366CC3366FF3399003399333399663399993399CC3399FF33CC0033CC3333CC6633CC9933CCCC33CCFF33FF0033FF3333FF6633FF9933FFCC33FFFF6600006600336600666600996600CC6600FF6633006633336633666633996633CC6633FF6666006666336666666666996666CC6666FF6699006699336699666699996699CC6699FF66CC0066CC3366CC6666CC9966CCCC66CCFF66FF0066FF3366FF6666FF9966FFCC66FFFF9900009900339900669900999900CC9900FF9933009933339933669933999933CC9933FF9966009966339966669966999966CC9966FF9999009999339999669999999999CC9999FF99CC0099CC3399CC6699CC9999CCCC99CCFF99FF0099FF3399FF6699FF9999FFCC99FFFFCC0000CC0033CC0066CC0099CC00CCCC00FFCC3300CC3333CC3366CC3399CC33CCCC33FFCC6600CC6633CC6666CC6699CC66CCCC66FFCC9900CC9933CC9966CC9999CC99CCCC99FFCCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFFCCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFFFF0000FF0033FF0066FF0099FF00CCFF00FFFF3300FF3333FF3366FF3399FF33CCFF33FFFF6600FF6633FF6666FF6699FF66CCFF66FFFF9900FF9933FF9966FF9999FF99CCFF99FFFFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFFFFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

HTML 表单包含表单元素。

类型描述text定义常规文本输入。radio定义单选按钮输入(选择多个选择之一)submit定义提交按钮(提交表单)

文本输入

<input type="text"> 定义用于文本输入的单行输入字段:

实例

<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>

单选按钮输入

 

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一:

实例

<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>

单选按钮在浏览器看起来是这样的:

Male  Female在浏览器中看起来是这样的:First name:   Last name:

注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

 

转载请注明原文地址: https://www.6miu.com/read-2150301.html

最新回复(0)