HTML札记

HTML 指的是 超文本标记语言 (Hyper Text Markup Language)
文档后缀名；

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，其中 <h1> 最大，<h6> 最小。

请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

因为，浏览器会对其生成索引，因此，只应该对标题使用该标签；
HTML 段落 是通过 <p> 标签进行定义的。
HTML 链接 是通过 <a> 标签进行定义的。
HTML 图像 是通过 <img> 标签进行定义的。
HTML 文档 是由 HTML 元素 定义的。HTML 元素 指的是从 开始标签（start tag）到 结束标签（end tag）的所有代码。
大多数 HTML 元素 可以嵌套（可以包含其他 HTML 元素）。

比如，就是元素嵌套；

扫描二维码关注公众号，回复： 4477820 查看本文章
```
<html>
	<body>
		<p>This is my first paragraph.</p>
	</body>
</html>
```
不要忘记结束标签；

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，未来的 HTML 版本不允许省略结束标签。：
使用小写字母

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

属性也是有小写字母；
使用双引号还是单引号；

始终为属性值加引号，属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号；

例如：name='Bill "HelloWorld" Gates'
块级元素前后添加空行；

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如 段落、标题 元素前后。
style 样式；

style 属性用于改变 HTML 元素的样式。

有些旧标签被样式替代掉了：<font>、<agiln>、<bgcolor> ；
格式化输出；

包括一些常用的属性，加粗，斜体，强调，反向输出、下标、上标、原样输出、缩写等；
多余的空格和换行

HTML会把源码中，多个空格替换为一个空格，多个换行替换为一个换行；如果想要保持原样输出，使用格式化输出的标签：<pre> ；
引用

主要用于文章中，包括：小引用 <q>，大引用 <blockquote> ，会进行缩进处理，以及缩进、地址等；
注释

包括普通注释  和条件注释  ...；
链接

<a>，既可以定义超链接，也可以定义成锚点，锚点可以穿越页面；

超链接标签中嵌套图像标签，可以做到图像连接；

只要在 name 属性=锚点所在页面的地址#锚点，即可，跨越页面；

如果锚点找不到，页面不会出错，而是定位到页面顶端；

可以完成发送邮件的操作；
超链接最后最好加上 /

请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。
/这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”。
插入图像

图像可以是来自任何地方，比如服务器的本地文件夹中，或者其他服务器上，只要地址写对都行；

alt 属性，为图像定义一串预备的可替换的文本，如果图像加载失败，则显示该文字 <img src="boat.gif" alt="Big Boat">

当做背景图片，图像小于页面的时候，。图像会重复出现；

可以设置图像出现的位置，使用 align 属性，默认值是 bottom ，其他值 top；

align 还可以当做浮动，当值为left、right 的时候，会有浮动效果；

可以在图像上使用 ismap 属性,配合图像超链接，就可将图像转为图像映射，此时鼠标移到图像上，左下角将会出现具体坐标；

图像映射

使用 <img> 和 <map> 标签可以完成，就是在一张图像上，为不同的区域创建超链接；

<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向添加 id 和 name 两个属性。

coords 属性规定区域的 x 和 y 坐标。

coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。

图像左上角的坐标是 “0,0”。

<map name="planetmap">
	<!--如果是长方形，则代表左上角和右下角-->
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  	<!--如果是圆形，则代表原点坐标和半径-->
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  	<!--如果是长方形，则代表左上角和右下角-->
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
  	<!--如果是多边形，则代表每两组代表一个点，然后连接起来-->
   <area shape="polygon" coords="x1,y1,x2,y2,x3,y3,..." href="sun.htm" alt="Sun" />
</map>

表格

表格的表头使用 <th> 标签进行定义。表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为 粗体居中 的文本：

border 边框属性，用在 table 上，数字越大边框越粗；其中，cellspacing，cellspacing 都用在 tabble 标签上；

如果，有空数据的单元格的边框没有被显示，则添加空格进去 <td> </td> ；

使用 <caption>我的标题</caption> ，为表格添加标题；

colspan，横跨水平单元格；rowspan，纵夸单元格；

表格中依然可以使用其他标签，甚至表格嵌套；

bgcolor、background 即可用在 table标签上，也可以用在 td标签上；

使用 align="left" ，对表格中的数据进行左对、右对齐；
列表

无序 <ul>，有序 <ol> ；里面 <li> ;

有序，有个属性 start ，可以直接规定从几，开始计数；

对于 type ，无序是规定形状样式，有序是规定计数的类型，是ABCD，还是1234

自定义列表，可以为每项显示解释，其中自定义列表吧中可以使用 段落、换行符、图片、链接以及其他列表 等等

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
<div> 和 <span>

块级元素 在浏览器显示时，通常会以新行来开始（和结束）。比如：<h1>, <p>, <ul>, <table>

