【HTML】基础学习

快秃头的小爽

已于 2022-07-05 11:45:46 修改

阅读量566

点赞数

文章标签： html 学习前端

于 2022-07-05 11:03:35 首次发布

本文链接：https://blog.csdn.net/weixin_52218117/article/details/125612713

版权

一.HTML介绍

1. HTML是什么？

超文本标记语言。
超越了普通文本文档，可以添加一些普通文本文档做不到的事。

2. HTML是不是编程语言？

HTML不能写一些逻辑代码，就是一种超文本标记。

3. 编写HTML可以用的编译工具。

记事本，EditPlus ，Sublime，Hbulider，HbuliderX(推荐使用)，VSCode(推荐使用)，WebStorm(推荐使用)，Dreamweaver…

4. HTML怎么用

html文件一般是由浏览器负责进行解析和效果展示的。

浏览器之所以能够对HTML文件进行解析的根本原因是应为浏览器中由浏览器内核，

二.HTML基础语法

1.HTML结构

(xhtml)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

(html5)

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2. HTML中的基础标签

标签类型	解释说明
双标签（<开始标签> 标签体 </结束标签>）	举例：<title></title>
单标签（<标签名/>）	举例:<hr/>

双标签的举例:

<b>文本加粗加深</b>

单标签举例:

<hr/>

标签之间的关系：

父子关系：

<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

  兄弟关系：

<head>
        
</head>
<body>
        
</body>

注意：标签可以嵌套，但是不能交叉

标签中的属性

属性不区分前后，只要写上就会生效。

属性的语法：

 属性名 ="属性值"

属性名1="属性值"  属性名2="属性值" ....

单标签

比如：

hr 分割线的颜色：color

hr 分割线的宽度：width

hr 分割线得粗细：size

双标签

<font size="6" color="blue" face="楷体">字体标签</font>

属性就是在标签的基础上,对标签功能进行了进一步的提升和补充。

属性的应用：

body标签背景相关属性

属性名	解释说明
background	设置body的背景图片
bgcolor	设置body的背景颜色

URL的路径设置方式

绝对路径(从实际的路径获取文件)

1.1 本地文件绝对路径

从盘符出发,依次进入层级文件夹, 最终定位到文件

D:\我的下载\HBuilder.9.1.29.windows

实际开发不建议使用, 当网页文档通过服务器被访问时,一般不允许访问本地文件.

1.2 网络文件绝对路径

直接以图片的网络地址,作为图片地址

https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/822.jpg?2

实际开发不使用, 引用资源的是否存活不能保证, 资源传输效率也不能保证
相对路径 (前提, 引用的文件资源必须要存出当前项目目录中)

从当前的文件出发,去查找目标文件资源.

2.1 向上获取

…/ 表示上级文件夹

./ 表示当前文件夹

2.2 向下获取

/表示文件分层

同级获取

同级获取,直接输入文件名 ( ./ 可以省略)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jnFq2k7P-1656986246633)(.\img\同级.png)]

<body background="1.jpeg">

</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nBjHItb7-1656986246636)(D:\录课\2203班备课\day1\img\同级目录.png)]

向上获取

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qDspnSiP-1656986246637)(.\img\向上获取.png)]

<body background="../1.jpeg">
    
</body>

向下获取

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jQA2np00-1656986246638)(.\img\向下获取.png)]

<body background="img/1.jpeg">
    
</body>

混合获取

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ttLE2ZM-1656986246638)(.\img\混合获取.png)]

<body background="../Day2/img/1.jpeg">
    
</body>

注意: …/ 只允许出现在URL的头部.

三，HTML中的注释

语法：

<!-- 注释的内容 -->

注释作用：提高代码可读性。方便后期维护。

注释快捷键 ：ctrl+/

四，HTML常用标签

1.文本样式标签

标签名	解释说明
h1-h6	文本标题标签
b	文本加粗
p	段落
br	换行<br/>
hr	分割线 color width size align(已废弃)

标题级别之间的区别

1.样式不同

