前端-HTML基础~

最新推荐文章于 2024-09-11 20:08:48 发布

阿强不吃香菜丶

最新推荐文章于 2024-09-11 20:08:48 发布

阅读量959

点赞数

分类专栏：前端文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_43239979/article/details/120241455

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、HTML

一、HTML

1：HTML(Hypertext Markup Language)

超文本标记语言，不需要编译，直接由浏览器执行，是一个文本文件，包含了一些html元素和标签，后缀必须为.html，由W3C维护

2：HTML发展史

html 2.0 (1995.11）
html 3.2 (1997.1.14)
html 4.0 (1999.12.18)
html 4.01(1999.12.24)
html 5 (2014.10.28)

3:HTML基本页面模板

<!-- 文档声明：让浏览器按照标准模式渲染页面-->
<!DOCTYPE>
<html>
    <head>
        <!-- 字符集编码的设置-->
        <meta charset="utf-8">
        <!-- 标题栏标题-->
        <title>Document</title>
    </head>
    <body>
        
    </body>
</html>

4:HTML标签总结

4.1主体结构标签

标签名	语义和功能	单标签还是双标签
html	根标签	双标签
head	头部信息	双标签
body	主体信息	双标签

4.2HEAD中的标签

标签名	语义和功能	属性	单标签还是双标签
meta	设置网页元信息	charset：指定字符集编码，建议utf-8	单标签
title	设置标题栏标题		双标签

4.3格式排版标签

标签名	语义和功能	单标签还是双标签
h1~h6	一级标题~六级标题	双标签
p	段落	双标签
hr	分割线	单标签
br	换行	单标签
div		双标签
pre	原格式显示	双标签

4.3 文本标签

标签名	语义和功能	单标签还是双标签
em	表示强调，默认变现为斜体字	双标签
strong	表示强调，默认表现为粗体字	双标签
del	表示删除的内容，默认表现为文字加删除线	双标签
ins	表示增加的内容，默认变现为文字加下划线	双标签
sub	表示下标字	双标签
sup	表示上标字	双标签

4.4 img标签

标签名	语义和功能	属性	单标签还是双标签
img	在页面中显示图片	src：指定图片地址。 alt：设置图片的替代文字。 width：设置图片的宽度。 height：设置图片的高度。	单标签

注意事项：

1.alt用于设置图片的替代文字，当图片无法正常显示的时候会显示替代文字
2.设置宽高的规则：
	如果只设置宽或高，另一个会根据图片比例自动计算。
	同时设置宽高，可能会导致图片变形。

2.2常见的图片格式

jpg/jpeg
png
gif

5 相对路径和绝对路径

当前文件：当前写代码的html文件

目标文件： 当前文件所引入的图片文件，音频文件，视频文件等。

如果目标文件与当前文件不在同一台计算机上：只能使用绝对路径。

如果目标文件与当前文件在同一台计算机上：绝对路径和相对路径都可以。

5.1 绝对路径

前端中用到绝对路径是文件在网络中的地址，也叫URL。

https://www.xxxxxx.com/xxxxxx/xxxx.html

5.2 相对路径

./表示当前目录，可以省略
./开始的路径表示目标文件在当前文件的同级或者下级

../表示上一级  ../../表示上两级  依次类推
../开头的路径表示目标文件在当前文件的上级或者通过访问上级才能找到

5.3 HTML中使用路径的场景

1. 使用 img 标签引入图片文件
2. 使用 video 标签引入视频文件
3. 使用 audio	标签引入音频文件
4. 使用 iframe 标签引入其他类型的文件
5. 使用 script 标签引入 js 文件
6. 使用 link 标签关联 css 文件
7. 使用 a 标签设置超链接地址
....

6 超链接和锚点

6.1 a 标签

标签名	语义和功能	属性	单标签还是双标签
a	设置超链接	href：设置目标文件地址 target:设置目标文件本窗口还是新窗口打开 name:设置锚点	双标签

总结：

1.只有设置href属性的a标签才是超链接！
2.target的属性的默认值是_self,表示本窗口打开目标文件；如果设置为_blank,目标文件将在新窗口打开
3.设置name属性的a标签，可以作为一个锚点

6.2 超链接

1 跳转新的页面

目标文件是html类型的文件，网页文件。

2 跳转到其他类型的文件

目标文件除了是hml类型文件，还可以是其他类型文件。图片，视频，pdf，markdown，word,压缩包类型文件

总结：

1.如果目标文件是浏览器能够打开的类型，点击超链接浏览器直接打开。
2.如果目标文件是浏览器是无法打开的类型，点击超链接下载

3 超链接的其他特殊功能

发送邮件，拨打电话，发送短信

4 href的值是空的

超链接href属性的值如果是空的，点击超链接会刷新页面。

6.3 锚点

1 如何设置锚点

第一种方式，使用a标签设置

在需要设置锚点的地方，添加a标签，使用name属性设置锚点名。

<a name="锚点名字"></a>

第二种方式任何标签都可以设置id属性

在需要设置锚点的地方，给标签设置属性id，id属性的值就是锚点名。注意：任何标签都可以设置id属性。

<div id="锚点名"></div>

2 如何跳转到锚点

跳转到锚点，需要使用超链接

<!--跳转到本页面的指定锚点-->
<a href="#锚点名"></a>

<!--跳转到本页面顶部-->
<a href="#"></a>

<!--跳转到其他页面的指定锚点（位置）-->
<a href="页面的路径#锚点名"></a>

7 列表

7.1 无序列表

<ul>
	<li></li>
</ul>

页面中的新闻列表，文章列表，商品列表，导航条等适合使用无序列表

7.2 有序列表

<ol>
    <li></li>
</ol>

页面中的热点新闻排行，音乐排行等排行榜的列表适合有序列表

7.3 定义列表（了解）

<!-- 每个列表项一个 dt 和一个 dd-->
<dl>
    <dt></dt>
    <dd></dd>
</dl>
<!--每个列表项 一个dt对应多个dd-->
<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

适合表示关键字名字和关键字名字的解释功能组成一个列表项

7.4 列表标签总结

标签名	功能和语义	单标签还是双标签
ul	无序列表	双标签
ol	有序列表	双标签
li	有序或无序列表的列表项	双标签
dl	定义列表	双标签
dt	定义列表项的标题	双标签
dd	定义列表项的描述	双标签

总结

li标签必须被直接包裹在 ul 或者 ol 中，li 上一层的标签必须是 ul 或 ol。

8 表格标签

8.1 表格的结构

<!--表格-->
<table>
    <!--表格标题-->
    <caption></caption>
    <!--表格头-->
    <thead>
        <!--表头行 table row-->
        <tr>
            <!--表头单元格 -->
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <!--表格主体-->
    <tbody>
        <!--普通行 table row-->
        <tr>
            <!--普通单元格-->
            <td></td>
            <td></td>
            <td></td>
        </tr>
        .....
        .....
        
    </tbody>
    <!--表格脚-->
    <tfoot></tfoot>
</table>

table			
	caption		表格标题
	thead		表格头
		tr		行
			th	表头单元格
			...
		...
	tbody		表格主体
		tr		行
			td	普通单元格
			...
		...
	tfoot		表格脚
		tr		行
			td	普通单元格
			...
		...

8.2 表格整体样式设置

给table标签设置如下属性

width			设置表格的宽度
height			设置表格的高度
border			设置表格边框的宽度
cellspacing		设置单元格之间的距离
cellpadding		设置单元格边框与内容的距离

8.3 单元格样式设置

1 设置单元格内容对齐方式

设置单元格内容水平对齐方式：

thead,tbody,tfoot:设置align值：left，right，center，所有包裹的单元格都会生效

tr:设置align值:left,right,center,所有包裹的单元格都会生效

th,td:设置属性align值，left，right，center，该单元格会生效

设置单元格内容垂直对齐方式：

thead,tbody,tfoot:设置valign值：top，bottom，middle，所有包裹的单元格都会生效

tr:设置valign值:top，bottom，middle，所有包裹的单元格都会生效

th,td:设置属性valign值，ltop，bottom，middle，该单元格会生效

2 设置单元格宽高

设置单元格宽度：

给td，th设置属性width，同列的单元格（其他对应的单元格）都会生效。

设置单元格高度：

给td，th设置属性height，同行的单元格都会生效。
给tr设置属性height，该行内所有单元格生效。

8.4 单元格跨行和跨列

td，th设置属性rowspan，colspan实现单元格跨行，跨列：

rowspan		设置要跨越的行数		
colspan		设置要跨越的列数

8.5 表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格	width：设置表格宽度。 height：设置表格高度。 border：设置边框宽度。 cellspacing：设置单元格间距。 cellpadding：设置单元格内边距。	双标签
caption	表格标题		双标签
thead	表格头	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。	双标签
tbody	表格主体	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。	双标签
tfoot	表格脚	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。	双标签
tr	行	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。 height：设置本行高度。	双标签
td	单元格	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。 width：设置单元格宽度。 height：设置单元格高度。 rowspan：设置跨越的行数。 colspan：设置跨越的列数。	双标签
th	表头单元格	align：设置所包含的单元格内容的水平对齐方式。 valign：设置所包含的单元格内容的垂直对齐方式。 width：设置单元格宽度。 height：设置单元格高度。 rowspan：设置跨越的行数。 colspan：设置跨越的列数。	双标签

总结：

1. 单元格跨行，无法跨越 thead、tbody、tfoot；要跨的行必须在同一个thead、tbody、tfoot
2. 如果 table 直接包裹 tr（省略 thead、tbody、tfoot），浏览器会自动添加 tbody

9 表单

9.1 表单总体设置

<form action="http://www.xxxxx/x" target="_balnk">
    <!--输入框-->
    <input type="text" name="wd">
    <!--按钮-->
    <button>
        
    </button>
</form>

9.2 表单控件

1 文本输入框

<!--文本输入框，可设置maxlegth限制最大输入长度（字符数）-->
<input type="text" maxlength="x">

2 密码输入框

<!--密码输入框，可设置maxlegth限制最大输入长度（字符数）-->
<input type="password" maxlength="x">

3 单选框

<input type="radio" name="xxx">A
<input type="radio" name="xxx">B
<input type="radio" name="xxx" checked>C

给单选框设置checked属性可以使其默认选中，checked无需设置值。

实现单选效果，需设置相同name。

4 复选框

<input type="checkbox" name="xxx">A
<input type="checkbox" name="xxx">B
<input type="checkbox" name="xxx">C

给复选框设置checked属性可以默认选择，checked无需设置值

5 提交按钮

<!--提交按钮-->
<input type="submit" value="xxx">
<!--button 标签type属性默认值是submit-->
<button>
    
</button>

6 重置按钮

<input type="reset" value="">
<button type="reset">
    
</button>

7 普通按钮

<input type="button" value="">
<button type="button">
    
</button>

8 文本域

<!--用于输入多行文本，文本输入框只能输入单行文本
rows设置默认显示行数，影响文本域高度；cols默认一行显示多少字，影响文本域宽度
-->
<textarea rows="xx" cols="xx"></textarea>

9 下拉选项

<!--option 设置selected可以默认被选中-->
<select>>
    <option></option>
    <option></option>
    <option selected></option>
    <option></option>
</select>

9.3 表单控件的属性

1 name 属性

1.通过name属性设置对应表单控件名字，后端可根据name获取控件对应数据
2.按钮（提交，重置，普通）不设置name属性。
3.下拉选项select设置name属性，option不需要设置。
4.多个单选框元素要实现单选效果需要设置相同name。

2 value属性

1.文本输入框和密码输入框：value设置默认值。
2.单选框和复选框：value设置实际提交数据。
3.textarea没有value属性，设置默认内容在标签中。
4.下拉选项：select没有value属性，option的value设置实际提交数据。
5.input 标签实现的按钮，value设置按钮上的文字，button标签没有value属性。

3 disabled属性

1. 任何表单控件都可以设置 disabled 属性，设置了 disabled 属性之后，该表单控件不可用。
2. disabled 属性无需设置值。
3. 下拉选项，select 设置 disabled 整个下拉选项无法使用，如果 option 设置 disabled 该选项不可选。

9.4 label标签

label标签用于将文字介绍与表单控件关联：

1.文本输入框，密码输入框，文本域，下拉选项，使用label标签for属性与表单控件id属性一致来关联。
2.单选框，复选框，label标签包裹表单控件实现关联。
3.按钮类不需要与label关联。

9.5 表单标签总结

标签名	语义和功能	属性	单标签和双标签
form	表单	action：设置提交的地址。 target：设置提交的地址在哪个窗口打开。	双标签
input	各种表单控件	type：设置表单控件的类型。 value：设置表单控件的值。 maxlength：设置最大可输入长度，用于文本输入框、密码输入框。 checked：设置默认选中，用于单选框、复选框。 name：设置名字。 disabled：设置表单控件不可用。	单标签
textarea	文本域	rows：设置默认显示的行，影响高度。 cols：设置默认显示的列数，影响宽度。 name：设置名字。 disabled：设置表单控件不可用。	双标签
select	下拉选项框	name：设置名字。 disabled：设置表单控件不可用。	双标签
option	选项	value：设置真正提交的数据。 selected：设置默认选中。 name：设置名字。 disabled：设置表单控件不可用。	双标签
button	按钮	type：设置按钮类型，值：submit、reset、button。 disabled：设置表单控件不可用。	双标签
label	与表单控件关联	for：用于与表单控件关联。	双标签

1. input 标签 type 属性值：text、password、radio、checkbox、submit、reset、button
2. button 标签 type 属性值： submit、reset、button

10 框架标签

标签名	语义和功能	属性	单标签还是双标签
iframe	框架标签把其他类型文件引入本网页	src:设置文件地址。 width:设置宽度。 height:设置高度。 frameborder:设置是否有边框，值0或1	双标签

11 HTML 字符实体

空格		&nbsp
<		&lt
>		&gt
&		&amp
x		&times
÷		&divide
￥		&yen
©		&copy

12 HTML 全局属性

所有标签都具有的属性，称为全局属性。

name		名字
id			唯一标识，标签id属性值不能重复
class		设置类名，用于css中选取元素
style		设置css样式
title		设置提示文字
lang		设置语言 en zh-cn fr

关于浏览器自动翻译：

对比浏览器的语言版本和html代码中lang属性设置

13 meta元信息

<!-- 编码字符集 -->
<meta charset="utf-8">  HTML5 支持 HTML5向下兼容
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> HTML 4支持

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!--页面刷新跳转-->
<meta http-equiv="refresh" content="5;url=http://www.atguigu.com">

<!--设置完美视口-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

阿强不吃香菜丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-HTML基础~

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、HTML1：HTML(Hypertext Markup Language)2：HTML发展史3:HTML基本页面模板一、HTML1：HTML(Hypertext Markup Language)超文本标记语言，不需要编译，直接由浏览器执行，是一个文本文件，包含了一些html元素和标签，后缀必须为.html，由W3C维护2：HTML发展史html 2.0 (1995.11）html 3.2 (1997.1.14)h
复制链接

扫一扫