【HTML】一文带你入门HTML

分手后的思念是犯贱 2023-10-15 13:28 125阅读 0赞

文章目录

  • 一、什么是HTML？
  • 二、vscode开发工具搭建
  • 三、第一个HTML页面的编写
  • 四、常见标签
      1. 注释|标题|段落|换行标签
      1. 格式化标签
      1. 图片标签：img
      1. 超链接标签：a
      1. 表格标签 table
      1. 列表标签 ul、ol、dl
      1. 表单标签 form、input
      1. 无语义标签 div & span
  • 五、实战案例
      1. 个人简历展示
      1. 个人简历填写页面

一、什么是HTML？

HTML是一种超文本标记语言，如何理解呢？

超文本：指的是文本、声音、图片、表格、链接等。
标记：为了做到一个页面上能够将超文本中的内容展示出来，是通过标签完成的，这些标签就是一个一个的标记。

HTML页面是运行到浏览器上面的！

二、vscode开发工具搭建

vscode是企业中开发前端的时候非常常用的一个开发工具，下面我们来看一下，使用它进行前端开发需要下载哪些插件。

  • Auto Rename Tag在这里插入图片描述
  • view-in-browser
    在这里插入图片描述
  • Live Server
    在这里插入图片描述

vscode如何快速生成代码框架：

我们知道，
在这里插入图片描述
在这里插入图片描述

三、第一个HTML页面的编写

我们可以先使用普通的记事本来编写一个简单的HTML代码。

在这里插入图片描述

下面我们将该文本文件的后缀名改为html，双击运行即可。

在这里插入图片描述

每一个标签相当于一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。

在这里插入图片描述

四、常见标签

1. 注释|标题|段落|换行标签

  • 注释标签

在vscode中，我们只需要选中我们想要注释的内容，然后在键盘上按下ctrl + /即可。

  • 标题标签

    这是h1标题


    这是h2标题


    这是h3标题


    这是h4标题


    这是h5标题

    这是h6标题

标题标签有六个, 从 h1 - h6, 数字越大, 则字体越小

在这里插入图片描述

  • 段落标签

    段落内容

在这里插入图片描述
在这里插入图片描述

  • 换行标签


    或者

这里我们需要注意一下几点：

  1. br 是 break 的缩写. 表示换行.
  2. br 是一个单标签(不需要结束标签)
  3. br 标签不像 p 标签那样带有一个很大的空隙.
  4. <br/> 是规范写法. 不建议写成<br>

在这里插入图片描述
在这里插入图片描述

2. 格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签

  • 下划线: ins 标签 和 u 标签

    strong 加粗
    b 加粗
    倾斜
    倾斜
    删除线
    删除线
    下划线
    下划线

在这里插入图片描述
在这里插入图片描述

3. 图片标签：img

img 标签的作用是向网页中嵌入图片，该标签必须带有 src 属性，表示图片的路径。src属性有绝对路径和相对路径两种表示方法：

相对路径： ./xxx.png、./img/xxx.png或者../xxx.png

在这里插入图片描述

在这里插入图片描述

绝对路径：图片路径或者网络上的图片资源

在这里插入图片描述
在这里插入图片描述

img 标签的其他属性

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字。
    在这里插入图片描述
    在这里插入图片描述
  • title: 提示文本. 鼠标放到图片上, 就会有提示。
    在这里插入图片描述
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡。
    在这里插入图片描述
    在这里插入图片描述
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
    在这里插入图片描述
    在这里插入图片描述
    很明显看到图片有了一层黑色的边框。

这里我们需要注意几点：

  1. 属性可以有多个, 不能写到标签之前
  2. 属性之间用空格分割, 可以是多个空格, 也可以是换行
  3. 属性之间不分先后顺序
  4. 属性使用 “键值对” 的格式来表示

4. 超链接标签：a

1. href: 必须具备, 表示点击后会跳转到哪个页面

  • 外部链接: href 引用其他网站的地址

    百度

在这里插入图片描述

在这里插入图片描述
当我们点击这个图片时即可跳转到百度官网的首页。

2. target属性:规定在何处打开链接文档

target的默认打开方式是_self，如果是_blank，则用新的页面打开。

对于上面的超链接，我们没有设置target属性，当我们点击它时都是默认在当前页面打开一个新的页面。当我们将target的属性设置为_self时，默认还是在当前页面打开超链接，将target的属性设置为_blank时，就用一个新的页面打开一个超链接。

  1. <a href="https://www.baidu.com/" target="_blank">
  2.    <img src="./百度logo图标.png" width="100px", height="100px">
  3. </a>

在这里插入图片描述

5. 表格标签 table

  • table标签: 表示整个表格
  • tr标签: 表示表格的一行
  • td标签: 表示一个单元格
  • th标签: 表示表头单元格. 会居中加粗
  • thead标签: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody标签: 表格得到主体区域。

