此篇文章需要查看源代码
** h2 元素代表副标题**
用 p 元素代表段落
给 HTML 添加注释
注释的开始标记是< !–,结束标记是–>。
HTML5 元素介绍
main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
给网站添加图片
<img
src="http://cdn.chenzhicheng.com/relaxing-cat.jpg"
alt="作者站在沙滩上竖起两个大拇指">
注意:img元素是没有结束标记的。
所有的img元素必须有alt属性,alt属性的文本是当图片无法加载时显示的替代文本,这对于通过屏幕阅读器来浏览网页的用户非常重要。
注意:如果图片是纯装饰性的,用一个空的alt是最佳实践。
理想情况下,alt属性不应该包含特殊字符,除非需要。
用锚点anchor实现网页间的跳转
<a href="http://freecatphotoapp.com"
target="_blank">猫图</a>
target是锚点的一个属性,它指定了会以什么方式来打开链接,属性值 "_blank"的意思是链接会在新元素页打开。
href是锚点的另一个属性:它指定了链接的 URL 地址
用锚点实现网页内部跳转
设置锚点的href属性值为井号#加上想跳转区域对应的id属性值,这样就可以创建一个内部跳转。
<a href="#contacts-header">Contacts</a>
//@@注意:网页内部跳转需要加上#
id是用来描述网页元素的一个属性,它的值在整个页面中唯一。
<h2 id="contacts-header">Contacts</h2>
//@@在元素的xx之后加上 id=“sth”,那么这个元素就会变成id为“sth”
用 # 号来创建固定链接
有时你想为网站添加一个锚点,但如果你还不确定要将它链接到哪儿,这时可以使用固定链接。
将href属性的值"www.baidu.com"替换为#,也称为井号,就可以创建固定链接。
当鼠标悬停在图片上时,鼠标的光标如果从箭头指针变成手形指针,那么此时图片就是一个链接了。
创建一个无序列表
HTML 有一个特定的元素用于创建无序列表unordered lists(缩写 ul)。
无序列表以<ul>
开始,中间包含一个或多个<li>
元素,最后以</ul>
结尾。
例如:
<ul>
<li>牛奶</li>
<li>奶酪</li>
</ul>
创建一个有序列表
HTML 有一个特定的元素用于创建有序列表ordered lists(缩写 ol)。
有序列表以<ol>
开始,中间包含一个或多个<li>
元素,最后以</ol>
结尾。
例如:
<ol>
<li>加菲猫</li>
<li>哆啦A梦</li>
</ol>
创建一个输入框
<input type="text">
一个type(属性)为text的input输入框。
注意:input输入框是没有结束标记的。
给输入框添加占位符文本
Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
你可以像这样创建一个占位符:
<input type="text" placeholder="this is placeholder text">
创建一个表单
通过给form表单添加一个action属性,你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。
<form action="/url-where-you-want-to-submit-form-data">
<input>
</form>
给表单添加提交按钮
让我们来给表单添加一个submit提交按钮,当点击提交按钮时,表单中的数据将会被发送到action属性指定的地址上。
<button type="submit">this button submits the form</button>
注意:按钮<button>
应该在表单<form>
内部
给表单添加一个必填字段
当你设计表单时,你可以指定某些字段为必填项(required)
如果你想把文本输入框设置为必填项,在input元素中加上required属性就可以了,例如:<input type="text" required>
创建一组单选按钮
radio buttons(单选按钮)就好比单项选择题,正确答案只有一个。
单选按钮只是input输入框的一种类型。输入框的type是“text”,单选按钮的type是“radio”
每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
所有关联的单选按钮应该拥有相同的name属性。同一个name的选项是一体的。
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
//@@根据实践,加了label,点击文字也能够选中,没有label就只能够点击图标。每一个按钮要有一个label包裹,不能够多个按钮用一个label包裹
最佳实践是在label元素上设置for属性,让其值与单选按钮的id属性值相等,这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。例如:
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
label的作用
小结
1.label的作用是:点击文字和点击按钮或者文本框的效果一样。即点击label与点击表单控件的效果一样。这也就是为什么上面的文章说label是表单控件的延伸
2.label有两种格式:
for
<label for="email">E-mail:</label>
<input type="text" id="email">
嵌套
<label>E-mail:<input type="text"></label>
FFC既for又嵌套
3.
type radio单选类型
name 把不同的选项捆绑在一起
id 与label的for呼应
4.注意:不同的input radio的label 需要不同的for以及与for相同的id
创建一组复选框
checkboxes(复选框)就好比多项选择题,正确答案有多个。
每一个复选框都应该嵌套在它自己的label(标签)元素中。
type=“checkbox”
其余一样
给单选按钮和复选框添加默认选中项
通过添加checked属性,你可以设置某个单选按钮或多选按钮被默认选中。
<input type="radio" name="test-name" checked>
元素嵌套
div元素,也叫division(层)元素,是一个盛装其他元素的通用容器。
声明 HTML 文档的文档类型
在文档的顶部,你需要告诉浏览器你的网页用的 HTML 哪个版本。
你可以通过来告诉浏览器你使用的是 HTML 的哪个版本,"…" 部分就是版本的数字信息。<!DOCTYPE html>
对应的就是 HTML5。
!和大写的DOCTYPE是很重要的,特别是对于老的浏览器。但html大写小写都可以。
接下来,所有的 HTML 代码都必须位于html标签中。其中<html>
位于的后面,</html>
位于网页的结尾。
<!DOCTYPE html>
<html>
<!-- 注意,<!DOCTYPE html>后面还应该有<html>,<html>才是真正的开始 -->
</html>