2：SEO(搜索引擎)权重问题。在数据爬虫爬取的时候会按照权重来分配爬取前后。

语义化标签:

strong, ins, em, 等等。

2.字体标签(仅限HTML学习阶段，后期使用css)

标签名	解释说明
font	字体标签

属性	解释说明
color	颜色
size	文字大小（1-7）
face	字体样式

3.文本格式化标签

标签名	解释说明
sub	下标
sup	上标
s	删除线
u	下划线
i

4.特殊字符（W3C手册查找）

符号	解释说明
	空格
<	<
>	>
©	©

5.图片标签

图片标签属于文本标签。可以跟文本显示在同一行。

语法：

属性	解释说明
src	图片路径
width	图片宽度
height	图片高度
alt	图片加载失败时显示里面的内容
title	图片标题（当鼠标移动放置的时候会出现内容）
align	图片与文本位置（已废弃）left right top 默认值：bottom

图片标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/2.webp" alt="出错喽~" width="500px" height="400px" title="蓝天" align="left" >
    &nbsp; &nbsp; &nbsp; &nbsp;6月27日<br/>
    &nbsp; &nbsp; &nbsp; &nbsp; 6月27日
    <br/>
    &nbsp; &nbsp; &nbsp; &nbsp; 6月27日
    <br/>
    &nbsp; &nbsp; &nbsp; &nbsp;6月27日
</body>
</html>

6.超链接

超链接的三种状态：

1.未点击时蓝色

2.点击时红色

3.点击后紫色

<a href="链接的路径">目标名字</a>

属性明	解释说明
target	_blank默认值打开新窗口页面 _self在当前页面打开窗口

6.1 页面跳转

1.外部资源跳转。

 <a href="http://www.baidu.com" target="_self">百度</a>

2.内部资源跳转。

 <a href="HTML_03图片标签.html">内部资源</a>

6.2 资源的访问

<a href="img/1.webp"><img src="img/1.webp"/></a>

6.3 文件下载

<a href="img/1.webp" download="图片">下载图片</a>

6.4 发送邮件到邮箱

<a href="mailto:123456@qq.com">联系我们</a>

7.多媒体标签

embed标签  相当于是一个容器。用来嵌入音频跟视频。

属性	解释说明
src	引入路径
width	设置宽度
height	设置高度
type	设置导入文件的MIME类型

8.列表

8.1有序列表

语法：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    .....
</ol>

标签名	标签介绍
ol	定义有序列表的容器
li	定义有序列表的列表项

<!--有序列表-->
<ol type="a" start="2">
        <li>图片</li>
        <li type="1" value="3">视频</li>
        <li>声音</li>
        <li>声音</li>
        <li>声音</li>
    </ol>

ol标签属性:

属性值	属性说明
type	1(默认)：以数字的形式进行列表项编号 A、a、I、i：以大写的英文字母、小写英文字母、大写罗马数字、小写的罗马数字进行列表项排序
start	设置有序列表的起始数字

li标签属性：

属性值	属性说明
type	同ol的type
value	设置当前列表项的列表编号

8.2无序列表

语法：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    .....
</ul>

标签名	标签介绍
ul	定义无序列表
li	定义无序列表的列表项

标签属性:

属性值	属性说明
type	desc(默认)：以实心原点的形式进行列表项编号 circle、square：以圆圈、实心方块进行列表项排序

8.3自定义列表

语法：

<!--自定义列表-->
<dl>
    <dt>列表标题</dt>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
    ...
</dl>

五，表格

1.基础表格

表格的作用：用来展示数据. 还可以用来做布局（div ）

语法：

<table>
    <tr>
    	<td></td>
    </tr>
</table>

标签名	解释说明
table	声明表格
tr	表格当中的行
td	单元格
th	表头

属性：

属性名	解释说明
border	表格边框
width	表格宽度
height	表格高度
cellspacing	单元格与单元格之间的间距
cellpadding	文本内容与边框的距离
align	在table标签里面代表表格在页面的位置在tr里面表示这一行文本的位置在td里面表示单个单元格中文本位置
bgcolor	背景颜色
background	背景图片

