HTML相关的文标记

文本标记

1. 文本样式
   H5推荐使用带有语义的元素，带有语义的元素更容易被网络爬虫找到
   <b></b> <strong></strong> 加粗
   <i></i> <em></em> 斜体
   <s></s> <del></del> 删除线
   <u></u> 下划线
   <sub></sub> 下标
   <sup></sup> 上标

2. 分区元素
   ① 块分区
   页面布局
   <div></div>
   单独成行,所有单独成行的元素都可以用:
   align=" " 属性
   ② 行分区
   处理同一行文本中有不同样式的时候
   <span></span> 是小盒子，放小图片，少的文字
   span不能套img,不能套div，不能套p元素
   与其他行内元素共用一行

3. 块内元素,行内元素
   1. 块级元素(dispaly:black):单独成行,丛上往下排列 ,行高能成开盒子宽度默认百分百，可以设置宽高 比如：div,h1-h6,ul,li,ol,dl,dd,dt.
   2. 行内元素(display:inline) :宽度取决于内容的大小，不能设置宽高，默认并排，放不下自动换行，中间有默认间距，行高撑不开盒子高度 比如：span, i,em b,strong,
   3. 行内块元素(display:inline-block)：可以设置宽高，默认并排，中间有间距， 具有文本特性 比如：img input等

4. 图像和链接

   1. img的使用
      <img src="" alt="" title=""> 单标签
      属性 :   src=“图片资源路径/url”
                  alt=“资源加载失败时 显示文本”
                  title 鼠标悬停时显示的文本
                  width="" 取值1.px为单位的数字,按原图比例缩小
                  height="" 使用图片的时候,要注意图片本身的大小

5. URL
   Uniform Resource Locator 统一资源定位符-----俗称资源路径
   ① 绝对路径
   是一个完整的路径, 使用网络资源时,用绝对路径。使用网络资源的优点：节省本地服务器的存储空间
   缺点，资源不稳定
   为了支持网络资源的优点：屏蔽缺点----->图床
   本地资源可以使用绝对路径，但是项目中不允许
   ②相对路径
   本服务器资源，使用相对路径

   1. 兄弟资源，直接写兄弟名称 src=“15.png”
   2. 兄弟的儿子，先写兄弟名称，用/进入兄弟，写兄弟儿子的名称 src=“img/12.png”
   3. 资源是兄弟儿子的儿子, src=“img/image/11.png”
   4. 父亲的兄弟，使用…/进入父级，在选中父级的东西 src="…/11.png"

6. 超链接 <a></a>
<a href="" target="" ></a>
   属性 href="" 要跳转的资源
           target="" _self 默认缺省值，在本页面打开新链接
                         _blank 新开选项卡页面，打开链接

7. 超链接的其他形式

   1. <a href="1.zip">下载</a>
   2. 打开系统自带写邮件的软件
      <a href="mailto:邮箱地址">写邮件</a>
   3. 使用a标签调用js代码
      <a href="javascript:方法名称()">调用js代码</a> 这个是需要背的
      <a href="#">回到页面顶部</a> 些项目时,如果不知道href转跳到哪里,就用#占位符
   4. 锚点
      在页面上定义一个位置.叫做锚点
      使用a标签
      ① 定义锚点,有两种方式
   5. H4定义锚点,a标签的name属性定义锚点
      <a name="锚点名称"></a>
   6. H5定义锚点,使用元素的id值，名称直接当做锚点
      <a id="id值">
      ② 跳转到锚点
      <a href="#锚点名称">就可以跳转到锚点

8. 表格 table>tr4>td4 简化
   <table>
<tr> ---------table row 行的简写
   <td></td> --------table data 列
   </tr>
</table>

   1. 属性
      ①.table的属性
      border=“1” 添加边框
      width=“200px” 设置宽高
      height=“200px”
      border-color=“purple” 设置边框颜色
      bgcolor=“pink” 设置背景颜色
      align=“center” 表格本身的水平对齐方式 left/center/right
      (块级元素的align属性，是让元素内部的文本水平居中)
      cellpadding=“20px” 设置单元格内边距(边框到内容之间的距离)
      cellspacing=“20px” 设置单元格外边距(边框到边框之间的距离)
      ③ tr
      bgcolor=""
      align=“right” 设置内容的水平对齐方式 left/center/right
      valign="bottom"设置内容的垂直对齐方式 top(上)/middle(中间)/bottom(下)
      ④ td/th的属性
      width=“200”
      height=“200”
      align=“right”
      valign=“top”
      bgcolor=“red”
   2. 表格特性
      1. 每一行的列数相同
      2. 每一行的某一列宽度必须相同，以最宽的那一列为准
      3. 一行中，所有的列必须高相同，以最高的那一列为准
      4. 如果设置的尺寸比内容大，显示按照设置尺寸显示,如果设置的尺寸比内容小，显示按照内容尺寸显示

9. 表格在渲染的时候，不直接画在页面
   把表格中数据一次性都读取到内存里，计算之后，再画到页面上
   结果就是，表格渲染比普通元素渲染效率低下
   PS，页面中的文本，英文和数字，如果中间没有空格，浏览器认为是一个完整的单词
   不换行

10. 不规则的表格
    列合并 colspan=“n” 在当前列向右合并n列，n包含自己
    要把被合并的列删除
    行合并 rowspan=“n” 在当前单元格向下合并n个单元格，n包含自己
    要把被合并的单元格删除

11. 表格的可选标记

    1. 表格的标题
       <caption></caption> 要求紧紧挨着table标签写，写在tr外层
    2. 行/列的标题
       <th></th> 替代td使用，有文本加粗居中的效果

12. 表格的复杂应用
    ①行分组—页面中不可见
    <thead></thead> 表头
    <tbody></tbody> 表主
    <tfoot></tfoot> 表脚
    如果表格没有做分组，浏览器默认添加一个tbody，把所有tr放入tbody中
    ②表格嵌套
    表格可以嵌套其他任意元素
    但是所有嵌套在表格中的内容，只能放在td/th中

本文地址：https://blog.csdn.net/weixin_46907923/article/details/111057503