table 包含 tr , tr 包含 td 或者 th。

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置。

在这里插入图片描述

  1. <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center">
  2.         <tr>
  3.             <td>姓名</td>           
  4.             <td>性别</td>           
  5.             <td>年龄</td>           
  6.         </tr>
  7.         <tr>
  8.             <td>张三</td>           
  9.             <td>男</td>
  10.             <td>3</td>
  11.         </tr>
  12.         <tr>
  13.             <td>李四</td>           
  14.             <td>男</td>           
  15.             <td>4</td>
  16.         </tr>
  17.         <tr>
  18.             <td>王五</td>           
  19.             <td>女</td>           
  20.             <td>5</td>
  21.         </tr>
  22. </table>

在这里插入图片描述
在这里插入图片描述

一般来说，表格的表头会有一种格式，表格中的主体区域又是另一种格式。这时thead标签和tbody标签就派上用场了。

  • thread里面的内容是居中+加粗展示的。
    在这里插入图片描述
  • 单元格合并
    在这里插入图片描述
    在这里插入图片描述

6. 列表标签 ul、ol、dl

  • 无序列表[重要] ul li
  • 有序列表[用的不多] ol li
  • 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的

无序列表 ul li

基本格式：

  1. <ul>
  2.    <li>这是内容一</li>
  3.    <li>这是内容二</li>
  4.    <li>这是内容三</li>
  5. </ul>

在这里插入图片描述

ul标签中的type属性可以修改的，默认的情况下，它是一个实心小圆点。我们可以控制它变成其他样式。

  • disc 实心圆
  • square 实心小正方形
  • circle 空心圆

在这里插入图片描述

有序列表 ol li

  1. <ol>
  2.   <li>这是有序列表1</li>
  3.   <li>这是有序列表2</li>
  4.   <li>这是有序列表3</li>
  5.   <li>这是有序列表4</li>
  6. </ol>

在这里插入图片描述

同样，ol标签中具有type属性和start属性，type属性和无序列表一样，都是展示左边序号的样式，start属性则决定列表从几号开始。

type属性的设置如下：

  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号（默认）

在这里插入图片描述

自定义列表dl (总标签) dt (小标题) dd (围绕标题来说明)

  1. <h1>这是自定义列表</h1>
  2. <dl>
  3.     <dt> 自定义列表显示内容
  4.         <dd>自定义列表内容1</dd>
  5.         <dd>自定义列表内容2</dd>
  6.         <dd>自定义列表内容3</dd>
  7.     </dt>
  8. </dl>

在这里插入图片描述

7. 表单标签 form、input

表单是让用户输入信息的重要途径，表单分成两个部分：

  • 表单域: 包含表单元素的区域. 重点是 form 标签.
  • 表单控件: 输入框, 提交按钮等. 重点是 input 标签

form标签

  1. <form action="test.html">
  2.     ... [form 的内容]
  3. </form>

form描述了要把数据按照什么方式，提交到哪个页面中，关于 form 需要结合 服务器 & 网络编程 来进一步理解，后面再详细研究。

input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框，下面是input标签的一些属性：

  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio等.
  • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • checked: 默认被选中. (用于单选按钮和多选按钮)
  • maxlength: 设定最大长度.

  • 文本框

在这里插入图片描述

  • 密码框

在这里插入图片描述
当我们在密码框中输入密码时，显示的是一种加密的状态。

  • 单选框

    性别:
    男
    女

在这里type属性表示它是一个单选框，name属性设置为相同的字符串就可以保证只能有一个被选中，checked属性设置到哪个选项，哪个选项就是被默认选中的。
在这里插入图片描述

  • 复选框

    爱好:
    吃饭
    睡觉
    打游戏

在这里插入图片描述

  • 普通按钮

在这里插入图片描述
这个按钮按下去之后没有任何反应，这是因为它需要搭配 JS 使用(后面会重点研究)，下面我们先来演示一下：

  1. <input type="button" value="我是个按钮" onclick="alert('hello')">

在这里插入图片描述

  • 提交按钮、清空按钮和选择文件按钮

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送。

  1. <input type="submit">

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置。

  1. <input type="reset">

选择文件按钮

  1. <input type="file">

举例演示一下：

  1. <form action="https://www.baidu.com/">
  2.     课程<input type="text" name="course">
  3.     <input type="submit">
  4.     <input type="reset">
  5.     <input type="file">
  6. </form>

在这里插入图片描述

  • label标签
    搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验。for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

