HTML学习笔记 -html教程-PHP中文网

HTML学习笔记

高洛峰

发布： 2017-02-14 15:57:43

原创

1506人浏览过

html 指的是超文本标记语言 (hyper text markup language)

xhtml 是更严谨更纯净的 html 版本。
xhtml 指可扩展超文本标签语言（extensible hypertext markup language）。
xhtml 是作为一种 xml 应用被重新定义的 html。
xhtml 是一个 w3c 标准。
你应该马上使用小写字母编写html代码，同时绝不要养成忽略类似 </p> 标签的坏习惯。
xhtml 元素必须被关闭非空标签必须使用结束标签。

    属性名称必须小写
    属性值必须加引号
    属性不能简写
    用 id 属性代替 name 属性
    xhtml dtd 定义了强制使用的 html 元素

<!doctype html
public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

html5 是下一代的 html。
<!doctype html>

---------------------------------------------------------------------

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。
   浏览器对<blockquote>标签的解析是缩进样式。
<q>标签，短文本引用
   引号
空格
<address>标签，为网页加入地址信息
想加入一行代码吗？使用<code>标签 <code>var i=i+300;</code>

如果是多行代码，可以使用<pre>标签。

ul-li是没有前后顺序的信息列表。有前后顺序的信息列表使用ol

创建表格的四个元素：
table、tbody、tr、th、td
<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

caption标签，为表格添加标题标题的显示位置：表格上方。

<table summary="表格简介文本">
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

使用mailto在网页中链接Email地址
对此影评有何感想，<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法。">发送</a>邮件给我

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

使用表单标签，与用户交互
<form   method="传送方式"   action="服务器文件">

文本输入框、密码输入框
<input type="text" name="名称" value="文本" />
<input type="password" name="密码" value="文本" />
文本域，支持多行文本输入
<textarea rows="行数" cols="列数">文本</textarea>

使用单选框、复选框，让用户选择<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
注意:同一组的单选按钮，name 取值一定要一致

使用下拉列表框，节省空间
<select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
设置selected="selected"属性，则该选项就被默认选中
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码：

使用重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
<input type="reset" value="重置">

form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<label for="控件id名称">