HTML概述

什么是HTML

HyperTextMarkupLanguage:超文本标记语言

超文本: 不仅仅是纯文本,还包括字体效果和多媒体信息(音频,视频,图片)

标记语言: <开始标签 属性=”xxx”>标签体</结束标签>

为什么使用HTML

HTML是一个行业标准, 大家都遵循这个标准的话 才能够保证各个浏览器显示的内容一致

创建第一个HTML页面

  1. <!-- 文档声明:告诉浏览器html的版本是html5 -->
  2. <!DOCTYPE html> 
  3. <!-- 根标签 所有其它标签都是写在html里面的 -->
  4. <html lang="en"> 
  5.     <!-- 头标签: 给浏览器看的内容写在头标签里面 -->
  6.     <head>
  7.         <!-- 告诉浏览器页面的字符集是UTF-8 -->
  8.         <meta charset="UTF-8"> 
  9.         <!-- 告诉浏览页面标题是什么 -->
  10.         <title>Title</title>
  11.     </head>
  12.     <body>
  13.         <!-- 体标签:给用户看的内容写在体标签里面 -->
  14.     </body>
  15. </html>

HTML标签介绍

文本相关标签

内容标题:h1-h6 字体加粗,自带上下间距, 独占一行

  1. <h1>content</h1>
  2. <h2>content</h2>
  3. <h3>content</h3>
  4. <h4>content</h4>
  5. <h5>content</h5>
  6. <h6>content</h6>

段落标签:p 独占一行 ,自带上下间距

  1. <p>content</p>

水平分割线:hr

  1. <hr>
  2. <hr />

换行:br

  1. <br>
  2. <br />

加粗 b

  1. <b>content</b>

斜体 i

  1. <i>content</i>

删除线 s

  1. <s>content</s>

下划线 u

  1. <u>content</u>

小字 small

  1. <span>content</span>

列表标签

无序列表 ul 和 li

  1. <h3>无序列表</h3>
  2. <!-- unordered无序 list 列表 -->
  3. <ul>
  4.     <!-- list item 列表项 -->
  5.     <li>刘备</li>
  6.     <li>关羽</li>
  7.     <li>诸葛亮</li>
  8.     <li>孙尚香</li>
  9.     <li>刘禅</li>
  10. </ul>

有序列表 ol(type序号类型 start起始值 reversed降序)和li

  1. <h3>有序列表</h3>
  2. <!--
  3.     type:序号类型1,A,a,I,i
  4.     start:设置起始值
  5.     reversed:降序
  6. -->
  7. <!-- ordered排序 list列表 -->
  8. <ol type="1" start="10" reversed="reversed">
  9.     <li>打开冰箱门</li>
  10.     <li>把大象装进去</li>
  11.     <li>关上冰箱门</li>
  12.     <li>aaaaa</li>
  13.     <li>bbbb</li>
  14. </ol>

列表嵌套: 有序列表和无序列表可以任意无限嵌套

  1. <h3>列表嵌套</h3>
  2. <!--有序列表和无序列表可以任意无限嵌套-->
  3. <ul>
  4.     <li>
  5.         凉菜
  6.         <ol>
  7.             <li>拍黄瓜</li>
  8.             <li>果仁菠菜</li>
  9.             <li>花毛一体</li>
  10.         </ol>
  11.     </li>
  12.     <li>
  13.         炒菜
  14.         <ol>
  15.             <li>
  16.                 西红柿鸡蛋
  17.                 <ul>
  18.                     <li>甜口</li>
  19.                     <li>咸口</li>
  20.                 </ul>
  21.             </li>
  22.             <li>木须肉</li>
  23.         </ol>
  24.     </li>
  25. </ul>

图片标签img

  • src路径:

    • 相对路径: 访问站内资源时使用

      • 页面和图片在相同路径: 直接写图片名
      • 图片在页面的上级目录: ../图片名
      • 图片在页面的下级目录: 文件夹名/图片名
    • 绝对路径:访问站外资源时使用, 图片盗链:好处是可以节省本站资源,坏处是有可能找不到图片.
  • alt: 图片不能正常显示时显示的文本
  • title:鼠标悬停时显示的文本
  • width/height: 设置图片宽高, 如果只设置宽度 高度会等比例缩放.
  1. <img src="URL" alt="图片不能正常显示时显示的文本" title="鼠标悬停时显示的文本">

超链接a

  • href:作用和图片标签的src类似,需要赋值一个路径,可以相对路径也可以绝对路径, 指向的资源如果浏览器支持浏览则直接浏览,如果不支持浏览则触发下载
  • 图片超链接: a标签包裹文本是文本超链接,包裹图片就是图片超链接
  • 页面内部跳转: 在目的地的元素位置给元素添加id, 在超链接里面href=#id,这样点击超链接时就能跳转到对应id元素的位置
  1. <a href="#top">回到顶部</a>