在这里插入图片描述

  • select 标签——下拉菜单
    select标签的作用是制作一个下拉菜单。select标签一般会搭配option标签使用，option标签会展示出你可以选择的选项。默认选中为第一项，当然，option 中定义 selected=“selected” 表示默认选中。select标签具有size和multiple属性，如果select标签中定义multiple = "multiple"时，下拉菜单具有多项选择的功能，方法为按住Ctrl键选择多次。size属性则指定下拉菜单的可见选项数。

在这里插入图片描述

  • textarea标签——文本域
    文本域中的内容, 就是默认内容，注意，空格也会有影响。rows表示的是文本域中可容纳的行数，cols表示的是文本域中可容纳的列数。

在这里插入图片描述

8. 无语义标签 div & span

无语义表示没有固定的用途，拿着这个标签啥都可以干。div标签, division的缩写, 含义是 分割。span标签, 含义是跨度。就是两个盒子. 用于网页布局

  • div 是独占一行的, 是一个大盒子.
  • span 不独占一行, 是一个小盒子
  1. <div>
  2.     <div>
  3.         <span>吃饭</span>
  4.         <span>睡觉</span>
  5.         <span>玩游戏</span>
  6.         <span>运动</span>
  7.     </div>
  8.     <div>吃饭</div>
  9.     <div>睡觉</div>
  10.     <div>玩游戏</div>
  11.     <div>运动</div>
  12. </div>

在这里插入图片描述

五、实战案例

1. 个人简历展示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <h1>陈某某</h1>
  10.     <div>
  11.         <h2>基本信息</h2>
  12.         <img src="./图片.png" alt="" width="300" height="200">
  13.         <span><p>求职意向: Java后端开发</p></span>
  14.         <span><p>联系方式: xxx-xxxx-xxxx</p></span>
  15.         <span><p>个人邮箱: xxxxxxxxxx@qq.com</p></span>
  16.         <span><p><a href="https://gitee.com/">我的Gitee</a></p></span>
  17.         <span><p><a href="https://www.csdn.net/">我的博客</a></p></span>
  18.     </div>
  19.     <div>
  20.         <h2>教育经历</h2>
  21.         <ol>
  22.             <li>xxxx年-xxxx年, 幼儿园</li>
  23.             <li>xxxx年-xxxx年, 小学</li>
  24.             <li>xxxx年-xxxx年, 初中</li>
  25.             <li>xxxx年-xxxx年, 高中</li>
  26.             <li>xxxx年-xxxx年, 大学</li>
  27.         </ol>
  28.     </div>
  29.     <div>
  30.         <h2>专业技能</h2>
  31.         <ul>
  32.             <li>Java基础语法扎实,已经刷了800道力扣</li>
  33.             <li>常见的数据结构可以独立实现并熟练应用</li>
  34.             <li>熟知计算机网络理论,并且可以独立排查常见问题</li>
  35.             <li>掌握Web开发能力,并且独立的开发了学校的留言墙功能</li>
  36.         </ul>
  37.     </div>
  38.     <div>
  39.         <h2>个人项目</h2>
  40.         <ol>
  41.             <h3><li>留言墙</li></h3>
  42.             <p>开发时间:2023年4月1日~2023年4月28日</p>
  43.             <p>功能介绍</p>
  44.             <ul>
  45.                 <li>支持留言发布</li>
  46.                 <li>支持匿名留言</li>
  47.             </ul>
  49.             <h3><li>学习小助手</li></h3>
  50.             <p>开发时间:2008年9月到2008年12月</p>
  51.             <p>功能介绍</p>
  52.             <ul>
  53.                 <li>支持错题检索</li>
  54.                 <li>支持同学探讨</li>
  55.             </ul>
  56.         </ol>
  57.     </div>
  58.     <div>
  59.         <h2>个人评价</h2>
  60.         <p>热爱生活,热爱编程</p>
  61.     </div>
  62. </body>
  63. </html>

效果如下：

在这里插入图片描述

