前端---HTML入门学习

微臣愚钝

已于 2024-09-25 13:51:30 修改

阅读量935

点赞数 18

分类专栏：前端文章标签：前端 html 学习

于 2024-09-25 13:44:52 首次发布

本文链接：https://blog.csdn.net/qq_73704268/article/details/142520677

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 是网页结构的基础，标签定义了内容和结构

一、HTML 的父子嵌套关系

HTML 标签可以互相嵌套，形成父子关系，最大父标签为 <html></html>，子标签可以嵌套在 <html> 内部，框架：

<html>
    <head>
        <title>我的第一个页面</title>
        <meta charset="utf-8">
    </head>
    <body>
        整个浏览器的大空白 demo
    </body>
</html>

嵌套规则

父标签可以包含多个子标签。
子标签可以继承父标签的某些样式。

二、vscode几个常用快捷键

感叹号生成基本结构：在 VSCode 中输入 !，按回车键即可生成基本 HTML 框架。
注释快捷键：Ctrl + /（有问号的那个/），可快速为选中的代码添加或取消注释。
HTML 元素直接输入元素名

操作：不需要加 < 和 >，输入元素名后直接生成完整标签。

示例：输入 div，按回车后自动生成 <div></div>。

{} 包含文本块

操作：在 {} 中书写的内容会直接在 HTML 标签内生成文本。

示例：输入 div{hello} 会生成 <div>hello</div>。

快速生成多个元素*N：
- 输入 div*20，回车后生成 20 个 <div> 标签。
内嵌标签生成：
- 使用 > 表示父子关系，例如：

div>span+a

<div>
    <span></span><a href=""></a>
</div>

标签加上#自动生成id值，加上 . 自动生成class属性

span#111
<span id="111"></span>
 span.55
 <span class="55"></span>

三、HTML常用基本标签--用于展示

<span> </span> 文本标签
- 内联元素，不独占一行。可用于小范围的对文字样式调整，如文字的颜色、大小等。

 <span style="color:red;font-size:50px">demo1</span>   
 <span style="color:yelllow;font-size:40px">demo2</span>

<h1> - <h6> 标题标签
- 用于表示不同层次的标题，<h1> 是最高层次，<h6> 是最低层次。标题标签默认竖向布局，通常用于结构化文章的层次。

<body >  
       <h1>文章的标题</h1> 
       <h2>文章的标题</h2> 
       <h3>文章的标题</h3> 
       <h4>文章的标题</h4> 
       <h5>文章的标题</h5> 
       <h6>文章的标题</h6> 
</body>

<div> </div> 标签
- 块级元素，通常用于布局容器，具有竖向布局的特性。没有样式，常与 CSS 配合使用。
<br> 标签
- 换行标签，直接在页面中插入一个换行符。
<p> </p> 段落标签
- 用于定义段落，默认情况下会有上下的间距。
<a> 超链接标签
- 用于创建超链接，常用属性包括：
  - href: 指定链接地址，可以是外部链接或内部锚点。
  - target: 设置链接的打开方式，如 _self（默认，在当前窗口打开）、_blank（在新窗口打开）。

<a href="https://yiyan.baidu.com/chat/4604914391">点击跳转 </a>
    <!-- <a href=" 要跳转链接的地址"  target ="打开方式">  </a>  -->

<a name=" "></a>锚点标签

herf可以写锚点（name值，表示跳转到锚点的位置），前面要加#

<a name="cc"></a> <!--预埋锚点，可以调到p标签前-->

后面代码可以添加超链接点击跳转锚点位置

<a href="#cc">点击跳转 p标签</a>

<img> 图片标签
- 用于插入图片，常用属性包括：
  - src: 图片的路径，可以是绝对路径或相对路径。
  - alt: 当图片加载失败时显示的替代文本。
  - width 和 height: 用于设置图片的宽高，设置其中一个会进行等比例缩放。

<img src="图片的路径" alt="一些描述性语言" width=" 100px"height="400px"> </img>

绝对路径：被访问资源在磁盘中的位置

相对路径：相对于当前文件所在位置的路径，它不需要从根目录开始写，只需要指定从当前文件到目标文件的路径。

. 表示当前目录。
.. 表示上一级目录

../返回上一目录

无序列表 (<ul>)：
- 作用：创建无序的列表项，通常以圆点（或其他样式）作为标记。
- 语法：
- ```
<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ul>
```
- 说明：列表项使用 <li> 标签，每个 <li> 标签会被自动标记一个圆点或其他符号。
有序列表 (<ol>)：
- 作用：创建有序的列表项，列表项前面会自动加上数字或字母。
- 语法：
```
<ol>
   <li>第一项</li>
   <li>第二项</li>
   <li>第三项</li>
</ol>
```
- 说明：每个列表项会自动编号，顺序可自定义为数字、字母等，通过 type 属性指定，如 type="A" 会用大写字母表示列表项。
<table>表格标签

用于创建结构化的表格，表格可以展示数据的行与列。

语法：