2.表格中的合并

属性名	解释说明
rowspan	行合并
colspan	列合并，单元格合并

3.表格的补充

标签名	解释说明
caption	表格的标题
thead	表格头部
tbody	表格的表体内容
tfoot	表格的底部

代码练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>课程表</h3>
		<table border="1" cellspacing="0" >
			<tr>
				<!-- tr*8>td*7 -->
				<th colspan="2"></th>
				
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
			</tr>
			<tr>
				<td rowspan="4">上<br/>午</td>
				<td>1</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
			</tr>
			<tr>
				<td>2</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>3</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>4</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td rowspan="4">下<br/>午</td>
				<td>5</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>6</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>7</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>8</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
		
		</table>
	</body>
</html>

六，表单

1.表单是做什么的？

需要表单来收集信息。传递给后端，然后由后端访问数据库进行添加的操作等。
语法：

<form action="" method="">
    <input type="submit">
</form>

2.表单里面的属性：

属性名	解释说明
action	提交给后台的路径，称之为接口
method	表单的提交方式

get请求与post请求的区别

get请求方式：
1.通过地址栏提交数据，数据不安全。
2.响应速度快。
3.提交的数据内容大小有限制。

post请求方式：
1.通过form Data(实体内容)提交数据据，数据比较安全。
2.对提交数据大小没有限制。
3.要求后端的表单method方式也是post。

3.input表单

表单里面属性：

属性名	解释说明
type	输入类型
name	数据名
value	初始值
maxlength	最大长度
minlength	最小长度
placeholder	提示信息
disabled	禁用
readonly	只读
required	必填
id	标记标签
autofocus	获取焦点

3.1文本输入框

<input type="text" name="text">

3.2密码框

<input type="password" name="pwd">

3.3隐藏框

<input type="hidden" name="id" value="5">

3.4单选按钮

男：<input type="radio" name="sex" checked>
 女：<input type="radio" name="sex">

属性名	解释说明
checked	表示默认选中

3.5提交按钮

<input type="submit" value="登录">

3.6button提交按钮

<input type="button" value="提交">

3.7button标签

<button type="button">登录</button>

button属性跟button标签的区别:

1.button属性不可以提交表单.后期学习JS配合使用.

2.button标签里面有一个属性 type 默认是submit.如果需要修改为普通按钮.把type值改为butoon.
3.8重置按钮

<input type="reset" >

3.9文本域

<textarea name="" id="" cols="50" rows="20"></textarea>

文本域中的属性

属性名	解释说明
cols	列宽
rows	行高

3.10下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- select:表示创建下拉列表  2.size属性设置列表中显示多少个列表项-->
		<!-- option:1.表示每一个下拉列表项；2.往服务器中发送的是value值 -->
<form action="http://www.51zxw.net" method="get">
			<select name="a" size="3">
				<option value="b">辽宁</option>
				<option value="c">吉林</option>
				<option value="b">长春</option>
				<option value="e">河南</option>
				<option value="f">南阳</option>
				<option value="g">唐河</option>
			</select>
			<input type="submit"/>
		</form>
	</body>
</html>

属性名	解释说明
optgroup标签	分组
selected	第一个显示此元素

3.11颜色输入框

 <input type="color">

3.12数字输入框

请输入数字：<input type="number" min="10" max="50" step="5">

属性名	解释说明
min	最小值
max	最大值
step	步长

3.13邮箱输入框

 邮箱：<input type="email" name="email"><br>

3.14网址输入框

网址：<input type="url" name="url">

3.15文件上传

<input type="file" name="file" multiple>

3.16图片作为提交按钮使用

<input type="image" src="img/tt.jpg">

3.17 label标签的使用

<label for="user">
用户名：<input type="text" id="user">
</label>

3.18 数据列表

<input type="text" list="li" id="kecheng">
   <datalist id="li">
        <option value="java">java</option>
        <option value="web">html</option>
        <option value="python">python</option>
    </datalist>