2020.6.27 HTML总结

    技术2022-07-13  88

    HTML总结:

    一、HTML基本结构

    <html> <head> <title>这是一个文本</title> </head> ​ <body> 文本 </body> </html>

    < html >元素是 HTML 页面的根元素 < head > 元素包含了文档的元(meta)数据,如 < meta charset=“utf-8” > 定义网页编码格式为 utf-8。 < title > 元素描述了文档的标题 < body > 元素包含了可见的页面内容

    二、HTML标签

    1.分隔标签

    强制断行标签"<br>" 强制分段标签“<p>” 空格“< >”

    2.排版标签

    置中标签 <center>内容<center> 保持原始数标签 <pre>内容</pre>

    3.字体标签

    1.) < h >标签

    标题(Heading)是通过 < h1 > - < h6 > 标签进行定义的。

    < h1 > 定义最大的标题。 < h6 > 定义最小的标题。 < hr > 标签在 HTML 页面中创建水平线。

    <h1>一行文本</h1> <h2>一行文本</h2> <h3>一行文本</h3> <h4>一行文本</h4> <h5>一行文本</h5> <h6>一行文本</h6> <hr/> <!--我是水平线-->

    效果:

    一行文本

    一行文本

    一行文本

    一行文本

    一行文本
    一行文本

    2.) < p >标签

    段落是通过 < p > 标签定义的。

    <p>我是段落</p> <p>我也是段落</p>

    效果:

    我是段落

    我也是段落

    3.) < a >标签

    HTML使用标签 < a >来设置超文本链接。 格式: < a href=“url” target=“目标窗口”>链接文本< /a> 目标窗口:_blank 新窗口打开_parent 在原窗口打开

    <a href="http://www.baidu.com/" target="_parent">在当前窗口打开百度</a> <a href="http://www.baidu.com/" target="_blank">在新窗口打开百度</a>

    效果:

    在新窗口打开百度 在当前窗口打开百度

    4.)文本格式标签:

    < b >加粗 < strong >加粗 < del >删除线 < i >倾斜 < em >倾斜 < sub >下标 < sup >上标 < small >变小

    <b>我是加粗</b> <strong>我也是加粗</strong> <del>我是删除线</del> <i>我是倾斜</i> <em>我也是倾斜</em> 文本<sub>我是下标</sub> 文本<sup>我是上标</sup> <small>我是变小</small> <pre>我是预格式化</pre>

    效果:

    我是加粗 我也是加粗 我是删除线 我是倾斜 我也是倾斜 文本我是下标 文本我是上标 我是变小

    我是预格式化

    5.) < img >图片标签

    HTML使用< img> 标签来添加图片 格式:< img src=“图片路径” alt=“图片描述” width=“宽” height="高" title=“图片标题”/>

    < img src="./img/logo.jpg" alt="加载失败" width="400" height="200" title="图片标题"/>

    6.)< ul >< ol >标签

    无序列表: 无序列表是一个项目的列表,默认使用粗体圆点(典型的小黑圆圈)进行标记。(Type类型:disc、square、circle)

    <ul> <li>雁塔区</li> <li>新城区</li> <li>长安区</li> </ul>

    效果:

    雁塔区新城区长安区

    有序列表:

    有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 < ol > 标签。每个列表项始于 < li > 标签。列表项使用数字来标记。(Type类型:A、a、1、I、i)

    <ol> <li>雁塔区</li> <li>新城区</li> <li>长安区</li> </ol>

    效果:

    雁塔区新城区长安区

    7.) < table >表格标签

    表格由 < table > 标签来定义。每个表格均有若干行(由 < tr > 标签定义),每行被分割为若干单元格(由 < td > 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格的表头使用 < th> 标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本

    <table border="1"> <tr> <th rowspan="2">陕西省</th> <th>副省级市</th> <th colspan="2">地级市</th> </tr> <tr> <td rowspan="2">西安市</td> </tr> <tr> <td>咸阳市</td> <td>渭南市</td> <td>商洛市</td> </tr> </table>

    效果:

    陕西省副省级市地级市西安市咸阳市渭南市商洛市

    < border> 边框线 < width> 宽度 < bgcolor>背景色 < cellpadding> 单元格填充 < cellspacing> 单元格间距 合并列 colspan 合并行 rowspan

    8.) < form >表单标签

    表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 < form> 来设置:

    <form action=”提交目标地址” method=”get/post”> </form> <input type=”text”/>单行文本框 <input type=”password”/>密码框 <input type=”radio”/>单选项 <input type=”checkbox”/>复选框 <input type=”number”>数值类型 <textarea ></textarea> 多行文本框

    常见行内元素: a,span,img,input,select,strong,label,b 常见块级元素:p,div,ul,ol,dl,table,h1,form

    Processed: 0.014, SQL: 9