HTML基础学习

最新推荐文章于 2024-08-28 11:05:48 发布

鞋子不会飞

最新推荐文章于 2024-08-28 11:05:48 发布

阅读量808

点赞数

分类专栏： # html

本文链接：https://blog.csdn.net/weixin_45651336/article/details/105280034

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.html 的介绍

在这里插入图片描述

2.vscode 的基本使用

vscode是前端开发使用最多的一款软件

vscode
Visual Studio Code 是微软推出的跨平台编辑器

hbuilder
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE

webstorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具

sublime
Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,是一个代码编辑器

pycharm
PyCharm是由JetBrains打造的一款Python IDE

1 vscode 的基本介绍

全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。

2 vscode 的安装

下载网址: https://code.visualstudio.com/Download
选择对应的安装包进行下载:
根据下载的安装包双击进行安装即可，当然为了更好的使用 vscode 还可以安装对应的插件。

3 vscode 的插件安装

插件名	说明
Chinese (Simplified) Language Pack for VS Code	中文(简体)汉化包
open in browser	右击在浏览器打开html

1 汉化插件安装

在这里插入图片描述

注意: 安装完插件以后请重启软件

2 浏览器运行插件安装

 注意

在最新window版本下不需要安装open in browser插件,在linux版本下需要安装

安装完open in browser后需要配置默认浏览器

安装完插件以后请重启软件

3 设置默认浏览器

在这里插入图片描述

4. vscode 的插件卸载

点击对应安装的插件，然后再点击卸载按钮即可。
在这里插入图片描述

5. vscode 的使用

打开文件夹创建文件

在这里插入图片描述

快速创建html文档的基本结构(vscode中使用:!+tab)

在这里插入图片描述

右击在浏览器打开html文档

6. 设置字体大小

在这里插入图片描述

1. 设置颜色主题

3.html 的基本结构

HTML基本结构,可以理解html的标准模板

在这里插入图片描述

1 源码

<!DOCTYPE html>  <!--html的文档声明,声明当前html文档的版本-->
<html>           <!--根标签: html开始标签 -->
    <head>       <!--html标签中的第一个子标签: head开始标签-->
        <meta charset="UTF-8">    <!--单个标签meta: 主要用于当前文档设置, 这里设置的是文档的编码格式 utf-8-->
        <title>网页标题</title>   <!--title标签: 主要用于设置当前文档标题-->
    </head>      <!--html标签中的第一个子标签: head结束标签-->
    <body>       <!--html标签中的第二个子标签: body开始标签-->
        网页内容
    </body>      <!--html标签中的第二个子标签: body结束标签-->
</html>          <!--根标签: html结束标签 -->

vscode中html语言注释的快捷键:

快捷键: ctrl + / 取消注释: ctrl + /

在这里插入图片描述

html结构扩展

<!DOCTYPE html>  <!--html的文档声明,声明当前html文档的版本-->
<html>           <!--根标签: html开始标签 -->
    <head>       <!--html标签中的第一个子标签: head开始标签-->
        <!--单个标签meta: 主要用于当前文档设置, 这里设置的是文档的编码格式 utf-8-->
        <meta charset="UTF-8">   
        <!--单个标签meta: 这个叫视口,移动端内容进行自动适配-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--单个标签meta: 如果是ie浏览器,让 IE 以最高版本显示网页-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>网页标题</title>   <!--title标签: 主要用于设置当前文档标题-->
    </head>      <!--html标签中的第一个子标签: head结束标签-->
    <body>       <!--html标签中的第二个子标签: body开始标签-->
        网页内容
    </body>      <!--html标签中的第二个子标签: body结束标签-->
</html>          <!--根标签: html结束标签 -->


-----------------------------------------
说明
第七行:移动端内容进行自动适配

第九行:如果是ie浏览器,让 IE 以最高版本显示网页

4.html 单双标签介绍

标签根据书写形式分类单标签与双标签

