1.a标签
标签属性:
-
href 跳转的链接或锚点 href 其实是 hyper reference 超链接的缩写
- href的取值如下
- 链接
<a href="http://www.baidu.com">百度一下</a> <!-- 普通的链接 http协议 --><a href="https://www.baidu.com">百度一下</a> <!-- 普通的链接 https协议 -->
<a href="//baidu.com">百度一下</a> <!-- 无协议网址 --><a href="/a/b/c/3.html" target="_blank">链接到此项目根目录下的a目录下的b目录下的c目录下的3.HTML</a> <!-- 启用http协议的链接第一个/表示的是当前启用服务的整个项目文件的根目录，而不是代表服务器根目录 --><a href="3.html" target="_blank">链接到此页面同一目录下3.HTML</a>
伪协议用法
javascript伪协议
-
<a href="javascript:alert("hello world!");">链接到此页面同一目录下3.HTML</a> <!-- 点击就会执行js代码 这里的 :; 不能省 -->- 上面的用法通常用来解决a标签没有任何响应的需求，:;之间不写任何东西即可，因为href属性值为空会刷新页面，为#会是页面回到顶部
锚点用法
-
<a href="#bottom">点我滚动到ID为bottom的元素的位置</a>发邮件
<a href="mailto:xxxxxxxx@qq.com">点我发邮件</a> <!-- 点击会打开发邮件的程序并填入所写的邮箱 -->电话
<a href="tel:18888888888">点我打电话给18888888888</a> <!-- 手机端点开直接开启打电话界面并自动填入手机号 -->
-
a 标签链接到超文本文件能直接打开，遇到非超文本文件提示下载
<a href="./1.txt" target="_blank">跳转到文本文档</a> <a href="./1.jpg" target="_blank">跳转到图片上</a> <a href="./1.zip" target="_blank">下载压缩文件</a> <a href="./1.exe" target="_blank">下载可执行文件</a>
-
target 指定页面的打开方式
<a href="http://www.baidu.com" target="_blank">百度一下</a> <!-- 在新建空白页面打开 --><a href="http://www.baidu.com" target="_self">百度一下</a> <!-- 在本页面打开 _self为默认值 -->
<a href="http://www.baidu.com" target="_top">百度一下</a> <!-- 在顶层页面打开此链接页面 需要配合iframe使用才能看出效果 --><a href="http://www.baidu.com" target="_parent">百度一下</a> <!-- 在父级页面打开此链接页面 需要配合iframe使用才能看出效果 --><a href="http://www.baidu.com" target="xxx">百度一下</a> <!-- 在一个新的页面打开百度，此页面下的 window.name 属性为xxx 如果有xxx就在xxx页面打开 这是允许程序员自定义名字的方式 --><a href="http://www.baidu.com" target="iframe的name值">百度一下</a> <!-- 在指定的iframe窗口打开此链接 -->
rel = noopener 防止一些BUG
download 此属性表示不是打开页面而是下载页面，不是所有浏览器都支持，尤其是手机浏览器
2.table表格标签
- table 表格标签 常用属性如下 :
- border 边框 默认双条线 单位 px 只对 一般为1px
- width 整个表格的宽度 单位 px
- height 整个表格的高度 单位 px
- align 此表格在浏览器中的对齐方式
- cellspacing 单元格和单元格之间的距离 单位 px
- thead 表头
- tbody 表格体
- tr 表格行 常用属性如下
- height 高度
- align 设置当前行里面每个单元格的文字的水平对齐方式
- valign 设置当前行里面每个单元格的文字的垂直对齐方式
- th 列或行的表头
- td 列数据 常用属性如下
- width
- height
- align 设置单元格内文字的水平对齐方式 left 左 center 中 right 右
- valign 设置单元格内文字的垂直对齐方式 top 上 center 中 bottom 下
- 注意 ：设置了当前单元格的宽度 整个列都会受到影响，设置了当前单元格的高度 整个行都会受到影响
- tfoot 表尾
table的结构中间只能有thead，tbody(必须有tbody否则浏览器也会给你补上)，tfoot，不能再放其他东西了，而td单元格里面放啥都行
示例：
<table width="500" height="400" align="center" border="1">
<tbody>
<tr height="100">
<td align="center"><b>序号</b></td>
<td align="right"><b>姓名</b></td>
<td>电影</td>
<td>评分</td>
</tr>
<tr>
<td>1</td>
<td width="200" height="100">刘德华</td>
<td>拆弹专家</td>
<td>9.0</td>
</tr>
<tr align="center">
<td>2</td>
<td>郭富城</td>
<td>无双</td>
<td>9.1</td>
</tr>
<tr valign="top" align="center">
<td>3</td>
<td>甄子丹</td>
<td>追龙</td>
<td>8.9</td>
</tr>
<tr>
<td>4</td>
<td>张家辉</td>
<td>贪玩蓝月</td>
<td align="right" valign="bottom">5.0</td>
</tr>
</tbody>
</table>
-
单元格的合并
- 行合并: rowspan 上下合并
- 列合并： colspan 左右合并
- 合并单元格步骤 :
- 确定要合并的n个格
- 删掉多余的格，只留一个
- 在剩余的唯一的格子上 写入 colspan 或者 rowspan 把几行/列合成一个就写几
-
表格常用的CSS属性
-
table-layout
table-layout: auto; /* 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 */table-layout: fixed; /*表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。 */
-
border-collapse
border-collapse:collapse; /* 表格边框合并 不设置的话默认不合并*/
-
border-spacing
border-spacing:0; /* 表格单元格之间的间距 一般都设置为0才好看 */
-
3.img标签
作用：发出get请求，展示一张图片
属性：
alt 图片加载失败的描述文字
height 图片的高 宽高只设置一个另一个值会等比缩放 都设置很可能会失真
width 图片的宽
src 图片的路径 也可以是图片的链接
两个重要的事件：
- onload 在图片加载成功时触发
- onerror 在图片加载失败时触发
响应式的CSS样式：
max-width:100%; /* 各种屏幕都适用 */
可替换元素：在 CSS中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。
CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式
4.form标签
作用:发get或post请求，然后刷新页面
属性：
- action 发送请求的地址
- method 发送请求的方法 get post
- autocomplete 属性值 on off 开启状态下会根据form里面的input输入框的name值提示相应的输入内容
- target 与a标签相同 表示要跳转的页面位置
重要事件：
onsubmit ： 表单按钮提交时触发
button按钮与input按钮的区别
<button type="submit"><span>发送</span></button> <!-- button标签的按钮 在表单里面不写type的值 则默认为submit 一个表单里面必须有一个type为submit的按钮 -->
<input type="submit"> <!-- input按钮 -->
两者的区别就是button标签按钮里面可以嵌套别的标签，后者不可以
5.input标签
作用： 让用户输入内容
属性:
-
type 类型类属性值
- button 按钮
- checkbox 多选框 一组的多选框需要相同的name值
- radio 单选框 一组的单选框需要相同的name值
- submit 触发提交事件功能的按钮
- file 上传文件 multiple 可以传多个文件
- number 输入数字
- password 输入密码 内容不可见
- text 输入文本
- tel 输入电话
- emali 输入邮箱
- hidden 不可见的输入框 一般于js提交不需要用户输入的数据
- search 用于搜索字符串的单行文字区域
- color 选择颜色
-
其他属性
- name 一般form表单里面的所有input必须要有这个属性，方便数据的传递
- autofocus 自动聚焦
- checked 默认选中 多用于下拉框 或者 单选和多选
- disabled 不可点击
- placeholder 占位符
- value 值
- pattern 规定用于验证输入字段的模式。 正则表达式等
- maxlength 规定输入字段的最大长度，以字符个数计。
- required HTML5 自带验证器 不输入内容会提示输入内容后才可提交
-
重要事件
- onchange 输入能容改变时触发
- onfocus 聚焦时触发
- onblur 失去焦点时触发
6.textarea 文字域标签
用来输入多个文字简介等内容，默认情况下用户可以缩放大小，可通过CSS中resize属性设置为不可缩放
属性cols 列数 rows 行数
<textarea style="resize: none;" name="" id="" cols="30" rows="10"></textarea>
7.select 下拉选项标签
<select name="wife" id="wife">
<optgroup label="温柔型"> <!-- 选项组 -->
<option value="方敏">方敏</option> <!-- 选项 -->
</optgroup>
<optgroup label="活泼型">
<option value="陆望舒">陆望舒</option>
</optgroup>
<optgroup label="魅力型">
<option value="庄晓曼">庄晓曼</option>
</optgroup>
</select>
