2.html标签

東
101 阅读7分钟

1. 什么是HTML

全称是 HyperText Markup Language 即超⽂本标记语⾔，⼀种⽤于创建⽹⻚的标准标记语⾔。

2. 如何创建⼀个HTML文件

想要使⽤HTML需要创建HTML文件，每个网页都是⼀个HTML文件，html文件就是以 .html 结尾的⽂件。

在文件夹中右键新建文本文档，将文本文档修改后缀为 .html 即可。

<!DOCTYPE HTML>
<html>
</html>

3. HTML标签

标签语法

html是由标记（标签）组成的，标签由标签名和属性组成

3.1 标签写法

标签的写法 <标签名></标签名> 或者 <标签名 />

<!-- 标题 -->
<h1></h1>
<!-- 图片 -->
<img />
3.2 标签属性

在每个HTML标签上都由属性 <标签名 属性名="属性值" 属性名="属性值"></标签名>

<h1 class="title"></h1>
<a href="https://www.baidu.com">百度</a>
3.3 标签分类
  • 双标签和单标签
    • 双标签：如：

      、

    • 单标签：如：、
  • 块级元素、⾏内元素和⾏内块级元素

    • 块级元素：单独占⼀⾏，允许设置宽⾼值

    • ⾏内元素：不会单独占⼀⾏，从左往右排列，设置宽⾼值不起效

    • ⾏内块级元素： 不会单独占⼀⾏，从左往右排列，能设置宽⾼值

4. 格式标签

4.1 标题标签

< h16 align= "left|right|center"> </h16>

4.2 段落标签 p

给⽂本添加⼀个段落的语义，告诉浏览器，哪些⽂字是⼀个段落

< p align="left|right|center" >< /p >

4.3 换行标签  (用来输入空行，而不是分割段落)

< br />

4.4 水平线标签

< hr  width="" size="" align="" color=""  noshade / >

4.5 无意义标签

< span>< /span > < div></ div >

用来组合文档中的行内元素，没有固定的格式表现，使用样式时，才有样式上的变化

5. 文本标签

字体标签  < font color=""    face=""   size="1~7" ></ font>
粗体标签 < b></ b>< strong></ strong>
斜体标签 < i></ i>< em></ em>
下划线标签 < u></ u>
删除线标签 < del></ del>
上标标签 < sup></ sup>
下标标签 < sub></ sub>

6. 字符实体

  • 在 HTML 中，某些字符是预留的，比如HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
  • 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，比如<用 < 或< 表示
  • 字符实体由三部分组成：
    • 以&开始
    • 中间为实体名或实体编号
    • 以 ; 结束

  • 实体名称便于记忆而实体编号的浏览器兼容性更好

  • 实体名称区分大小写

7. 超链接标签

普通链接

基础语法：< a  href="链接地址"  target="blank | self" title="描述">文本或图片</ a>

href：连接路径

target：标的意思，跳转后的网站是否在新标签页打开； blank新窗口跳转， self当前窗口跳转

title：鼠标悬浮显示文字

空链接  < a href="##">< /a >

返回页面顶部 < a href="#">< /a>

保持原位置 < a href=“javascript:; ”>< /a >

脚本链接   < a href="javscript:alert('hello world')">< /a>

电子邮件链接 < a href="mailto:邮箱地址" >< /a >

拨打电话 < a href="tel:电话号码" >< /a >

注意：

a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。

如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。

7.1 URL相对地址与绝对地址

7.2 锚点链接

  • 使用 name 属性创建 HTML 页面中的锚点
  • 当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
  • 步骤

    1. 创建锚点   < a name="锚点名称"></ a>

    2. 链接到锚点
      同一页面 : < a href="#锚点名称" ></ a>
      不同页面 : < a href="目标文档URL# 锚点名称">< /a>

8. 图片标签

基础语法：

src        source的缩写，来源，表示图⽚的来源、路径。必须的属性
alt         图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片
width    图片宽度
height   图片高度
border   图片边框

设计网页时经常使用的图片有三种格式：

  • GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.

  • JPEG | JPG-- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.256256256

  • PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画

8.1 热点地图

<img  src="" alt="" usemap="#test">
<map name="test"  id="test">
    <area shape="rect" coords="x1,y1,x2,y2" alt="" href=""/>
    <area shape="circle" coords="x,y,r" alt="" href=""/>
    <area shape="poly" coords="x1,y1,x2,y2,……,xn,yn" alt="" href=""/>
</map>

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
中的 usemap 属性可引用  中的 id 或 name 属性（取决于浏览器），所以我们应同时向  添加 id 和 name 属性

9. 视频标签【html5新增的标签】

