HTML介绍

hyy2795227684

于 2023-03-31 14:10:34 发布

阅读量61

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/hyy2795227684/article/details/129876723

版权

1. 开发工具的使用

创建一个工程

我们在 d 盘下创建一个 demo 的目录，然后使用 VSCode 来打开这个目录，打开后，点击下图所示的图标来创建一个first.html 文件然后在右边的窗口中输入英文的感叹号后回车（或者按 tab 键）来生成 HTML 默认结构。如果使用的是 webstorm ，则需要点击 New Project 按钮来创建一个新的工程,输入项目名称和路径后，点击下面的 create 按钮来创建。

2. 常用标签

2.1 <p> 标签 <p> 标签叫段落标签，一对 p 标签要占一行，多个 p 标签之间有换行。

2.2 <br>标签 <br> 标签用于换行，它是一个独立的标签，不需要闭合。

2.3 <hr>标签 <hr> 标签也是一个独立的标签，它是在页面中画一条水平实线。

2.4 <pre>标签 这个标签叫预打印标签，使用它可以显示出我们在 html 页面中书写的原样格式。

2.5 <div>标签 它是一个窗口标签，一般用于在页面中存放另外的标签。

2.6 <span>标签 这是一个行内标签，一般用于定义一些不需要宽度和高度的内容。

2.7 <img>标签 这个标签用于在页面中显示图片。为了演示这个效果，我们在当前的项目中添加一个目录用于存放图片，这个目录名称一般取名为 images

img 标签的属性介绍：

src ：用于指定图片的路径，路径分两种：

相对路径：以当前文件所在的路径为参考

绝对路径：在 window 中以是盘符开头的路径，在 linux 中是以 / 开头路径，在网络是以

http: / 开头的路径。

alt ：用于指定当图片不能正常显示时的一个提示信息

width ：指定图片显示宽度

height ：指定图片显示高度

title ：用于当鼠标移到图片上时显示的提示信息，一般用于搜索引擎优化

border ：指定图片边框粗细

align ：指定图片对齐方式，有以下两个值：

left ：左对齐，默认值

right ：右对齐

3链接标签

1.<a> 这个标签的作用是用于给文字或图片做链接的 .

示例：

<!DOCTYPE html>

<head>

<title> Title </title>

</head>

<body>

</body>

</html>

对于这个标签来说，它用于做超链接时，还可以指定以下属性：

href ：用于指定链接的路径，可以是相对路径，也可以是绝对路径

target ：用于指定打开的方式，有以下几个值：

_self ：当前窗口打开，即要打开的页面替换当前窗口，它是默认值

_blank ：在新的标签页中打开指定的页面

_parent ：它需要用到 iframe 模式中才效

_top ：它需要用到 iframe 模式中才效

除了可以做链接以外，还可以使用这个标签来做描点，要做描点需要有以下步骤：

1. 定义描点

2. 使用描点

多媒体标签

这种多媒体标签有两种：一种是播放视频的，另一种是播放音乐的。

播放视频

使用 video 标签来播放视频，支持格式有： mp4,avi

<!DOCTYPE html>

<head>

<title> 视频播放标签 </title>

</head>

<body>

<video src = "media/video.mp4" autoplay controls loop

></video>

</body>

</html>

通过 video 标签来指定要播放的视频，然后通过 src 属性来指定视频的地址，可以是相对路径，也可以是

绝对路径。

这个标签还可以使用 autoplay 属性来指定自动播放。通过 controls 属性来指定控制按钮。

播放音乐

使用 audio 标签来播放音乐，不同浏览支持的格式不一样。

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

列表标签

如果希望把有些内容以列表的方式来进行呈现，此时就可以使用列表标签。在 HTML 中，列表标签有以

下几种：

无序列表

有序列表

标题列表

无序列表

无序列表使用 ul 标签来定义，每一个列表顶使用一个 li 标签来定义。例如：

<!DOCTYPE html>

<head>

<title> 无序标签的使用 </title>

</head>

<body>

</ul>

</body>

</html>

对于无序标签，每一个具体项前面会有一个小圆点，我们可以使用 type 属性来修改，它有以下几个值：

circle ：以空心小圆圈的形式显示

square ：以小正方形黑色块显示

disc ：以实心的小圆点显示，它是默认值

这个标签一般用于定义菜单，或者定义列表图片。

有序标签

有序标签就是可以在每一项之前有一个序号，使用 ol 标签来定义，每一个具体的项还是使用 li 标签来定

义。

例如：

