排版标签

• h1-h6标签
  标题语意：重要性递减 h1 尽量少用
• p 段落标签
  标题语意：分段 会自动换行
• hr:水平线标签 单标签
• br 打断换行 单标签
• div 盒子标签
• span 跨度范围

文本格式标签

• b 加粗标签
• strong 加粗标签 加粗有两个标签推荐使用这一个标签
• i 倾斜标签文字倾斜
• em 推荐的倾斜标签
• s 删除的标签 文字上划线
• del 删除标签 推荐使用
• u 下划线标签
• ins 推荐是有的下划线

属性标签

• age 格式 <标签名 属性= ’‘ 属性’‘> 内容<属性>

1.标签可以有多个属性。

2. 属性之间不分先后顺序，标签与属性、属性与属性之间均以空格分开
3. 任何标签的属性值都有默认，省略该属性则取默认值

图像标签

• img <img src="图片的属性> 图片标签 单标签

1. src url 图像路径
2. alt 文本 图像显示不出来替换的文字
3. title 文本 鼠标悬停的时显示的内容
4. width 像素 图像的宽度
5. height 像素 图片的高度
6. border 数字 设置图像边框的宽度

连接标签

• “<a href ="跳转目标" targer="目标窗口弹出方式"》 文本或者图像</a》”

• 外部连接 <a href ="路径">百度</a>
  连接必须有href 属性 路径就是http地址

• 内部链接 只需要写上页面或者名称就可以了，不要网络后缀名

锚点定位

• 适合于较长的页面，我们可以点击关键词到一个关键位置
• 注意的两点
  1 使用 《a href =“#id名”》链接文本《/a》创建链接文本
  2 使用相应的id名标注跳转目标的位置

base标签

• 设置页面的链接都在新窗口中打开
• head标签中 <base targer ="_blank"/>

特殊字符标签

• &nbsb 空格标签
• &lt 小于符号 &gt 大于符号
• 这里符号就不说了 到时候直接查表

注释标签

• 多使用注释是很好的代码习惯
• 注释标签里面的内容是程序员看的 不是给浏览器看的
• < !-- 这是注释 -->

路径

相对路径

• 图像文件夹和HTML 文件夹位于同一文件夹；只需要输入图像文件的名称就可以了例如：《imge src = “logo.gif/》”
• 图像文件位于HTML 文件的下一级文件夹；输入文件夹和和文件名，之间用/隔开如：《img src = “img/img01/logo.gif/》”
• 图像文件位于HTML文件上一级文件夹；在文件名之前加“../”,如果是上量级，则需要使用“../../”,以此内推，如《img src = "../logo.gif"/》

绝对路径

• “d:\web\img\logo.gif”,或者完整的网络地址，如“http://www.itcast.con/images/logo.gif”

列表标签

• 无序列表 ul
  格式《ul》《li》《/li》《/ul》里面li标签
  注意点：
  1 ul 里面只能放li标签
  2 li 标签里面可以放任意的标签
• 有序列表ol
  格式《ol》《li》《/li》《/ol》里面li标签
  注意点：
  1 ul 里面只能放li标签
  2 li 标签里面可以放任意的标签
• 自定义列表 dl
  格式：《dl》《dt》《dd》《/dd》《/dt》《/dl》
  dl 里面放dt dt相当于标签 dt里面放dd dd相当于标签的内容
  一般用于 页面的底端结构

表格标签

• 表格标签 table
  不是用来布局的，是用来像股票布局之内的地方

  格式：《table》《tr》《td》项目1《td》《td》项目2《td《/tr》《/table》
  注意：table 里面只能放tr 标签 tr标签里面只能放td标签 td 里面可以放任何标签

• 表格的属性
  属性 含义 单位
  border 设置表格的边框 像素
  cellspacing 设置单元格于单元格边框之间的空白距离默认 2像素
  cellpadding 设置单元格于单元格边框的空白间距默认为1像素
  align 设置单元格的对其方式 left center right