在html语言中, 用尖括号括起来的部分, 我们称为标签.

1.标签的分类

根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)

html标签

<!DOCTYPE html>  <!--html的文档声明,声明当前html文档的版本-->
<html>           <!--根标签: html开始标签 -->
    <head>       <!--html标签中的第一个子标签: head开始标签-->
        <meta charset="UTF-8">    <!--单个标签meta: 主要用于当前文档设置, 这里设置的是文档的编码格式 utf-8-->
        <title>网页标题</title>   <!--title标签: 主要用于设置当前文档标题-->
    </head>      <!--html标签中的第一个子标签: head结束标签-->
    <body>       <!--html标签中的第二个子标签: body开始标签-->
        网页内容
    </body>      <!--html标签中的第二个子标签: body结束标签-->
</html>          <!--根标签: html结束标签 -->

1. <html> <head> <body> <title> 这样的标签是成对的
2. <meta> 这样的标签是单个的
3. 标签是可以嵌套的: 例如 上面的代码中 html 标签, 嵌套了 head 标签和 body 标签.
4. 单标签与双标签区别,单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

5.常用的html标签

常用的html标签按照显示可以分为块元素与内联元素

注意: 在前端中, 元素指的就是标签, 所以我们有时候说: xx元素, 即指的是 xx标签

标签按照显示的不同, 可以分为两类:

块元素 ( 行元素 )
内联元素 ( 行内元素 )

1 块元素

单个块元素在浏览器中默认独占一行块元素可以设置宽高等属性.

1.1 块元素之标题标签

表示文档的标题

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


---
标题标签总共六级h1~h6

在这里插入图片描述

1.2 块元素之段落标签:

表示文档中的一个文字段落

<p>
    北京第三区交通委提醒您：
</p>
<p> 
    道路千万条，安全第一条！
    行车不规范，亲人两行泪。
</p>

---
段落标签中如果想要强制换行,需要使用<br>标签, 这个标签是个单个标签,所以只有一个.

在这里插入图片描述

1.3. 块元素之通用块容器标签:

表示文档中一块内容

<div>
    北京第三区交通委提醒您：
</div>
<div> 
    道路千万条，安全第一条！
    行车不规范，亲人两行泪。
</div>

---
你可以把div理解成一个容器,他的作用就是用来存放其他的东西,配合css一起使用

在这里插入图片描述

2 内联元素

多个内联元素可以在一行显示内联元素一般不能设置宽高

2.1. 内联元素之图片标签

在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置

<!-- img标签用来显示图片,alt属性是当图片显示失败时显示对应文字内容 -->
<img src="images/logo.png" alt="黑马程序员">

-------
1 src属性主要是添加要展示的图片地址
2 alt属性的作用:
		图片加载失败时, 显示的提示信息
		搜索引擎在收录图片时, 根据这个属性值来收录图片
		制作无障碍网页, 方便盲人的读屏软件读取.

在这里插入图片描述

2.2. 内联元素之超链接标签

链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线

<!-- 超链接设置 -->
<a href="#">默认链接</a>
<a href="01.html">第一个网页</a>
<a href="http://www.itcast.com">itcast</a>
<a href="http://www.itcast.com"><img src="images/logo.png" alt=""> </a>

<!-- 这个会在新窗口打开内容 -->
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>


------------------
1 a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:

2 不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可

3 如果想要跳转到当前页面的最上方时, 可以使用 #

4 a 标签有 target 属性

	如果不设置该属性, 在当前页面打开新页面
	如果设置该属性, 则会在新窗口中打开新页面

在这里插入图片描述

2.3. 内联元素之通用内联容器标签

我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式

公历12月25日是<span style="color:red">圣诞节</span>

在这里插入图片描述

3 特殊的一些标签

空格: 在html中, 空格一般会用: &nbsp;表示

回车: 在html中回车换行一般用<br>表示

小于号( < ): 在html中一般用&lt;表示