<!DOCTYPE html>

<head>

<title> 有序列表标签的使用 </title>

</head>

<body>

<ol>

</ol>

</body>

</html>

带标题的列表

这种列表使用 dl 标签来定义，然后通过 dt 标签定义标题，再通过 dd 标签来定义内容。

例如：

<!DOCTYPE html>

<head>

<title> 带标题的列表标签的使用 </title>

</head>

<body>

<dl>

<dt> 四个直辖市 </dt>

<dd>

<dl>

</dl>

</dd>

</dl>

</body>

</html>

表格标签

表格标签用于数据展示的，它涉及到 table 、 tr 、 td 、 th 等子标签。

要定义一个表格，我们需要使用 table 标签，如果要定义一行，我们还需要使用 tr 子标签，

要在一行中定义单元格，就需要使用到 td 子标签。

例如：定义一个三行三列的表格。

<!DOCTYPE html>

<head>

<title> 表格标签的使用 </title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tr>

</tr>

</tr>

</tbody>

<tfoot>

</tfoot>

</table>

</body>

</html>

table 标签有以下几种属性：

width ：用于指定表格的宽度，单位是像素

border ：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗

cellpadding ：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离

cellspecing ：用于定义单元格的外边距，即单元格与单元格之间的距离

align ：用于定义表格的对齐方式

table 还在以下几个子标签：

caption ：用于定义表格的标题

thead ：用于定义表头部分

tbody ：用于定义表体部分

tfoot ：用于定义表尾部分

tr ：用于定义表格的一行

th ：用于定义一个单元格，它的特点是内容加粗且居中显示

td ：用于定义一个单元格

td 标签有几个属性需要说明：

colspan ：用于定义跨列操作，也就是合并多个列

rowspan ：用于定义跨行操作，也就是合并多个行

文字加粗标签

可以使用 strong 标签来对文字进行加粗操作。例如：

<div><strong> 这是加粗后的文字效果 </strong></div>

标题标签

在 HTML 中，标题标签一共有 6 个，分别是 h1 ~ h6，大小逐级递减。例如：

表单标签的使用

在一个 web 项目中，和用户之间进行交互操作是必不可少的，这时就需要使用到表单来让用户和服务器之间进行交互。因此，表单是一个非常重要的元素。但在表单中，包括的子标签非常多，大体上可分为以下几种：

文本输入框

文本输入域

单选框

多选框

下拉列表

文件上传

提交按钮

重置按钮

form 标签

form 标签是用于指定表单数据的提交方式和地址。它有以下几个属性：

name ：用于指定表单的名称，方便后续提交使用

id ：表单的唯一名称，一般用于提交或样式设置

action ：用于定义表单数据的提交地址

method ：用于指定表单数据的提交方式，有以下几个常用值

get ：以 get 方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数

据不能超过 4K 大小

post ：以 post 方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏

中显示，理论上这种方式提交没有大小的限制

put ：用于修改数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以

不用考虑

delete ：用于删除数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可

以不用考虑

enctype ：用于指定表单提交的数据类型，有以下两个值：

multipart/form-data ：以二进制流的方式进行提交，一般用于文件上传

application/x-www-form-urlencoded ：以文本的方式进行提交，常用方式，默认值

文本输入框

文本输入框是使用 input 标签来指定，根据它的 type 属性来指定是什么样的类型的输入框。

它的属性说明如下：

name ：用于表单提交是把数据提交到后端

id ：给这个输入框一个唯一值，一般是用于 JavaScript 来获取它时所使用

value ：它代表是这个输入框所输入的值

size ：用于指定这个输入框的长度，不推荐使用，后续会用 CSS 来控制

maxlength ：用于指定这个输入框所能输入值的最大的长度 placeholder ：用于指定在输入框中没有值是的提示信息，它是 H5 的属性

单选框

单选框也是使用 input 标签，但它的 type 属性的值为 radio ，它一般用于多个值中只能选择一个值的情况。如，姓别属性说明如下：

name ：给这个单选框指定一个组名，也是数据提交后后端能够获取数据的值，多个单选框如果

name 属性相同才会是同一个组。

value ：单选框的值

checked ：它是一个布尔值（真和假），如果值为值（ true ）即选中，值为假（ false ）则未选中

多选框

多选框也是使用 input 标签，但它的 type 属性的值为 checkbox ，一般用于多个选择的情况。

属性与单选框相同。

文本输入域

文本输入域是用于输入长文本的内容，使用 textarea 标签，它有以下几个属性：