内联元素 在显示时通常不会以新行开始，比如： <b>, <td>, <a>, <img>。

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

如果与 CSS 一同使用，<div> 元素可用于对 大的内容块 设置样式属性。

<div> 元素的另一个常见的用途是 文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素是内联元素，可用作 文本的容器。当与 CSS 一同使用时，元素可用于为 部分文本 设置样式属性。
响应式设计

能够以可变尺寸传递网页，对于平板和移动设备是必需的；

可以自己写，使用css 的 float 浮动属性；我们可以使用 Bootstrap 框架；
<frameset> 框架

浏览器中的浏览器，可以将一个页面分为几个页面，但是也因此页面不再是一个完整的页面，而是多个页面了，难以维护；

cols 竖直分割；rows 水平分割；

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在标签中加入：noresize="noresize"

不能将 <body></body> 标签与 <frameset></frameset> 标签 同时使用 ，测试发现 </frameset> 不能放在 <body> 里面，但是反过来可以！

不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

<frameset></frameset> 标签可以嵌套使用；

target 属性，可以让一个框架的超链接，在另外一个框架里面打开；也可以在连接后面添加 #Cxx 跳到具体的 <hx> 标题处；
iframe 标签

frameset 要么占用一行，要么占用一列；使用 iframe 可以占用一个方块大小，而不是整行或者整列的占用；

因为 height 和 width 属性用于规定 iframe 的高度和宽度，属性值的 默认单位是像素。但也可以用百分比来设定（比如 “80%”）；

iframe 默认显示周围的边框。设置 frameborder 属性值为 “0” 就可以移除边框 ;

JS脚本

<script> 标签用于定义客户端脚本。

<noscript> 标签,在浏览器禁用脚本时，或浏览器不支持客户端脚本时,就会显示标签中的内容；

<!-- 对于老式浏览器，不支持 script标签的，会将脚本内容，当作文本，直接显示在页面上；-->
<!-- 我们就把脚本内容写在注释里面，认识脚本标签的浏览器，即使在脚本内容在注释里面，依然会执行；-->
<!-- 不认识脚本的，也不会认识在注释的脚本，但是现在脚本在注释中，就不会被显示在页面上了-->
<script type="text/javascript">
	<!--
	document.write("Hello World!")
	// -->
</script>

URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符， URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换**非 ASCII** 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。
<!DOCTYPE> 文档类型

必须写在文档开头，由于高速浏览器，该网页是什么内容；

HTML 4.0 分三种，分别是，简单版（仅支持有效标签），补充版（废弃标签页也支持），完整版（废弃标签和 framesets 框架都支持）；

HTML 5.0 就剩下一个了 <!DOCTYPE html>
下拉选框

列表通常会把 首个选项 显示为被选选项。您能够通过添加 selected 属性来定义预定义选项。
button 的监听函数

可以直接在里面写 JS 代码：<button type="button" onclick="alert('Hello World!')">Click Me!</button>

预定义输入选项 <datalist>

可以预定义输入选项，好像可以用来做历史记录；

其中 list 属性必须引用 <datalist> 元素的 id 属性

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

number 属性

固定只能输入数字，并其使用 min 和 max 约束数字的访问，其中可以使用 step 规定数字间隔；

<form action="/demo/demo_form.asp">
  数量（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="15">
  <input type="submit">
</form>

输入约束

这些输入限制，可以用在任何输入的标签上，比如 date 标签，使用 max 就是表示时间不得超过该值；

属性.	描述
disabled	规定输入字段应该被禁用，该字段不会被提交。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计），也就是显示的输入框的长度。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

滑动控件 range

表现为一个滑动控件；
eamil 类型

浏览器会自动的对输入类型进行检查；并且有的浏览器或手机会自动对输入过的邮箱进行匹配，添加 @xxx 的提示；

同样的还有 url ，也会进行自动验证和匹配;
数据回显 autocomplete 属性

在表单上设置 autocomplete="on" ，然后该表单就会自动的数据回显；

如果有的信息不想回显，则在对应的信息上，写个属性 autocomplete="off" ；

注意该属性是 HTML5.0 的，有的浏览器不支持；
autofocus 使得输入项自动获得焦点；
form 属性

当某个输入项在表单之外的时候，还想该输入项属于该表单，则使用该属性 ;

一个输入项可以被引入到多个表单之中，form 属性值之间之间使用空格间开；

list 属性，达到跟下拉框一样的效果

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

<input list="browsers">

<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

一次性选择多个文件/图片

在input 标签上，使用 multiple 属性，就可以一次性选择多个文件，multiple="multiple" ;
类似于 font 效果

在input 标签上，使用 placeholder 属性，输入框会默认显示希望用户输入的信息，placeholder="xxxx" ;
HTML5 中默认的字符编码是 UTF-8。

猜你喜欢