526互联

HTML基础入门学习

发布时间 2023-12-22 20:30:19作者: jack122

基本框架：

HTML（Hypertext Markup Language）是一种用于创建网页结构的标记语言。下面是一个简单的HTML文档的基本结构和写法：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My First HTML Page</title>
 </head>
 <body>
     <h1>Hello, World!</h1>
 </body>
 </html>

让我们解释一下这个例子的各个部分：

  1. <!DOCTYPE html>：声明文档类型和版本，表示使用HTML5。

  2. <html>：HTML文档的根元素。

  3. lang="en"：指定文档的语言，这里是英语。

  4. <head>：包含关于文档的元信息，如字符集、视口设置和页面标题。

  5. <meta charset="UTF-8">：指定文档使用的字符集，这里是UTF-8。

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置移动设备的视口，以确保页面在各种设备上正确显示。

  7. <title>：定义文档的标题，显示在浏览器标签页上。

  8. <body>：包含页面的实际内容，如文本、图像、链接等。

  9. <h1>：定义一个一级标题。

注释：

<!-- 中间内容是注释 -->

VSCode中 注释的添加或删除 ctrl+/

标签：

HTML中有单标签和双标签两种，格式如下：

<hr>

 <strong> 中间是内容 </strong>

单标签是少数，双标签时候注意结尾的<>中有/

接下来我们开始标签的学习，首先是标题标签：

二、标题标签：

标题标签主要是h系列：

h1到h6 依次变小

接下来演示一下：

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

 

三、段落标签

代码：<p> 文字 </p>

 <h1>Hello World</h1>
     <p>葡萄美酒夜光杯，欲饮琵琶马上催。</p>
     <p>醉卧沙场君莫笑，古来征战几人回。</p>

 

四、换行标签：

单标签

 <h1>Hello World</h1>
     <p>葡萄美酒夜光杯，<br> 欲饮琵琶马上催。<br> 醉卧沙场君莫笑，<br> 古来征战几人回。</p>

 

五、水平线标签

​
​

六、文本格式化标签：

标签说明
b 加粗
u 下划线
i 倾斜
s 删除线
strong 
ins  
em  
del  

代码演示：

 <body>
 <b>醉卧沙场君莫笑，古来征战几人回。</b>
 <strong>醉卧沙场君莫笑，古来征战几人回。</strong>
 </body>

 

七、图片标签：

代码格式：<img src = “" alt="" Title="" width = “" height="">

src = “” : 标签属性

alt:当图片不显示的时候才开始显示alt中写的内容

Title:把鼠标悬停时候可以显示自定义的文本 注：Title属性不仅可以用在图片 其他也可以

width和height: 属性值:宽度和高度(数字) 注意点: 如果只设置width或height中的一个没设置的会自动等比例缩放(此时图片不会变形)如果同时设置了width和height两个，若设置不当此时图片可能会变形

八、绝对路径和相对路径

例如:寄快递

一般常用相对路径，把图片文件放在工作文件中，不会出现换设备无法查看的情况

相对路径分类：

1.同级别写法：<img src = “目标图片" >

或<img src = “./目标图片" >

2.下级路径写法：(html文件不与图片文件在同一级别 图片放在一个文件 html文件单独放)

<img src = “目标文件夹/目标图片" >

3.上级路径写法：(html文件在一个文件夹中，而图片单独放在外面)

<img src = “..目标文件夹/目标图片" >

九、音频标签：

代码格式：<audio src="目标文件" controls></audio>

src: 音频路径

controls:显示播放控件

autoplay:自动播放(部分浏览器不支持(其实大多数都不支持，包括Google))

loop:循环播放

 <body>
 <audio src="../music/把回忆pinhaohuain.mp3"></audio>
 </body>

当你这么写完，你会发现，什么都不会发生，你需要添加controls，才能显示控件

 <body>
 <audio src="../music/把回忆pinhaohuain.mp3" controls></audio>
 </body>

 

