HTML札记

  1. HTML 指的是 超文本标记语言 (Hyper Text Markup Language)

  2. 文档后缀名；

    当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。

  3. HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，其中 <h1> 最大，<h6> 最小。

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

    因为，浏览器会对其生成索引，因此，只应该对标题使用该标签；

  4. HTML 段落 是通过 <p> 标签进行定义的。

  5. HTML 链接 是通过 <a> 标签进行定义的。

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

  7. HTML 文档 是由 HTML 元素 定义的。HTML 元素 指的是从 开始标签（start tag）到 结束标签（end tag）的所有代码。

  8. 大多数 HTML 元素 可以嵌套（可以包含其他 HTML 元素）。

    比如，就是元素嵌套；

    <html>
	<body>
		<p>This is my first paragraph.</p>
	</body>
</html>

  9. 不要忘记结束标签 ；

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

  10. 使用小写字母

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

    属性也是有小写字母；

  11. 使用双引号还是单引号；

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

    例如：name='Bill "HelloWorld" Gates'

  12. 块级元素前后添加空行 ；

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

  13. style 样式 ；

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

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

  14. 格式化输出 ；

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

  15. 多余的空格和换行

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

  16. 引用

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

  17. 注释

    包括普通注释 <!-- --> 和条件注释 <!--[if 条件] --> ...<!--[end if]-->；

  18. 链接

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

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

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

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

    可以完成发送邮件的操作 ；

  19. 超链接最后最好加上 /

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

  20. 插入图像

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

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

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

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

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

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

  21. 图像映射

    使用 <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>

  22. 表格

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

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

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

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

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

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

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

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

  23. 列表

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

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

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

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

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

  24. <div> 和 <span>

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

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

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

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

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


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

  25. 响应式设计

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

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

  26. <frameset> 框架

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

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

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

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

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

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

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

  27. iframe 标签

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

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

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

  28. JS脚本

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

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

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

  29. URL 编码

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

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

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

    URL 不能包含空格。URL 编码通常使用 + 来替换空格。

  30. <!DOCTYPE> 文档类型

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

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

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

  31. 下拉选框

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

  32. button 的监听函数

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

  33. 预定义输入选项 <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>

  34. 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>

  35. 输入约束

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

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

  1. 滑动控件 range

    表现为一个滑动控件 ；

  2. eamil 类型

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

    同样的还有 url ，也会进行自动验证和匹配;

  3. 数据回显 autocomplete 属性

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

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

    注意该属性是 HTML5.0 的，有的浏览器不支持 ；

  4. autofocus 使得输入项自动获得焦点 ；

  5. form 属性

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

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

  6. 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>

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

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

  8. 类似于 font 效果

    在input 标签上，使用 placeholder 属性，输入框会默认显示希望用户输入的信息 ，placeholder="xxxx" ;

  9. HTML5 中默认的字符编码是 UTF-8。

posted @ 2018-10-24 20:45  Yiaz  阅读(139)  评论(0)    收藏  举报