html标签知识总结
通用标签属性
|------<body>属性
|------------bgcolor 网页背景颜色
|------------text 字体颜色
<body bgcolor="yellow" text="green"></body>
|------格式控制类标签
|------------<b></b> 字体加粗
|------------<i></i> 字体倾斜
|------------<u></u> 下划线
|------------<br> 换行 单标签
|-----------  空格
今天<br> 天气 太热 <i>字符的倾斜</i> <b>字符的加粗</b> <u>字符的下划线</u>
|------内容容器类标签
|------------<h1></h1>到<h6></h6> 做标题 字体逐渐减小
|------------<p></p> 段落
|------------<span></span> 层标签 行内元素 内容有多少占多少
|------------<div></div> 块状元素 默认占一整行
|------------<ol type=""><li></li></ol> 有序列表 type可用数字或字母等标明顺序
|------------<ul type=""><li></li></ul> 无序列表 type可改变标记的形状
<h1>这是1</h1> <h2>这是2</h2> <h3>这是3</h3> <h4>这是4</h4> <h5>这是5</h5> <h6>这是6</h6> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <div>这是我的第一个div标签</div> <div>这是我的第二个div标签</div> <div>这是我的第三个div标签</div> <span>这是我的第一个span标签</span> <span>这是我的第二个span标签</span> <span>这是我的第三个span标签</span> <ol type="A"> <li>第一</li> <li>第二</li> </ol> <ul type="square"> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> </ul>
常用标签
|------<a></a>
|------------超链接 href属性写明指向的方向
|------------下载 href指向下载的文件 文本文档、网页、图片无法下载
|------------锚点 回到当前页面顶端等操作
<a href="https://www.baidu.com">跳转到百度</a>
<a href="ab20ac122c8f7823b2ee031c6372ab33.rar">下载</a>
<a name=“top”></a> <a href="#top">回顶部</a>
|------<img/>
|------------src 图片的路径
|------------width 图片的宽度
|------------height 图片的高度
|------------alt 图片加载失败时显示的文字
|------------title 鼠标放图片上时显示的文字
|------------图片作超链接 <a href=""><img width="" height=”" src="" /></a>
<img src="ab20ac122c8f7823b2ee031c6372ab33.jpg" width="100" height="50" title="这是我的图片" alt="这也是我的图片"/>
表格标签
|------<table></table> 表格
|------------width 宽度
|------------border 边框粗细
|------------cellspacing 单元格与边框的距离
|------------cellpadding 单元格之间的距离
|------------bordercolor 边框颜色
<table width="100%" bordercolor="green" border="1" cellspacing="0" cellpadding="0"></table>
|------<tr></tr> 行
|------<td></td> 代表单元格
|------------width 宽度
|------------height 高度
|------------align 水平对齐方式
|-------------------left 左对齐
|-------------------right右对齐
|-------------------center居中对齐
|------------valign 垂直对齐方式
|-------------------top上对齐
|-------------------button下对齐
|-------------------middle中间对齐
|------------colspan 左右合并
|------------rowspan 上下合并
|------------bgcolor 背景颜色
|------<th></th> 用作表头
<tr> <th align="center" valign="center">姓名</th> <th>性别</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>男</td> <td>0806</td> </tr>
表单元素
|------<form></form> 代表表单
|------------action 提交的页面地址
|------------method 提交页面的方式
|-------------------get 显式提交
|-------------------post 隐式提交
|------------target 打开页面的方式
|-------------------_blank 新页面打开
|-------------------_self 自身页面打开
<form action="https://www.baidu.com" method="get" target="_self"></form>
|------文本类
|------------文本框<input/>
|-------------------type=“text”
|-------------------value 文本框值
|-------------------name 文本框名称
|-------------------form传值时以name=value形式
<input type="text" name="" id="" value="" placeholder="请输入用户名"/>
|------------密码框<input/>
|-------------------type="password"
|-------------------value 密码框值
|-------------------name 密码框名称
|-------------------form传值时以name=value形式
<input type="password" name="" id="" value="" placeholder="请输入密码"/>
|------------隐藏域<input/>
|-------------------type=“hidden”
|-------------------value 隐藏域值
|-------------------name 隐藏域名称
|-------------------form传值时以name=value形式
<input type="hidden" name="" id="" value="" />
|------------文本域<textarea></textarea>
|-------------------文本写在标签内
|-------------------rows 行数
|-------------------cols 横向字符数
<textarea name="text" rows="2" cols="2"></textarea>
|------------placeholder 文本框默认显示的文字
|------按钮类
|------------普通按钮<input/>
|-------------------type=button”
|-------------------name 按钮名称
|-------------------value 按钮显示的文字
|------------提交按钮<input/>
|-------------------type=“submit” 提交
|------------重置按钮<input/>
|-------------------type=“reset” 将表单内容重置
|------------图片按钮<input/>
|-------------------type="image" 提交到<form>中action指向的文件
|-------------------src 引入图片
<input type="submit" name="" id="" value="提交" /> <input type="reset" name="" id="" value="重置" /> <input type="button" name="" id="" value="普通" /> <input type="image" src="58e88f04ea30c.jpg" width="50" height="50" id="" value=""/>
|------选择类
|------------单选按钮<input/>
|-------------------type=“radio”
|-------------------name按钮的名称
|-------------------value按钮的值
<p> <input type="radio" name="sex" id="" value="1" />男 <input type="radio" name="sex" id="" value="2" />女 </p>
|------------复选框<input/>
|-------------------type=“checkbox”
|-------------------name复选框的名称
|-------------------value复选框的值
<p> <input type="checkbox" name="地区1" id="" value="zd"/>张店 <input type="checkbox" name="地区2" id="" value="ht" checked="checked"/>桓台 <input type="checkbox" name="地区3" id="" value="lz"/>临淄 </p>
|------------下拉列表
|-------------------<select></select> 代表下拉 name下拉列表的值
|-------------------<option></option> 代表项 value该项的值
<p> <select name="chinaarea"> <option value="hz">杭州</option> <option value="bj" selected="selected">北京</option> <option value="sh">上海</option> <option value="js">江苏</option> </select> </p>
|------------文件选择<input/>
|-------------------type=“file”
|-------------------name 文件选择的名称
<p> <input type="file" name="upfile" id="" value=""/> </p>
|------其他属性
|------------readonly ="readonly" ：只读 可以提交value值
<p> <input type="text" name="read" id="" value="ceshi" readonly="readonly" /> </p>
|------------disabled ="disabled"：不可用 不可以提交value值
<p> <input type="text" name="dis read" id="disceshi" value="ceshi" disabled="disabled" /> </p>
|------------cheched ="checked" :是radio checkbox的默认选中
<input type="checkbox" name="地区2" id="" value="ht" checked="checked"/>桓台
|------------selected = "selected" 用在下拉列表中，设置哪一项选中
<option value="bj" selected="selected">北京</option>
框架
|------<frameset></frameset>
<frameset rows="300,*" frameborder="0"> <frame src="0806.html"/> <frame src="https://map.baidu.com/" /> </frameset>
|------<iframe></iframe>
<body> <div>这是我的界面 </div> <iframe src="0806.html" scrolling="yes" frameborder="0" width="300" height="300"> </iframe> </body>
其他
|------<marquee></marquee>
|------------滚动效果
|------------direction：滚动方向
|------<mark>标记
|------<hr>分割线
<hr /> <marquee direction="right"> 大家好 </marquee> <hr /> <p> <mark>大家好</mark> </p>