<table border="1" cellpadding="20px">
       <tr>
              <th>id</th> <!--表示单元格-->
              <th>name</th>
              <th>age</th><!--th相对于td有居住和加粗的功能-->
       </tr>
       <tr>
              <td >20515</td> <!--表示单元格-->
              <td>张三</td>
              <td>11</td>
       </tr>
       <tr></tr>
              <td >20515585</td> <!--表示单元格-->
              <td>李四</td>
              <td colspan="2">12</td>
       </tr>
    </table>

标签解释：
- <table>：定义一个表格。
- <tr>：定义表格中的一行。
- <th>：定义表格头部的单元格，通常显示为加粗且居中。
- <td>：定义表格中的普通单元格，存储数据。
常见属性：

border：设置表格边框的宽度（像素）。

cellpadding：定义单元格内容与单元格边框之间的距离，增加内部的填充。

cellspacing：定义单元格之间的间距。0 表示没有间距。

一些操作：
- 行合并 (rowspan)：用于让某个单元格跨越多行。
  - 语法：
  - ```
  <td rowspan="2">合并的单元格</td>
```
- 说明：将该单元格跨越 2 行显示。
- 列合并 (colspan)：用于让某个单元格跨越多列。
  - 语法：
```
<td colspan="3">合并的单元格</td>
```
  - 说明：将该单元格跨越 3 列显示。
形成窗口标签--<iframe> 内联框架

<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>

用于嵌入外部网页到当前页面，src 定义嵌入网页的 URL，width 和 height 定义框架的宽高。

<!--插入窗口-->
    <br>
    <a href="https://www.bilibili.com/" target="aa">点击跳转bilibil</a>
    <iframe src="http://cloud.tencent.com/act/campus" name="aa" frameborder="0" width="1000px"height="600px"> </iframe>
    <!--在herf里面用target时候，可以让target==窗口名name，然后打开对应的窗口-->

四、基本标签--用于收集用户信息

表单标签
- `<form>`: 定义表单
- `<input type="text">`: 单行文本框
- `<input type="password">`: 密码框
- `<input type="number" min="10" max="100" value="50" step="2">`: 数字选择框
- `<input type="radio" name="sex">`: 单选框
- `<input type="checkbox">`: 多选框
- `<input type="file">`: 文件选择器
- `<input type="color">`: 颜色拾取器
- `<input type="date">`: 日期选择器
- `<input type="datetime-local">`: 日期时间选择器
- `<input type="week">`: 周选择器
- `<input type="range" min="0" max="100" value="10">`: 滑块

- `<select>`: 下拉框
- `<option value="">`: 下拉选项
- `<textarea cols="40" rows="5"></textarea>`: 多行文本框
- `<input type="button" value="普通按钮">`: 普通按钮
- `<input type="submit" value="提交按钮">`: 提交按钮
- `<input type="reset" value="重置按钮">`: 重置按钮

媒体标签
- `<audio src="路径" controls></audio>`: 音频标签
- `<video src="路径" controls width="500px"></video>`: 视频标签

        属性说明
        - `controls`: 显示播放控制
         `autoplay`: 自动播放
                -`loop`: 循环播放

 <!-- 收集用户信息的标签-->
<form>
     <input type="text">单行文本框<br><br>
     <input type="password">密码框<br><br>
     <input type="number"min="10"max="100"value="50"step="2">数字选择框<!--value表示刚进入页面显示的数字,step为步长-->
     <input type="radio" name="sex">男生
     <input type="radio"name="sex">女生  <!--单选框，name为属性-->
     <input type="checkbox">篮球
     <input type="checkbox">足球
     <input type="checkbox">羽毛球<!--多选框 不用Name属性-->
     <input type="file">文件选择器<br><br>
     <input type="color">颜色拾取器<br><br>
     <input type="date">日期选择器<br><br>
     <input type="datetime-local">日期时间选择器<br><br>
     <input type="week">周选择器<br><br>
     <input type="range" min="0" max="100"value="10">滑块<br><!--value表示当前值-->
     <!--下拉框-->
     <select >
       <option value="">数学</option>
       <option value="">语文</option>
       <option value="">英语</option>
     </select>下拉框<br><br>
     <textarea cols="40" row="5"></textarea>多行文本（超过40行5列时出下滚动条）
     <input type="button" value="普通按钮">
     <input type="submit" value="提交按钮">
     <input type="reset" value="重置按钮"><!--要想button起作用需要将前面的组件放到form表单中-->
</form>
       <!--音频标签mp3、mp4的-->
       <audio src="material/眼泪的错觉.mp3"controls></audio> <!--controls表示手动控制播放-->
       <audio src="路径信息"autoplay></audio><!--自动播放进入就播放，页面没有组件当做背景音乐-->
       <audio src="***" loop></audio><!--loop表示循环播放-->

              <br>
        <!--视频标签mp3、mp4的-->
        <!--g高和宽只代表窗口大小，不会改变原视频大小-->
        <video src="material/大山森林航拍_爱给网_aigei_com.mp4"controls width="500px" ></audio> <!--controls表示手动控制播放-->
        <video src="路径信息"autoplay></audio><!--自动播放进入就播放，页面没有组件当做背景音乐-->
        <video src="***" loop></audio><!--loop表示循环播放-->

【html其实就是一些标签的组合，比较简单，用vscode的快捷键写代码效率真的嘎嘎高】