<meta charset = "utf-8"> 指定字符编码
文字排版标记
1.文字和特殊符号
对于一些特殊符号和空格不能直接输入,必须通过一个以"&"开头,";"结尾的实体名称来代替
2.段落标记
以<p>标记开头,以</p>标记结束,段落标记在段前和段后各添加一个空行,而定义在段落标记中的内容不受该标记的影响
3.换行标记
<br>
4.标题标记
<h1> --> <h6> 数字越小级别越高字体越大
例:<h4 align = "cneter">居中</h4>
align有多种属性,center,left,right...等等
5.文字列表标记
将文字以列表的形式一次排列
(1)无序排表
例:
<ul>
<li>test</li>
</ul>
显示的时候test前面有一个实体圆点符号
(2)有序排表
例:
<ol>
<li>test</li>
<ol>
有序顾名思义按照顺序排列,test前面有1-->标记
图片与超链接标记
1.图片标记
<img src="url" width="value" height="value" border="value" alt="提示文字">
src:图片的来源
width:图片宽度
height:图片高度
border:图片外边框的宽度。默认为0
alt:当图片无法显示时显示的文字
2.超链接标记
<a href="url" hreflang="language" name="bookmarkName" type="mimeType" charset="code" shape="area" coords="coordinate" target="target" tabindex="value" accesskey="key">test</a>
href:网址,可以是绝对路径
hreflang:超链接位置所使用的语言
name:超链接表示名
type:超链接位置所使用的MIME类型
charset:超链接位置所使用的编码方式
target:超链接的目标窗口
_parent:在上一级窗口打开
_blank:在新窗口打开
_self:在同一个窗口打开,一般不用设置
_top:在浏览器整个窗口中打开
tabindex:按下tab时移动的顺序,从属性值最小的开始, 0-32767
accesskey:超链接设置快捷键
例:<a href="https://www.baidu.com">百度</a>
HTML5新增的语义元素
1. <header> 页面的标题
2. <footer> 页面的脚注
脚注一般包含一些基本信息,通常放在最底部,但是不是必须的
3. <section> 页面中一个区域
4. <article> 文档 ,页面或者应用程序中的所有正文部分,所描述的内容应该是独立的完整的可以犊子被外部引用的。一个<article>通常有自己的标题和脚注部分
标记的内容独立于文档的其余部分
5. <aside> 表示当前页面或文章的附属信息部分,常见的是侧边栏 广告 导航条等
6. <nav> 表示页面中的导航链接区域 包括一个页面或者一个站点内的链接
制作表格
1. 表格标记 <table>
表示整个表格,有诸多属性,例 width border align bgcolor
2. 标题标记 <caption>
3. 表头标记 <th>
4. 表格行标记 <tr>
一组<tr>表示表格中的一行,要嵌套在<table>中使用,也具有align background等属性
5. 单元格标记 <td>
又称列标记,一个<tr>中可以嵌套n个<td> 也具有align background等属性
例:
<table width="400" height="260" align="center" border="1">
<caption>成绩</caption>
<tr>
<td align="center" valigh="middle">姓名</td>
<td align="center" valigh="middle">语文</td>
<td align="center" valigh="middle">数学</td>
<td align="center" valigh="middle">英语</td>
</tr>
<tr>
<td align="center" valigh="middle">张三</td>
<td align="center" valigh="middle">语文</td>
<td align="center" valigh="middle">数学</td>
<td align="center" valigh="middle">英语</td>
</tr>
<tr>
<td align="center" valigh="middle">李四</td>
<td align="center" valigh="middle">语文</td>
<td align="center" valigh="middle">数学</td>
<td align="center" valigh="middle">英语</td>
</tr>
<tr>
<td align="center" valigh="middle">王麻子</td>
<td align="center" valigh="middle">语文</td>
<td align="center" valigh="middle">数学</td>
<td align="center" valigh="middle">英语</td>
</tr>
</table>
播放音频和视频
1. 播放音频标记 <audio>
<audio src="...mp3" autoplay>test</audio>
test:当浏览器不支持音频格式时显示。
2. 播放视频标记 <video>
<video src="url" width="value" height="value" autoplay="true|false" controls="true|false">test</video>
src:视频地址
width:播放器宽度
height:播放器高度
autoplay:是否自动播放
controls:是否自动显示播放控件组件
表单标记
1. <from> 标记
用于在页面中插入表单
例: <from name="form name" method="method" action="url" enctype="value" target="target_win"></form>
name:指定表单的名称
method:网络请求方式
action:提交的url地址
enctype:编码方式
text/plain:以纯文本形式传送消息
application/x-www-form-urlencoded:默认的编码形式
multipart/form-data:使用MINE编码
target:指定返回信息的显示方式
_parent:显示在父级窗口中
_blank:显示在新的窗口
_self:显示在当前窗口
_top:显示在顶级窗口
2. <input> 表单输入标记
向页面添加单行文本,多行文本,按钮等
例: <input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="url" usemap="url" alt="" name="checkbox" value="checkbox">
type:指定是哪种类型的输入字段
type属性:
属性值: 说明
text: 文本框
password: 密码域
file: 文件域
url: *URL地址
email: *E-mail地址
color: *颜色选择器
datetime: *日期时间选择器
number: *数字选择器
range: *滑块
submit: 提交按钮
reset: 重置按钮
button: 普通按钮
hidden: 隐藏域
image: 图像域
radio: 单选按钮
*date: 日期选择器
checkbox: 复选按钮
***
注: 说明标记的*号的属性值为html5新增加的功能
html5还提供了两个有用的属性,placeholder(占位文本) autofocus(自动聚焦)
disabled:指定输入字段不可用,变成灰色,可以为空值
checked:指定输入字段是否为选中状态,用于type属性为radio和checkbox的情况下。可以为空值
width:指定输入字段的宽度,用于type属性为image的情况下
height:指定输入字段的高度,用于type属性为image的情况下
maxlength:指定输入字段可输入文字的个数,用于type属性值为text和password的情况下。默认没有字数限制
readonly:指定输入字段是否为只读。可以为空值
size:指定输入字段的宽度,当type属性为text和password时,以文字个数为单位,其余情况下以像素为单位
src:指定图片的来源,只有type属性为image时有效
usemap:为图片设置热点地图,只有type属性为image时有效
alt:指定当图片无法显示时显示的文字,只有type属性为image时有效
name:指定输入字段的名称
value:指定输入字段默认数据值,当type属性为checkbox和radio时不能省略此属性,其余情况可以省略。当type属性为button,reset,submit时 指定的是按钮上显示的文字,当type属性为checkbox和radio时 指定的是数据项选定时的值
3. <select></select> 下拉列表标记
创建一个下拉列表
例:<select name="name" size="digit" multiple="multiple" disabled="disabled"></select>
name:指定列表框的名称
size:指定列表框中显示的选项数量,如果超过该数量可以通过拖动滚动条查看
multiple:让列表框支持多选
disabled:指定当前列表框不可使用
<select name="demo" size="6" >
<option value="1">文件</option>
<option value="2">编辑</option>
<option value="3">搜索</option>
<option value="4">试图</option>
<option value="5">格式</option>
<option value="6">语言</option>
<option value="7">设置</option>
<option value="8">宏</option>
</select>
4. <textarea> 多行文本标记
与单行文本标记相比多行文本标记可以输入更多的内容,通常<textarea>标记出现在<form>标记的标记内容中。
例:<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">test</textarea>
name:指定多行文本框的名称,当表单提交后,在服务器获取表单数据时应用
cols:指定多行文本框显示的列数
rows:指定多行文本框显示的行数
disabled:指定当前多行文本框不可使用
readonly:指定当前多行文本框为只读
wrap:设置多行文本中的文字是否自动换行
hard:默认值,表示自动换行,如果文字超过cols属性所指的列数就自动换行,并且提交服务器时换行符也被提交
soft:表示自动换行,如果文字超过cols属性所指的列数就自动换行,但是提交服务器时换行符不会被提交
off:不自动换行,如果想让文字换行只能通过Enter强制换行
<form method="POST" >
<div>
<textarea rows="5" cols="40">
一二三四五,多行文本标记
一二三四五,多行文本标记
一二三四五,多行文本标记
</textarea>
</div>
</form>