十、视频标签：

代码格式：<video src= “目标文件" controls> </video>

可以配合muted实现静音播放

十一、链接标签：

代码格式：

<a href="目标网页.html">超链接的名称</a>

href:后写跳转地址

当开发网站初期，我们还不知道跳转地址的时候，href的值书写# (空链接)

target属性：

_self 默认值，在当前窗口中跳转(覆盖原网页)

_blank 在新窗口跳转(保留原网页)

<body>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<body>

十二、列表标签：

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

一、无序列表

标签组成：

标签名说明
ul 表示无序列表整体，用于包裹li标签
li 表示无序元素的每一项，用于包含每一行的内容

ul标签中只允许包含li标签

li标签可以包含任意内容

代码演示：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

二、有序列表

标签名说明
ol 表示有序列表整体，用于包裹li标签
li 表示有序元素的每一项，用于包含每一行的内容

三、自定义列表：

标签名说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容

十三、表格标签：

标签名说明
table 表格整体，用于包裹多个tr
tr 表格每行，用于包裹td
td 表格单元格，用于包裹内容

当你写完之后，它将不会以表格形式出现，若要以表格形式出现，请添加属性，以下是一些属性:

属性名说明
border 边框宽度
width 表格宽度
height 表格高度

 

十四、表单标签：

一、input系列：

类型描述基本示例
button 没有默认行为的按钮，上面显示 value 属性的值，默认为空。 Play
checkbox 复选框，可将其值设为选中或未选中。 Play
color 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 Play
date 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 Play
datetime-local 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 Play
email 编辑邮箱地址的字段。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘。 Play
file 让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。 Play
hidden 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。 Play
image 图形化 submit 按钮。显示的图像由 src 属性决定。如果 src 属性缺失，就会显示 alt 的内容。 Play
month 输入年和月的控件，没有时区。 Play
number 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。 Play
password 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。 Play
radio 单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。 Play
range 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定可接受值的范围。 Play
reset 此按钮将表单的所有内容重置为默认值。不推荐使用该类型。 Play
search 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 Play
submit 用于提交表单的按钮。 Play
tel 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 Play
text 默认值。单行的文本字段，输入值中的换行会被自动去除。 Play
time 用于输入时间的控件，不包括时区。 Play
url 用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。 Play
week 用于输入以年和周数组成的日期，不带时区。 Play
废弃的值    
datetime 已弃用 用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。 Play

代码演示：

 

input标签的属性要在一个form表单内才能用

二、button按钮标签

 

 

三、select下拉菜单

标签组成：

select标签：下拉菜单的整体

option标签：下拉菜单的每一项(默认选中第一项，可通过selected改变)

<body>
    <select> 
        <option> 1 </option>
        <option> 2 </option>
        <option selected> 3 </option>
    </select>
</body>

四、textarea文本域标签：

常用属性

1.cols：规定了文本域内可见宽度

2.rows：规定了文本域内可见行数

<textarea cols="60"></textarea>

五、label标签：

用于绑定内容与表单标签的关系

方法一：

1.使用label标签把内容(如: 文本)包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

演示：

<body>
   <input type="radio" name="sex" id="1"> <label for="1"> 男 </label>
   <input type="radio" name="sex" id="0"> <label for="0"> 女 </label>
</body>

 

这段代码可以实现 ：点击“男” ”女“ 这两个字就可以点击按钮

方法二：(推荐)

1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

<body>
    <label> <input type="radio" name="gender" id="1"> 男 </label>
    <label> <input type="radio" name="gender" id="1"> 女 </label>
</body>

实测，把id删除也可

十五、语义标签：

无语义标签：

div、span 做网页布局可以使用到，以下是演示：

<body>
    <div>div特性1</div>
    <div>div特性2</div>

    <span>span特性1</span>
    <span>span特性2</span>
</body>