表格标签table

表格由一系列标签组合而成

  1. table表格
    属性: border 边框粗细 cellspacing 单元格间距 cellpadding单元格距内容的距离

  2. tr: table row 表示行

  3. td: table data 表示列
    属性: 跨行rowspan 跨列colspan

  4. th: table head 表头

  5. caption: 表格标题 显示在表格的正上方

  1. <table border="1">
  2.     <!--caption表格标题-->
  3.     <caption>订单列表</caption>
  4.     <tr>
  5.         <!--th table head表头 加粗并居中-->
  6.         <th>编号</th>
  7.         <th>商品名称</th>
  8.         <th>单价</th>
  9.     </tr>
  10.     <tr>
  11.         <td>1</td>
  12.         <td>小米11手机</td>
  13.         <td>3999</td>
  14.     </tr>
  15.     <tr>
  16.         <td>2</td>
  17.         <td>华为手表</td>
  18.         <td>1999</td>
  19.     </tr>
  20.     <tr>
  21.         <td>总价:</td>
  22.         <td colspan="2">5998元</td>
  23.     </tr>
  24. </table>

表单form

作用: 获取用户输入的各种信息,并且将信息提交给服务器, 学习form表单主要学习的就是表单中的各种控件, 包括:文本框,密码框,单选,多选,下拉选等.

  1. <!--action设置请求地址-->
  2. <form action="http://www.baidu.cn">
  3.     <!--name是所有控件必须写的属性,如果不写则不会提交数据-->
  4.     <!--
  5.         placeholder占位文本 
  6.         maxlength最大字符长度
  7.         value设置默认值 readonly只读
  8.     -->
  9.     用户名:<input type="text" name="username" placeholder="请输入您的用户名" maxlength="5" value="abcd" readonly="readonly">
  10.     <br>
  11.     <!--密码框属性和文本框属性通用-->
  12.     密码:<input type="password" placeholder="请输入您的密码" >
  13.     <br>
  14.     <!--两个单选框必须有相同的name值,如果不给单选框设置value则提交到服务器的就是on-->
  15.     性别:<input id="r1" type="radio" name="gender" value="m">
  16.     <label for="r1">男</label>
  17.     <!--checked设置默认选中-->
  18.     <input id="r2" type="radio" checked="checked" name="gender" value="w">
  19.     <label for="r2">女</label>
  20.     <br>
  21.     兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
  22.     <input type="checkbox" name="hobby" value="hj">喝酒
  23.     <input type="checkbox" name="hobby" checked="checked" value="ldm">撸代码
  24.     <br>
  25.     <!--日期选择器-->
  26.     生日:<input type="date" name="birthday">
  27.     <br>
  28.     <!--文件选择器-->
  29.     靓照:<input type="file" name="pic">
  30.     <br>
  31.     <!--文本域:文本域可以输入多行文本, 文本框是单行文本-->
  32.     <!--cols代表列 rows代表行-->
  33.     自我介绍: <textarea name="intro" id="t1" placeholder="这家伙很懒..." cols="30" rows="3"></textarea>
  34.     <br>
  35.     <!--下拉选  value设置提交的值, selected设置默认选中-->
  36.     所在地:
  37.     <select name="city">
  38.         <option value="bj">北京</option>
  39.         <option value="sh" selected="selected">上海</option>
  40.         <option value="gz">广州</option>
  41.     </select>
  42.     <br>
  43.     <input type="submit" value="注册">
  44.     <!--重置按钮-->
  45.     <input type="reset">
  46.     <!--自定义按钮-->
  47.     <input type="button" value="按钮">
  48. </form>

特殊字符

空格: html中存在空格折叠现象(多个空格只能识别出一个)

分区标签

  • 作用: 将多个有相关性的标签进行统一管理,为了提高开发效率

  • 常见的分区标签有:

    • div: 块级分区元素, 独占一行
    • span:行内分区元素,共占一行
  • 页面开发过程中如何进行分区?
    一个页面中至少分为3大区,每个大区中有n个小区:
  1. <div>头</div>
  2. <div>体</div>
  3. <div>脚</div>

html5标准中新增分区元素:(作用和div一样,好处是可以提高代码可读性)

  • header 头标签
  • footer 脚标签
  • article 正文标签
  • section 区域标签
  • nav 导航标签
  1. <header>头</header>
  2. <section>体</section>或<article>体</article>
  3. <footer>脚</footer>