Web 标准

主要由结构、表现和行为三个方面组成

HTML标签

语法规范

HTML标签是由尖括号包围的关键词
标签通常是成对出现的，称为双标签，第一个为开始标签，第二个是结束标签
也存在单标签

1	<html>//开始标签</html>//结束标签（比开始标签多一个/）

标签关系

包含关系
1
2
3
<head>
<title></title>
</head>
并列关系

1 2	<head></head> <title></title>

HTML基本结构标签

<html>//HTML标签(页面中最大的标签，我们成为根标签)
   <head>//文档的头部(注意再head标签中我们必须要设置的标签是title)
      <title>我的第一个页面</title>//文档的标题(让页面拥有一个属于自己的网页标题)
    </head>
    <body>//文档的主体(元素包含文档的全部内容，页面内容基本都是放到body里面的)
        你我之间
     </body>
</html>

<!DOCTYPE html>//文档类型声明标签
<html lang="en">//网站语言选择
<head>
    <meta charset="UTF-8">//字符集
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    浮生若梦
</body>
</html>

HTML常用标签

标题标签

1	<h1> - <h6>//六级标签

1
2
3
<body>
    <h1>标题标签</h1>
</body>

段落标签

1	<p> 第一段 </p> <p> 第二段 </p>

换行标签

1	<br />//强制换行

文本格式化标签

<strong></strong>//加粗文字    <b></b>//加粗文字
<em></em>//倾斜文字            <i></i>//倾斜文字
<del></del>//删除线            <s></s>//删除线
<ins></ins>//下划线            <u></u>//下划线

和标签

一个盒子，用来装内容的标签

1 2	<div>这是头部</div> <span>今日价格</span>

div标签用来布局，但是现在一行只能放一个div，大盒子
span标签用来布局，一行上可以多个span，小盒子

图像标签和路径

图像标签

1	<img src="图像URL" />//单标签<img/>标签，src是标签的必须属性，它用于指定图像文件的路径和文件名

图像标签的属性

src  必须属性，图片路径
alt  替换文本，图像不能显示文字
title  提示文本，鼠标放到图像上，显示的文字
width  设置图像的宽度
height 设置图像的高度
border 设置图像的边框粗细

相对路径

1
2
3

<img src="img.jpg" />//同一级路径
<img src="images/img.jpg" />//下一级路径
<img sec="../baidu.gif" />//上一级路径

绝对路径

1	<img src="绝对路径" />

超链接标签

可以从一个页面链接到另一个页面

1	<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

href为指定链接目标的url地址，为必须属性
target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

超链接标签的分类

外部链接
内部链接，网站内部页面之间的相互链接，直接链接内部页面即可，如<a href="index.html"> 首页 </a>
空连接，把链接目标写成#即可
下载链接，如果href里面地址是一个文件或者压缩包，会下载这个文件
网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接

<a href="http://www.baidu.com"> <img src="img.jpg"/> </a>
锚点链接，点我们链接，可以快速定位到页面中的某个位置

a.在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two"> 第二集 </a>
1. 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two"> 第二集介绍 </h3>h3>

注释和特殊字符

注释

特殊字符

表格标签

表格用来显示数据，一般不用来布局

<table>//用于定义表格的标签
   <tr>//用于定义表格中的行，必须嵌套在<table>中
      <td>单元格内的文字</td>//定义表格中的单元格，必须嵌套在<tr></tr>
      ...
   </tr>
</table>

表头单元格

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中表示

<th> </th>

表格结构标签

1 2	<thread> </thread>标签表格的头部区域 <tbody> </tbody>标签表格的主题区域

可以更好的分清表格结构

合并单元格

目标单元格：写合并代码

跨行：最上侧单元格为目标单元格，写合并代码<td rowspan = "2"></th>
跨列：最左侧单元格为目标单元格，写合并代码<td colspan = "2"></td>
记得要删除多余单元格

列表标签

分为无序列表，有序列表和自定义列表

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

没有顺序级别之分，是并列的
<ul>中只能嵌套<li>，直接在<ul>标签中输入其他标签或文字的做法是不被允许的
<li>相当于一个容器，可以容纳所有元素

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

属性与无序列表相似

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl> //用于定义描述列表（或定义列表），
    <dt>名词1</dt> //定义项目/名字
    <dd>名词1 解释1</dd> //描述每一个项目/名字
    <dd>名词1 解释2</dd>
</dl>

<dl>里面只能包含<dt>和<dd>
<dt>和<dd>里面可以放任何标签

表单标签

为了收集客户信息

表单的组成

由表单域、表单控件(也称为表单元素)和提示信息三个部分组成

表单域

包含表单元素的区域

1
2
3

<form action="url地址" method="提交方式" name="表单域名称"> //method取值为get或post
   各种表单元素控件
</form>

表单控件(表单元素)

input表单元素

收集用户信息

1	<input type="属性值" />

<input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型

`<label>`标签

<label>标签为input元素定义标注(标签)

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验

1 2	<label for="sex"> 男 </label> <input type="radio" name="sex" id="sex" />

**<label>标签里面的for属性应当与相关元素的id属性相同

select表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面时，我们可以使用<select>标签控件定义下拉列表

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

<select>中至少包含一对<option>
在<option>中定义selected = “selected”时，当前项即为默认选中项

textarea文本域元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了此时可以用<textarea>标签,用于定义多行文本输入的控件

常见于留言板，评论

1
2
3

<textarea rows="3" cols="20">
  文本内容
</textarea>