• 表头标签 th
  表头一般位于表格的第一行或第一列，其文本加粗剧中。设置表头非常简单，只需用表头标记《th》《/th》替换相应单元格的《td》《/td》就可以了

• 表的结构 表头：《thead》《/thead》
  表体：《tbody》《/tbody》

• 表格标题 《catption》《/catption》 写在表格table里面

• 合并单元格
  rowspan 跨行合并《td rowspan = “2”》 合并两行《td》
  colspan 跨列合并格式 《td colspan = “2”》 合并两列《td》

表单标签

如银行开户表单， 表单标签主要用来搜集用户信息
表单由3部分组成

• 表单空间：包含两具体的表单功能项，例如单行文本输入框、密码
• 提示信息 ： 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作
• 表单域： 它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以达到数据提交到服务器的方法。如果不支持制定一表单域，表单中的数据就无法传送到后台服务器。

表单控件

input 控件

• 单标签控件
• inpt 里面就可以堪称变色龙的 可以通过type 属性变化形状

tye的属性

• week 星期
• month 年和月
• data 年月日
• time 时间
• range 区域滑块
• search 搜索
• url 网址
• number 数字
• tel 电话
• emal 邮箱
• text 文本
• password 密码
• radio 单选按钮
• checkbox 单选框
• button 按钮
• submit 提交
• reset 重置按钮
• image 图像形式的提交按钮
• file 选文件

name 用户自定义

value 用户自定

size 正整数

checked checkend

maxlength 最大长度

• 默认选中项目 chenck = “chenck”

label 点一行都可以输入

• 例子《label》请输入账号《intput/ type=‘text“》《/label》
• 例子《label from=“two”》请输入账号《intput/ type=‘text“》 《intput/ type=‘text“，id = “two”》《/label》 这样点击后光标会到id = two 的input 中

textarea 控制文本域

• 输入大量的信息，类似ios 的textView
• <textarea>请输入留言1</textarea>

下拉菜单

• select

<select>
        <option>选项1<option>
        <option>选项2<option>
        <option>选项3<option>
        <option>选项4<option>
        <option sekected =“selected”>选项5</option>
        <select>

1 selected 中至少包含一个option

2 optin 中 selected = ”selected“ 为默认选中

表单域

我们现在学了三个域名

• 文本域 textarea 相当于ios textView
• 文件域 input type = “file”
• 表单域 搜集表单控件信息，并且提交

<form action="url地址" method=“提交方式” name=“login”>
   <input type="text" name=“pwd”>
   <input type="text" name=“use”>
   <input type="subit">

</form>

• url 是提交的地址， metod 是提交的方式 post 或者 get name 就是提交的参数

datalist html5的新功能 类似百度的搜索有选择其他的功能

<input type="text" value="请输入明星名" list="star">
    <datalist id="star">
        <option>刘德华</option>
        <option>刘小强</option>
        <option>刘小强</option>
        <option>陈杰</option>

    </datalist>

html 新增的属性

• pleasehold input 站位文字
• autofocus input 自动获取焦点
• multiple input 多文件上传
• autoncomplete input 有提交按钮，有名字 提交后会记录上次写的东西
• required input 必须要填写的参数
• accesskey +s input 获取焦点

多媒体标签

embed ：标签定义嵌入的内容 《embed = src“地址”》
audio：播放音频《audio src = “地址” autoplay controls loop=”2“》《/audio》
autoplay 自动播放
controls 显示控制条 这里可以停止 快进等
loop = -1 无限循环，loop=2 播放两次

    audio 在不同的播放器上有不同的兼用，为了考虑兼容用以下的方法
    <audio controls autoplay>
        <source src="bgsound.mp3">
        <source src="music.ogg" >
        你的浏览器不支持播放审议    
    </audio>

• video 播放器 支持ogg MP4 webM格式

<video controls autoplay>
        <source src="bgsound.mp4">
        <source src="music.ogg" >
        你的浏览器不支持播放审议    
    </video>