html笔记
单标签
<br /> 换行符
<hr /> 水平线
双标签
<p></p> 上下自动生成空白行
<h1></h1> 只能出现一次，标题包含h1-6没有h7
<font></font> 文本标签
<strong></strong>和<b></b> （b少用）文本加粗
<em></em>和<i></i> (i少用）文本倾斜
<del></del>和<s></s> （s少用）文本删除线
<ins></ins>和<u></u> （u少用）文本下划线
- 之所以工作中使用<strong></strong> <em></em> <del></del> <ins></ins>是因为可读性强。
图片标签
<img src=文件路径" alt=“我的女神” title=“图片” width="100" height="500" />
src 文件路径
alt 文件出错后显示的文本
title 图片正常时鼠标指向图片正常时显示的文本
width 宽
height 高
路径
绝对路径
相对路径
html5的标签结构
超链接
<a href="路径" title="标签" target="_self">连接<a>
href 被链接的路径，可以是文件图片等，必写
title 提示文本，一般不写
target=“_self” 默认属性，打开后原来页面关闭
target="_blank" 自身页面不关闭，打开新页面
锚点
在单标签或者双标签里添加id= 例如 <p id = sd></p>
下面用超链接<a href=“#sd” title="标签" target="_self">连接<a>点击超链接跳转到锚点
空链
<a href="#" title="标签" target="_self">连接<a>
当页面不知道链接路径时使用空链
超链接优化写法
在<head>中添加<base target="_blank"> 使所有的超链接都使用新窗口打开，初始配置
特殊符号标记
列表
无序列表
<ul type="">
<li></li>
<li></li>
<li></li>
</ul>
type选项 square 方块
disc 圆圈，默认值
circle 空心圆圈
有序列表
<ol type="@">
<li></li>
<li></li>
<li></li>
</ol>
type选项
其中选项可以用a那么列表就索引为 a b c d 依次类推
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
音乐标签
<embed src="1.mp3" >
滚动
<marquee behavior="" direction=""></marquee>
页面自动滚动
html5的标签结构
head标签中的写法
meta标签
<meta charset="utf-8"> 设置编码
<meta name=”keywords“ content=”“> 优化搜索引擎的排名，关键字，content为关键字
<meta name="description" content=”“> 网页描述
<meta http-equiv=“refresh" content="5"> 网页重定向，content设置秒数为5秒
link标签
<link rel="sytlesheet" href="1.css”> 连接外部样式表文件
<link rel="icon" href="xxx.ico"> 设置icon图标
表格
为了展示数据，是对网页重构的一个补充
<table> 表格
<caption><caption> 表头
<tr> 行
<td ></td> 列
<td colspan="2"></td> colspan合并同行单元格
<td rowspan=”2“></td> rowspan 合并同列单元格
</tr>
</table>
table参数
border= 边框
width= 宽度
height= 高度
cellspacing=”2" 单元格与单元格的距离，默认为2
cellpadding= 内容距边框的距离
align="left | right | center“ 如果直接给表格用那么表格居中，如果给tr或者td使用，内容居中
bordercolor=”red" 边框的颜色
td参数
valign=“top | middle | bottom” 顶部，居中，底部对齐
表格的标准结构
<table border="1" width="500" height="300">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
细线表格
给table绿色，cellspacing为1。给tr设置为白色。
表单
表单控件
写法：
<form action="a.py" method="post">
用户名:<input type="text" maxlength="6">
<br><br>
密 码:<input type="password" password="password">
<input type="submit">
<br><br>
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
</form>
form用法
method=”get | post" get通过地址栏提供（传输）信息，安全性差
Post 通过action来处理信息，安全性高
input文本输入框
maxlength=“6” 限制输入字符长度
readonly="readonly" 输入框设置为只读，不能编辑
disabled=“disabled" 输入框未激活状态
name=”username" 设置输入框的名称
valume=“” 设置输入框的值传给处理文件
单选框
type="radio"
name 相同时为单选效果
checked=“checked” 设置默认值
下拉列表
写法：
省(市）：<select name="" id="" multiple="multiple">
<optgroup label="北京市">
<option >河北</option>
<option >辽宁</option>
<option >北京</option>
<option >山西</option></optgroup>
</select>
select用法
multiple="multiple" 将下拉列表设置为多选项
option用法
selected=“selected” 设置为默认选项
optgroup用法
label=“北京市” 分组的名称不可以选中
多选框
写法：
<input type="checkbox" checked="checked">喝酒
<input type="checkbox">抽烟
<input type="checkbox">烫头
checked=“checked”设置默认选择项
多行文本框
写法：
<textarea cols="30" rows="3"></textarea>
clos 控制输入字符的长度
rows控制输入的行数
文件上传控件
写法：<input type="file">
文件提交按钮 可以提交文件
写法：<input type="submit">
普通按钮 不能实现提交-配合JS使用
写法：<input type="button" value=“普通按钮”>
图片按钮 可以实现信息提交功能
写法：<input type="image" src="按钮.jpg”>
重置按钮 将信息重置到默认状态
写法：<input type="reset">
表单信息分组
写法：<fieldset></fieldset>
<legend></legeng> 表单信息分组名称
表单控件
网址控件
写法：<input type="url">
日期控件
写法：<input type="date">
时间控件
写法：<input type="time">
邮件控件
写法：<input type="email">
数字控件
写法：<input type="number">
step 步长
滑块控件
写法：<input type="range">
step 步长
标签语义化
好的语义化网站标准就是去掉样式之后，结构依然很清晰。