html常用的标签及属性
网页的格式为:html head body 三大部分组成
标签
- html标签：
<html></html> <html/>完全闭合 和 自闭和
html元素是否换行 分为： 块元素和内联元素（行级元素）
浏览器的默认渲染模式：是从左-右 从上-下 - h标签：
<h1> <h2> <h3>... <h6>文字由大到小 加粗 是块元素 - hr标签：水平线，是块元素
- br标签：强制换行标签
- p标签：段落标签，用来文字分段，是块元素
- 文本格式化标签：
1.b 加粗 行级元素
2.strong 加粗 行级元素
3.i 斜体 行级元素
4.em 斜体 行级元素
5.sub 下标 行级元素 例如：H<sub>2</sub>O
6.sup 上标 行级元素 例如：3<sup>3</sup>=27
7.small 小号字 行级元素
8.ins 插入字 行级元素 例如：<ins>你看我脚下有条线</ins>
9.del 删除线 行级元素
10.code 专门写代码的标签 行级
11.pre 预先格式化 块元素(code和pre一起使用) code<pre 例如<pre><code>代码块</code></pre> - a标签：超链接，行级元素，属性，href:路径 例如<a href(“链接地址”)/>
- img标签：显示图像的标签 行级元素
属性 src 图片路径 可远程可相对
alt 图片加载失败的信息
width 设置宽 height 设置高
algin 文本对齐 center left right middle top bottom 指后边文字的对齐方式
name 名称 - 列表标签： 块元素 有序 ol>li 无序 ul>li 自定义 dl dt dd
通过type属性修改序号 仅对有序有效
list-style：none; 去除li里面的点
自定义列表： 块元素，如下
<ol type=””>
<dt>蔬菜</dt>l
<dd>黄瓜</dd>
<dd>西红柿</dd>
<dt>蔬菜</dt>
<dd>黄瓜</dd>
<dd>西红柿</dd>
</ol>
- table标签：.table表格标签 块级元素
table： tr(行) td/th(列)(th加粗居中) caption 表头
表格属性：border添加边框的
1.cellspacing 合并间距的
2.cellpadding 设置单元格的内间距 left-top-right(auto)-bottom
3.bgcolor 设置背景色属性 颜色的属性值： 单词值 十六进制颜色值 rgb(0,0,0) 通道值的最大值255 rgba(0,0,0,.5)
4.align 设置给table表格 表格的对齐方式 left center right
5.跨行 跨列属性 包含自身开始数
6.rowspan 跨行
7.Colspan 跨列
8.caption 表格名称 在td中充当属性
9.thead 可以写表格标题 和<tr><td></tr></td>效果一样
10.tfoot 写表格的底部信息 - 区块元素标签：
div 作用网页布局 包含所有的元素 块级元素 是个容器
span 专门包文本的元素 行级元素 - 表单元素标签 ：form 表单
属性action 表单提交的服务器路径
method 表单的提交方式 get post put insert delete
get提交为显示提交 不安全（数据可以直接看到 但是提交的数据量较大）
post提交为隐式提交 安全（数据看不到 数据量较小）
表单对象元素
input标签 常见的表单对象 行级块 （是行元素也是块元素 inline-block）
这个标签不写type属性默认单行文本框 例：<input/>
属性：
value是input标签的值 maxlength 输入的最大长度属性
placeholder 智能提示
name 属性 名称
type属性是确认input标签的类型的
type="text"单行文本框
type="radio"单选按钮
单选按钮 写相同的name就是多选一
属性：checked 默认选择
type="checkbox"复选框
属性checked 默认选择
type="password"密码框 基本一致 - 按钮标签：button
<button type="button">按钮</button>
type为button 普通按钮
下面这两个在form表单之外无效
reset 重置（重置表单）
submit 提交 （提交表单） （默认值）
普通按钮 `<input type="button" value="按钮"/>`
表单按钮
<input type="reset" value="取消"/>
<input type="submit" value="登录"/>
在表单元素之内有效果
- 下拉菜单标签：select
<select>
<option>-请选择-</option>
<option>-西安市-</option>
<option>-宝鸡市-</option>
</select>
下拉菜单默认 selected `<option selected>-西安市-</option> 默认西安`
给select 添加multiple 属性为多选 `<select multiple></select>`
- 多行文本域标签;textarea 设置多少行和列
cols="50" rows="10" placeholder="请输入..." - 打开文件资源管理器：
属性：限制选择文件的后缀accept=".mp4,.mp5"设置多选multiple
例如：<input type="file" placeholder="请选择..." accept="JPG,jpg,png" multiple/> - label 标签 :表单内部包含文字 的标签
for 属性绑定到表单对象元素的id属性
<ul>
<li>
<label for="shouye"></label>
<button id="shouye">首页</button>
</li>
</ul>
- iframe标签：框架标签 可以内嵌网页
例如：<iframe src="https://www.baidu.com" width="100%" height="300"></iframe>
属性frameborder="0"设置边框为0
src属性是内嵌的网页地址
例如：
<a href="./page/page1.html" target="target">网页1</a>
<a href="./page/page2.html" target="target">网页2</a>
<a href="./page/page3.html" target="target">网页3</a>
<iframe src="./page/page1.html" frameborder="0" name="target"></iframe>
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
