前端HTML基础

最新推荐文章于 2024-07-30 23:06:43 发布

XUN~MLF

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量786

点赞数 18

分类专栏：前端文章标签：前端 html 青少年编程改行学it 开源

本文链接：https://blog.csdn.net/xun__mlf/article/details/140446637

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 标签语法

HTML 超文本标记语言——HyperText Markup Language。

超文本：链接
标记：标签，带尖括号的文本

标签结构：

标签要成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
标签分类：双标签和单标签

<strong>需要加粗的文字<strong>
<br>
<hr>

2 html 骨架

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

3 标题标签

一般使用在新闻标题、文章标题等地
标题标签的特点：

文字加粗
字号逐渐减小
独占一行
h1 标签只能使用一次，h2-h6没有使用次数

<!-- 这里是标题标签 -->
<h1> h1 是一级标题，一般一个网页只用一次</h1>
<h2> h2 - h6 可以无限使用，字号逐渐减小</h2>
<h3> 三级 </h3>
<h4>四级</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

4 注释

在 vscode 中添加注释的快捷键的方式是：

<!-- 我是 HTML 注释 -->

windows 中 Ctrl + /
Mac 中 command + /

5 常用的一些标签


<p>段落</p>
<!-- 换行标签 -->
<br> 
<!-- 水平线 -->
<hr>

无语义布局标签
<div> div 标签  独占一行</div>
<span> span 标签 不换行</span>

6 文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

 <!-- 上面都是常用的  strong em ins del 这几个标签自带强调含义-->
   <strong>  strong 加粗</strong>
   <b> b 加粗</b>
   <br>
   <em> em 倾斜</em>
   <i> i 倾斜</i>
   <br>
   <ins> ins 下划线 </ins>
   <u> u 下划线</u>
   <br>
   <del> del  删除线</del>
   <s> s 删除线</s>

7 路径问题

相对路径：从当前文件位置出发查找目标文件

/ 表示进入某个文件夹里面     → 文件夹名 /
./ 表示当前文件所在文件夹   → ./
../表示当前文件的上一级文件夹 →../

绝对路径：从盘符出发查找目标文件

C:\images\mao.jpg

8 图像标签

作用：在页面中插入图片

<img  src="图片的 URL">

9 超链接标签

作用：跳转到其他页面

<a href="https://www.baidu.com/">跳转到百度</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./test01.html" target="_blank">跳转到test01.html</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

10 音视频标签

书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词
比如： loop = “loop” 可以简写为 loop

 <!-- 音频标签
    controls : 音频按钮
    loop ： 循环播放
    autoplay ： 浏览器一般禁用 -->
    <audio src="../music.mp3" controls loop autoplay></audio>

  <!--视频标签
    controls : 控制按钮
    loop ： 循环播放
    muted: 静音播放
    autoplay ： 只有在静音状态下才会自动播放
    -->
    <video src="../html.mp4" controls loop muted autoplay></video>

11 列表

列表分类：无序列表、有序列表、定义列表。

无序列表
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ul>

有序列表
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>

定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述

  <!-- 定义列表 -->
    <dl>
        <dt>列表标题</dt>
        <dd>列表描述</dd>
        <dd>列表描述2</dd>
        <dt>列表详情</dt>
        <dd>列表11</dd>
        <dd>列表12</dd>
    </dl>

12 表格

标签：table 嵌套 tr，tr 嵌套 td / th。

  <!-- 
    table : 表示表格标签
    tr : 表示行
    th : 表头单元格
    td : 内容单元格 -->
    <!-- 使用border 属性可以为表格添加边框线 -->
     <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
        </tr>
     </table>

合并表格
合并单元格的步骤：

明确合并的目标
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

13 表单

作用：收集用户信息。

<form action=""></form>

使用场景：

登录页面
注册页面
搜索区域

input标签

1. type 属性
文本框 ：<input type="text" >
密码框 ：<input type="password">
单选框 ：<input type="radio">
多选框 ：<input type="checkbox">
上传文件：<input type="password">

2 .其他属性
标签占位文本 ： placeholder
<input type="..." placeholder="提示信息">
<!-- 如果不添加 multiple 默认只能选中一个文件，添加这个属性可以选择多个文件 -->
上传文件：<input type="file" multiple>

在单选框中常用的属性 
name: 控件名称，对控件进行分组，同组只能选中一个（单选功能）
checked：默认选中
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <!-- 默认显示第一项，selected 属性实现默认选中功能。 -->
  <option selected>武汉</option>
</select>

文本域

作用：多行输入文本的表单控件。

注意点：

实际开发中，使用 CSS 设置文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能

<textarea>默认提示文字</textarea>

label 标签

作用：网页中，某个标签的说明文本。
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

写法二：使用 label 标签包裹文字和表单控件，不需要属性

<label><input type="radio"> 女</label>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

<button type="...">按钮</button>
type = submit : 提交按钮，点击可以提交到后台（默认功能）
type = submit : 重置按钮，点击表单后讲内容恢复默认值
type = submit : 普通按钮，没有功能，一般配合js使用

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

字符实体

注意是 & 开头；结尾

<!-- 空格字符： &nbsp; -->
    你我都是牛&nbsp;&nbsp;马

    <!-- 
    小于< : &lt;  
    大于> : &gt; -->
    &lt; p &gt;

实例

 <h1>注册信息</h1>
   <form action="">
       <!-- 个人信息 -->
       <h2>个人信息</h2>
       <label>姓名:</label><input type="text" placeholder="请输入真实姓名">
       <br><br>
       <label>密码:</label><input type="password" placeholder="请输入密码">
       <br><br>
       <label>密码确认:</label><input type="password" placeholder="请输入密码">
       <br><br>
       <label>姓别:</label>
       <label><input type="radio" name="gender">男</label>
       <label><input type="radio" name="gender">女</label>
       <br><br>
       <label>居住城市:</label>
       <select>
           <option>北京</option>
           <option>天津</option>
           <option>武汉</option>
           <option>深圳</option>
           <option>南京</option>
       </select>

       <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历:</label>
        <select>
           <option>大专</option>
           <option>本科</option>
           <option>硕士</option>
           <option>博士</option>
        </select>
        <br><br>

        <label>学校名称:</label><input type="text"><br><br>
        <label>所学专业:</label><input type="text"><br><br>
        <label>在校时间:</label>
        <select>
           <option>2022</option>
           <option>2023</option>
           <option>2024</option>
        </select>
        ----
        <select>
           <option>2025</option>
           <option>2026</option>
           <option>2027</option>
        </select>
        

       <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称:</label><input type="text"><br><br>
        <label>工作描述:</label><br><textarea></textarea><br><br>
        

        <input type="checkbox"><label>已阅读并同意以下协议:</label>
        <ul>
           <li> <a href="#">《用户服务协议》</a></li>
           <li> <a href="#">《隐私政策》</a>   </li>
        </ul>

        <button>免费注册</button>
        <button type="reset">重新填写</button>
   </form>