[FCC][响应式WEB设计]HTML

此篇文章需要查看源代码
** 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值