大于号( > ): 在html中一般用&gt;表示

1 块元素与内联元素的区别:
	常用块元素:<h1>,<p>,<div>
	常用内联元素:<img>,<a><span>
2 块元素独占一行,可以设置宽高,内联元素一行可以放多个,不能设置宽高

6.资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，同一张图片路径可以写两种不同的形式,比如:

<!-- 相对路径 -->
<img src="images/logo.png">
<!-- 绝对路径 -->
<img src="/home/python/projects/images/logo.png">

---
这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

6.1. 相对路径

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">
<!-- 相对路径方式3 -->
<img src="../images/logo.png">

6.2. 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

---
一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

7.列表标签

需要以列表展示内容的时候可以使用列表标签在这里插入图片描述

7.1. 列表标签的种类

无序列表标签(ul标签)
有序列表标签(ol标签)

7.2. 无序列表

<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

在这里插入图片描述

7.3. 有序列表

<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>

在这里插入图片描述

8.表格元素及相关样式

可以使用表格相关标签在网页创建表格内容
在这里插入图片描述

常用标签
1、<table>标签

 说明

table声明一个表格

2、<tr>标签

 说明

tr定义表格中的行

3、<td>和<th>标签

 说明

td代表列，th表示列中的标题部分(加粗)

常用的属性

	colspan 设置单元格水平合并，设置值是数值
	rowspan 设置单元格垂直合并，设置值是数值
	border='1' 可以设置table的边框大小
注意
width 设置表格宽度
height 设置表格高度
一般边框,颜色,宽高的样式属性都是由css控制,不推荐直接使用

规则表格

<!-- table表格标签,border设置边框宽度 -->
<table border="1px">
    <!-- tr表格内的行标签 -->
    <tr>
        <!-- th表示表格中的表头 -->
        <th>标题一</th>
        <th>标题二</th>
        <th>标题三</th>
        <th>标题四</th>
    </tr>
    <tr>
        <!-- td表示表格中的列 -->
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

在这里插入图片描述

非规则表格

<!--这是一个表格-->
<!-- 注:这里的宽高设置为了展示效果,以后直接在样式中设置 -->
<table border="3px" width='300px' height='200px'>

    <!--tr表示行-->
    <!--td表示列-->
    <!--colspan表示”并列“-->
    <!--rowspan表示"并行"-->

    <tr>
        <!-- 第一列与第二列合并 -->
        <th colspan="2">1.1</th>
        <th>1.2</th>
    </tr>
    <tr>
        <!-- 第二行与第三行合并 -->
        <th rowspan="2">2.1</th>
        <th>2.2</th>
        <th>2.3</th>
    </tr>
    <tr>
        <th>3.1</th>
        <th>3.2</th>
    </tr>

</table>

在这里插入图片描述

1 表格标签:
	<table>声明一个表格
	<tr>定义表格中的行
	td代表列
	th表示列中的标题部分(加粗)
	
2 表格常用属性:
	colspan 设置单元格水平合并，设置值是数值
	rowspan 设置单元格垂直合并，设置值是数值
	border='1' 可以设置table的边框大小

9.表单提交

如何把网页上的数据提交给服务器,这里就需要使用表单提交技术,常见的场景如用户登陆,用户注册等

在这里插入图片描述

9.1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。

9.2. 表单基本标签

1 <form> 标签 表示表单标签，定义整体的表单区域
	action属性 设置表单数据提交地址
	method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
	
2 <label>标签 表示表单元素的文字标注标签，定义文字标注

3 <input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式,取决于 type 属性。
	type属性
	type="text" 定义单行文本输入框
	type="submit" 定义提交按钮

9.3. 表单元素属性设置

name属性 设置表单元素的名称，该名称是提交数据时的参数名,提交表单字段必须有name属性
value属性 设置表单元素的值，该值是提交数据时参数名所对应的参数值

9.4. 表单代码