2. 个人简历填写页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <table>
  10.         <thead><h3>请填写简历信息</h3></thead>
  11.         <tr>
  12.             <td>
  13.                 <label for="name">姓名</label>
  14.             </td>
  15.             <td>
  16.                 <input type="text" id="name">
  17.             </td>
  18.         </tr>
  19.         <tr>
  20.             <td>
  21.                 性别
  22.             </td>
  23.             <td>
  24.                 <input type="radio" name="sex" checked="checked" id="male">
  25.                 <label for="male">
  26.                     <img src="./male.png" alt="" width="25" height="25">男
  27.                 </label>
  28.                 <input type="radio" name="sex" id="female">
  29.                 <label for="female">
  30.                     <img src="./female.png" alt="" width="25" height="25">女
  31.                 </label>
  32.             </td>
  33.         </tr>
  34.         <tr>
  35.             <td>出生日期</td>
  36.             <td>
  37.                 <select name="" id="">
  38.                     <option value="">--请选择年份--</option>
  39.                     <option value="">2000</option>
  40.                     <option value="">2001</option>
  41.                     <option value="">2002</option>
  42.                     <option value="">2003</option>
  43.                     <option value="">2004</option>
  44.                     <option value="">2005</option>
  45.                     <option value="">2006</option>
  46.                     <option value="">2007</option>
  47.                     <option value="">2008</option>
  48.                     <option value="">2009</option>
  49.                     <option value="">2010</option>
  50.                 </select>
  51.                 <select name="" id="">
  52.                     <option value="">--请选择月份--</option>
  53.                     <option value="">1</option>
  54.                     <option value="">2</option>
  55.                     <option value="">3</option>
  56.                     <option value="">4</option>
  57.                     <option value="">5</option>
  58.                     <option value="">6</option>
  59.                     <option value="">7</option>
  60.                     <option value="">8</option>
  61.                     <option value="">9</option>
  62.                     <option value="">10</option>
  63.                     <option value="">11</option>
  64.                     <option value="">12</option>
  65.                 </select>
  66.                 <select name="" id="">
  67.                     <option value="">--请选择日期--</option>
  68.                     <option value="">1</option>
  69.                     <option value="">2</option>
  70.                     <option value="">3</option>
  71.                     <option value="">4</option>
  72.                     <option value="">5</option>
  73.                     <option value="">6</option>
  74.                     <option value="">7</option>
  75.                     <option value="">8</option>
  76.                     <option value="">9</option>
  77.                     <option value="">10</option>
  78.                     <option value="">11</option>
  79.                     <option value="">12</option>
  80.                     <option value="">13</option>
  81.                     <option value="">14</option>
  82.                     <option value="">15</option>
  83.                     <option value="">16</option>
  84.                     <option value="">17</option>
  85.                     <option value="">18</option>
  86.                     <option value="">19</option>
  87.                     <option value="">20</option>
  88.                     <option value="">21</option>
  89.                     <option value="">22</option>
  90.                     <option value="">23</option>
  91.                     <option value="">24</option>
  92.                     <option value="">25</option>
  93.                     <option value="">26</option>
  94.                     <option value="">27</option>
  95.                     <option value="">28</option>
  96.                     <option value="">29</option>
  97.                     <option value="">30</option>
  98.                 </select>
  99.             </td>
  100.         </tr>
  101.         <tr>
  102.             <td>
  103.                 <label for="school">就读学校</label>
  104.             </td>
  105.             <td>
  106.                 <input type="text" id="school">
  107.             </td>
  108.         </tr>
  109.         <tr>
  110.             <td>应聘岗位</td>
  111.             <td>
  112.                 <input type="checkbox" id="fe">
  113.                 <label for="fe">前端开发</label>
  114.                 <input type="checkbox" id="server">
  115.                 <label for="server">后端开发</label>
  116.                 <input type="checkbox" id="test">
  117.                 <label for="test">测试开发</label>
  118.                 <input type="checkbox" id="yunwei">
  119.                 <label for="yunwei">运维开发</label>
  120.             </td>
  121.         </tr>
  122.         <tr>
  123.             <td>掌握的技能</td>
  124.             <td>
  125.                 <textarea name="" id="" cols="30" rows="10"></textarea>
  126.             </td>
  127.         </tr>
  128.         <tr>
  129.             <td>项目经历</td>
  130.             <td>
  131.                 <textarea name="" id="" cols="30" rows="10"></textarea>
  132.             </td>
  133.         </tr>
  134.         <tr>
  135.             <td></td>
  136.             <td>
  137.                 <input type="checkbox" id="read">
  138.                 <label for="read">我已仔细阅读公司的招聘要求</label>
  139.             </td>
  140.         </tr>
  141.         <tr>
  142.             <td></td>
  143.             <td><a href="#">查看我的状态</a></td>
  144.         </tr>
  145.         <tr>
  146.             <td></td>
  147.             <td><h3>请应聘者确认信息</h3></td>
  148.         </tr>
  149.         <tr>
  150.             <td></td>
  151.             <td>
  152.                 <ul>
  153.                     <li>以上信息真实有效</li>
  154.                     <li>能够尽早去公司实习</li>
  155.                     <li>能接受公司的加班文化</li>
  156.                 </ul>
  157.             </td>
  158.         </tr>
  159.     </table>
  160. </body>
  161. </html>

效果如下：

在这里插入图片描述

这里再举几个HTML中的特殊字符

有些特殊的字符在 html 文件中是不能直接表示的, 例如

  • 空格:
  • 小于号: <
  • 大于号: >
  • 按位与: &

注意：html 标签就是用 < > 表示的. 因此内容里如果存在 < > , 就会发生混淆。

发表评论

表情：
评论列表 （有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读