<!-- 音频或者视频 -->
<object data="../video/Tomorrow.mp4" height="200" width="200"></object>
<!-- 音频或者视频 -->
<embed src="../video/Tomorrow.mp4" height="200" width="200">
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>
	  audio 音频元素；用于嵌入一个 音频文件
    src 音频文件的URL
    controls 显示播放控件
    autopaly 表示立刻播放
    preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">
    video 视频播放元素
    src 视频资源的URL
    controls 表示显示播放控件
    autoplay 自动播放,目前不能使用
    muted 表示静音
    poster 指定视频载入时显示的图片封面
    loop 反复播放
    preload 预先加载

注意：如果你无法看到该视频,那么可能你的电脑不支持该文件格式

< object > 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

< embed >标签是html5中新标签，几乎所有浏览器都支持。拥有width、height、src、type(src引用文件的MIME 类型)四个属性

embed是针对非IE的浏览器（如火狐、chrome）的媒体播放器;

object是针对IE浏览器标签

10. 列表标签

分类：有序列表，无序列表，自定义列表

如果想要在页面上显示新闻业的内容，或者显示一列文字，可以使用列表

如图所示，百度新闻，腾讯新闻，网易新闻；还有一类用作网站栏目，比如小米官网栏目

<ul type="disc|square|circle">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>6</li>
</ul>
<ol type="a|A|i|I" start="num">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>6</li>
</ol>
<!-- 
ul 元素表示这是一个无序列表 
li 元素表示表内部的列表项，每一条
-->
disc默认值实心圆，square正方形，circle空心圆

ul：unordered list 无序列表

ol：ordered list 有序列表

图文并茂
<figure>
    <figcaption>这是一张图</figcaption>
    <img src="1.png" width="200">
</figure>
<!-- 
figure 插图元素
figcaption 表示插图的标题内容 说明
-->

11. 表格标签

11.1 表格基础标签

在过去表格标签⽤的⾮常多，很多⽹站都是⽤表格标签进⾏布局，展示数据的。

  • table：表格
  • tr：table rows ⾏
  • td：table dock 单元格

表格标签之间是相互嵌套的。table>tr>td

如果我们需要添加表头的语义，可以使⽤⼀个新的标签，th标签，th：table head 表示表头单元格，替换的是td的位置，table>tr>th

<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
表格宽高

表格的宽和⾼默认是按照内容的尺⼨⾃适应调整的。我们可以通过给table标签和td标签设置width/heigh属性的⽅式来指定表格/单元格的宽/⾼。

如果给td设置width和height，会修改当前单元格的宽和⾼，但不会影响这个表格的宽和高。

11.2 属性

border：表格边框

cellpadding：单元格内的空间

cellspacing：单元格之间的空间

align：内容⽔平对⻬⽅式

valign：内容垂直对⻬⽅式

<table border="1" width="600px" height="200px" cellpadding="0" cellspacing="0" align="center">
    <tr align="center" valign="middle">
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
</table>

11.3 合并单元格

rowspan：合并列方向单元格

colspan：合并行方向单元格

属性值是⼀些数字，表示合并单元格的数量

上边线在同⼀⾏的，就算在同⼀⾏

<table border="1">
    <tr>
        <td colspan="2">UZIYYDS</td>
        <td>adc</td>
        <td>我去洗个澡</td>
        <td>4800</td>
    </tr>
    <tr>
        <td>孤⼉索</td>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td rowspan="2">6300</td>
    </tr>
    <tr>
        <td>⼈⻢</td>
        <td>战争之影</td>
        <td>打野</td>
        <td>⻢踏⻜箭</td>
    </tr>
</table>

11.4 表格分区

标题：caption

表头：thead

页脚：tfoot

主体：tbody

语义化标签。

tfoot的位置在thead与tbody之间

这四个表格分区标签本身没有任何样式，仅仅是⼀个区块划分标记罢了

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0">
  <caption>学生信息表</caption>
  <thead>
  <tr align="" valign="" bgcolor="">
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>班级</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>章三</td>
    <td rowspan="2">男</td>
    <td>19</td>
    <td>java</td>
  </tr>
  <tr>
    <td>大张伟</td>
    <td>18</td>
    <td rowspan="2">python</td>
  </tr>
  <tr>
    <td>章子怡</td>
    <td>女</td>
    <td>19</td>
  </tr>
  </tfoot>
</table>

table 元素表示一个表格的声明

tr 元素表示表格的一行

td 元素表示一个单元格

默认的 table 表格是没有边框的 border属性表示增加一个边框

th 为表格添加标题单元格 实际作用就是内部文字居中加

td th均属于单元格，包含2个属性 colspan rowspan

colspan 表示合并 一行所在 列合并

rolspan 表示合并 一列所在 行合并

面试题：请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

avatar
文章
阅读
粉丝