<!-- 提交表单使用使用form包裹 -->
<!-- action提交表单的地址 -->
<form action="https://127.0.0.1:8080/post_info.html" method="GET">
    <p>
        <!-- 用户名输入框 -->
        <label>姓名：</label><input type="text" name="username" />
    </p>
    <p>
        <!-- 提交表单的按钮 -->
        <input type="submit" name="" value="提交">
    </p>
</form>

在这里插入图片描述

1 表单标签的作用就是可以把用户输入数据一起提交到web服务器。
2 表单基本标签
	<form> 标签 表示表单标签，定义整体的表单区域
	<label>标签 表示表单元素的文字标注标签，定义文字标注
	<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式,取决于 type 属性。
3 表单属性设置
	action: 是设置表单数据提交地址
	method: 是表单提交方式，提交方式有GET和POST
4 表单元素属性设置
	name: 表单元素的名称，用于作为提交表单数据时的 参数名
	value: 表单元素的值，用于作为提交表单数据时参数名所对应的 参数值

10.表单标签

学习常用的表单标签,学完以后可以完成一个用户注册的表单

在这里插入图片描述

10.1. 表单相关标签的使用

1 <form>标签 表示表单标签，定义整体的表单区域

2 <label>标签 表示表单元素的文字标注标签，定义文字标注

3 <input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
	type属性
		type="text" 定义单行文本输入框
		type="password" 定义密码输入框
		type="radio" 定义单选框
		type="checkbox" 定义复选框
		type="file" 定义上传文件
		type="submit" 定义提交按钮
		type="reset" 定义重置按钮
		type="button" 定义一个普通按钮
4 <textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框

5 <select>标签 表示表单元素的下拉列表标签 定义下拉列表

	<option>标签 与<select>标签配合，定义下拉列表中的选项

注意
	表单提交信息时候必须指定提交的参数名即设置标签中需要设置name属性

10.2. 表单相关标签的使用

<form>
    <p>
        <!-- 用户名:使用text类型,说明是文本-->
        <label>姓名：</label>
        <input type="text" name="user">
    </p>
    <p>
        <!-- 用户名:使用password类型,文本输入会隐藏 -->
        <label>密码：</label>
        <input type="password" name="pwd">
    </p>
    <p>
        <!-- 姓别:使用radio类型,可以进行单选,注意name必须一致 -->
        <label>性别：</label>
        <input type="radio" name='sex'> 男
        <input type="radio" name='sex'> 女
    </p>
    <p>
        <!-- 爱好:使用checkbox类型,可以进行复选,注意必须指向name值 -->
        <label>爱好：</label>
        <input type="checkbox" name="song"> 唱歌
        <input type="checkbox" name="run"> 跑步
        <input type="checkbox" name="dance"> 跳舞
    </p>
    <p>
        <!-- 照片:使用file类型 -->
        <label>照片：</label>
        <input type="file" name="photo">
    </p>
    <p>
        <!-- 个人描述:使用textarea标签 -->
        <label>个人描述：</label>
        <textarea name="desc"></textarea>
    </p>
    <p>
        <!-- 籍贯:使用select与option标签,注意select必须指向name值,option中必须指向name值 -->
        <label>籍贯：</label>
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
    </p>
    <p>
        <!-- 提交:使用submit类型,form表单提交必须使用submit按钮 -->
        <input type="submit" value="提交">
        <!-- 重置:使用reset类型,可以把表单内容清空 -->
        <input type="reset" value="重置">
    </p>
</form>

在这里插入图片描述

1 表单标签是<form>标签
2 常用的表单元素标签有: <label>、<input>、 <textarea>、<select> 等标签
3 <input>标签常用的type属性
	type="text" 定义单行文本输入框
	type="password" 定义密码输入框
	type="radio" 定义单选框
	type="checkbox" 定义复选框
	type="file" 定义上传文件
	type="submit" 定义提交按钮
	type="reset" 定义重置按钮
	type="button" 定义一个普通按钮