name ：用于获取文本域的值

rows ：指定文本域的高度（行数）

cols ：指定文本域的宽度（列数）

下拉列表

下拉列表是用于选择使用的，它可以是单选的，也可以是多选的。使用 select 标签来指定，属性如下：

name ：用于获取下拉框的值

multiple ：指定是否可以多选，不重要，了解即可

size ：用于指定可看选项个数，不重要，了解即可

子标签是 option ，用于指定下拉选项，它的 value 属性用于指定这个选项的值

文件上传

文件上传还是使用 input 标签，但它的 type 属性为 file ，常用的属性也是 name 。

3. 选择器

3.1 基本选择器

基本选择器包括：标签选择器（根据标签的名称获取）、 ID 选择器（获取的是 ID 属性）、类选择器

（ class 属性）、通用选择器（通配符）

<!DOCTYPE html>

<html>

<head>

/*div{

color: red;

}*/

/*#one{

color: blue;

}*/

/*.two{

color: yellow;

}*/

color : green ;

}

</style>

</head>

<body>

这是第一个 div

</div>

<div >

这是第一个 div

</div>

</body>

</html>

注意： id 属性是唯一的， class 不唯一

思考：四种选择器的优先级？

ID > class > 标签 > 通配符

3.2 包含选择

子代选择器（获取的是某个标签的第一级子标签）

后代选择器（获取的某个标签里面所有的子标签）

分组选择（逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<!DOCTYPE html>

<html>

<head>

/* 子代选择器 */

div .list > ul {

border : 1px solid red ;

}

/* 后代选择器 */

.list li {

border : 1px solid blue ;

}

/* 逗号择器 */

.one , .two , #first {

color : green ;

width : 200px ;

height : 200px ;

background : pink ;

border : 1px solid black ;

}

</style>

</head>

<body>

<div class = "two" > 这是第二个 div </div>

<p id = "first" > 这是一个段落标签 </p>

<ul>

</ul>

</div>

</body>

</html>

3.3 属性选择器

<!DOCTYPE html>

<html>

<head>

/* 选择选中的额标签中存在的某个属性 */

div [ title ]{

border : 1px solid black ;

}

/* 确切的等于某个值 */

input [ type = "text" ]{

background : red ;

}

/* 属性值包含某个值 */

input [ type *= "e" ]{

background : blue ;

}

/* 属性值以某个值开头 */

input [ type ^= "e" ]{

background : green ;

}

/* 属性值以某个值结尾 */

input [ type $= "rl" ]{

background : red ;

}

/*+ 表示下一个标签 */

.msg + p {

border : 1px solid green ;

}

/* 属性等于某个属性值 */

[ title = " 这是一个标题 " ]{

color : red ;

}

</style>

</head>

<body>

这是一个 div 容器

</div>

<div title = " 这是一个标题 " > 这是第二个 div </div>

<hr>

<div class = "msg" > 我喜欢打游戏 </div>

<p id = "msg1" "> 这是一个段落 </p>

</body>

</html>

3.4 伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过 : 进行设置不同的样式（实现伪类选择器）

:link ------ 链接点击之前

:visited ----- 链接点击之后

:hover ------" 悬停 "

:active ------" 激活 " 鼠标点击的时候但是不松手

<!DOCTYPE html>

<html>

<head>

/* 点击之前的颜色 */

a : link {

color : red ;

}

/* 点击之后的颜色 */

a : visited {

color : green ;

}

/* 鼠标悬停的颜色 */

a : hover {

color : blue ;

}

/* 鼠标点击在上面但是不松手的时候 */

a : active {

color : pink ;

}

</style>

</head>

<body>

</body>

</html>

四种状态的顺序最好固定， link visited hover active

3.5 伪元素选择器

:before

:after ------ CSS2

::before

::after

注意：要使用伪元素选择器一定要加上 content 属性

<!DOCTYPE html>

<html>

<head>

p :: before {

content : " 张三 " ;

color : red ;

}

p :: after {

content : " 李四 " ;

color : green ;

}

</style>

</head>

<body>

<p> 这是一个段落 </p>

</body>

</html>

hyy2795227684

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML介绍

项目中，和用户之间进行交互操作是必不可少的，这时就需要使用到表单来让用户和服务器之间进行交互。为了演示这个效果，我们在当前的项目中添加一个目录用于存放图片，这个目。方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数。：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗。：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离。下拉列表是用于选择使用的，它可以是单选的，也可以是多选的。同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过。
复制链接

扫一扫