HTML

  • 1. 标题与段落标签
  • 2. 文本修饰标签
  • 3. 图片标签
  • 4. 链接标签
  • 5. 无序、有序列表与定义列表
  • 6. 表格、表单标签
  • 7. div与span标签

1. 标题与段落标签

 (1) 标题标签是一对双标签:

。在网页中,h1标签最重要,一个.html文件中只能有一个h1标签,h2、h3、h4、h5、h6可以有多个,最常用的标题标签是h1~h4,h5和h6在网页中不常使用。

 (2) 段落标签是一对双标签:。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">    <title>Document</title></head><body>    <h1>一级标题</h1>    <p>盼望着,盼望着,东风来了,春天的脚步近了。</p>    <h2>二级标题</h2>    <p>一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。</p>    <h3>三级标题</h3>    <p>小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。</p>    <h4>四级标题</h4>    <p>坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草软绵绵的。</p></body></html>

2. 文本修饰标签

 (1) 强调标签是一对双标签:,strong标签会对文本进行加粗,em标签会对文本进行斜体,strong的强调性比em更强。

 (2) 上、下标文本标签都是一对双标签:

 (3) 插入、删除文本标签都是一对双标签:
(4) 换行标签是单标签:

(5) 水平分割线标签是单标签:


<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">    <title>Document</title></head><body>   <strong>strong标签强调的文字</strong>    <br>    <hr>    <em>em标签强调的文字</em>    <br>    <hr>    3<sup>2</sup>+2<sup>2</sup>=13    <br>    <hr>    <ins>100</ins>    <br>    <hr>    <del>200</del></body></html>

3. 图片标签

 (1) 图片标签是单标签:
(2) 图片标签的属性:
 width、height:图片的宽、高;
 src:在.html文件中引入图片的地址;
 alt:当图片加载出现问题或无法加载时,起提示作用;
 title:提示图片的信息。

 (3) 引入文件的路径:
 相对路径:文件相对于引用文件去定义被引用文件的地址,.表示当前文件目录下,..表示上一级文件目录下。


 当图片scene_1.jpg在index.html文件的上一级目录下时,引入这张图片的路径src=“../img/scene_1.jpg”。

  绝对路径:文件相对于磁盘位置定位的地址,例如:C:\Users\19464\Desktop\img\scene_1
,或者文件在网络中的地址,例如:https://img-blog.csdnimg.cn/5c19201f59c9434eae99cc9ced43c0a8.png#pic_center。

4. 链接标签

 (1) 链接标签是一对双标签:。

 (2) a标签的属性:
 href:链接的地址;
 target:链接的跳转方式,默认值_self是在当前页面打开,_blank是在新窗口打开链接。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">    <title>Document</title></head><body>    <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩官网</a>        <a href="https://www.bilibili.com/">        <img src="./img/scene_1.jpg" alt="风景图">    </a></body></html>

 给文本加上a标签,点击文本内容就会跳转到指定网址。不仅文本可以加上a标签,图片也可以,点击图片也会跳转到指定网址。

 (3) base标签:单标签,可以改变链接的默认跳转行为。

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title>        <base target="_blank"></head><body>    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>    <a href="https://www.bilibili.com/">        <img src="./img/scene_1.jpg" alt="风景图">    </a></body></html>

 (4) 跳转锚点:
 在网页内部进行跳转,网页内部的一个点跳转到另一个点。
 第一种方式:href属性值为#id名,跳转到带id属性的标签元素处;
 第二种方式:href属性值为#name属性的属性值,跳转到带name属性的a标签处。

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <a href="#p_1">段落1</a>    <a href="#p_2">段落2</a>    <p>文字段落</p>    <p>文字段落</p>    <p>文字段落</p>    <p id="p_1">文字段落1文字段落1文字段落1文字段落1文字段落1文字段落1</p>    <p>文字段落</p>    <p>文字段落</p>    <p>文字段落</p>    <a name="p_2"></a>    <p>文字段落</p></body></html>

5. 无序、有序列表与定义列表

 ul、ol标签和li标签必须组合存在,而且li的父级标签必须是ul或者ol,不能是其它标签。有序列表用得比较少,无序列表经常可以代替有序列表实现列表功能。

 (1) 无序列表:

     列表项:

  • (2) 有序列表:

       列表项:

    1. (3) 定义列表:

      <!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>        <ul>        <li>无序列表项1</li>        <li>无序列表项2</li>        <li>无序列表项3</li>    </ul>    <ol>        <li>有序列表项1</li>        <li>有序列表项2</li>        <li>有序列表项3</li>    </ol>    <dl>        <dt>HTML</dt>        <dd>            HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。        </dd>        <dt>CSS</dt>        <dd>            层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。        </dd>    </dl>        <ul>        <p>            <li></li>        </p>    </ul>    <ol>        <span>            <li></li>        </span>    </ol></body></html>


      (4) 列表之间也可以相互嵌套,从而形成多层级的列表,二级导航就是使用多层级列表来实现的。

      <!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <ul>        <li>            <ul>                <li>列表项1</li>                <li>列表项2</li>                <li>列表项3</li>            </ul>        </li>        <li>            <ul>                <li>列表项4</li>                <li>列表项5</li>                <li>列表项6</li>               </ul>        </li>    </ul></body></html>

      6. 表格、表单标签

       (1) 表格外层容器:

      ,表格标题:

      ,表头:

      ,表格行:

      ,表格单元:


      (2) 表格语义化标签:、、,tBody和tFood在一个表中可以定义多个,但是tHead只能定义一次。
      (3) 表格的属性:
       border:表格边框;
       cellpadding:单元格内空间;
       cellspacing:单元格之间空间;
       rowspan:合并一行的单元格;
       colspan:合并一列的单元格;
       align:水平对齐方式;
       valign:竖直对齐方式。

      <!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <table>        <caption>员工工资表</caption>        <tr>            <th>编号</th><th>姓名</th><th>工资</th>        </tr>        <tr>            <td>1</td><td>张三</td><td>8000</td>        </tr>        <tr>            <td>2</td><td>李四</td><td>10000</td>        </tr>    </table></body></html>

       (4) 表单外层容器:,表单input标签:;
       input标签的type属性值:

      type属性值含义
      text文本框
      password密码输入框
      checkbox复选框
      radio单选框
      submit提交按钮
      reset重置按钮
      file上传文件

       多行文本框:
      下拉菜单:,选项:;
      辅助表单:
      表单的常用属性:
      placeholder:给出输入框的提示信息;
      checked:被选中;
      name:表单名称;
      disabled:用于复选框禁用某个选项;
      action:表单提交数据的目的地;
      method:表单发送数据的方式,get和post方式;
      for:规定 label 与哪个表单元素绑定。

      <!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <form action="https://www.bilibili.com/" method="post">        <label for="user">账号</label>        <input type="text" id="_user" placeholder="请输入账号"><br>        <label for="_password">密码</label>        <input type="password" id="_password" placeholder="请输入密码"><br>        <select>            <option>运动</option>            <option>音乐</option>            <option>电影</option>        </select>    </form></body></html>

      7. div与span标签

       (1) div(块)标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联,div标签是一个块级元素,每个div标签独占一行,换行是div标签固有的唯一格式表现。
      (2) span(内联)标签被用来组合文档中的行内元素。如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。

      <!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>     <div style="background-color: red;">        这是一个块级元素    </div>    <span style="background-color: blue;">这是一个内联元素</span></body></html>