HTML基础

学习前端的目的

在这里插入图片描述

对于我们的后端来说，这些标签都是一些字符串，但是这些字符串在经过我们浏览器的处理，就可以显示成我们平时看到的页面

前端开发最核心技术
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现（布局和显示效果）和行为(让前端带有逻辑，能动起来)。网页现在新的标准是W3C，目前模式是HTML、CSSJavaScript。

前端开发最核心的3个技术

（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

（3）JavaScript
JavaScript是一门脚本语言。

所以对于我们后端开发人员，还是需要稍微了解一下前端的知识

HTML的基础标签

HTML的结构

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10

我们的HTML就是由一个个标签组成的
- 我们的HTML是一门解释语言，不是编译型的，而且我们的浏览器也是具有容错的
大部分标签都是成对出现的，是开始标签，为结束标签
- 也有单标签这种特殊的情况比如单标签：开始标签和结束标签是同一个，斜杠放在单词后面
开始标签中可能会带有 " 属性 ". id 属性相当于给这个标签设置了一个唯一的标识符 ( 身份证号码 ).
- 等于号两边不要有空格

层次结构

在这里插入图片描述

html 标签是整个 html 文件的根标签(最顶层标签)
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签. head 是 title 的父标签.
- head 和 body 之间是兄弟关系.
head 标签中写页面的属性.
- title 标签中写的是页面的标题
- meta charet表示的是字符集
body 标签中写的是页面上显示的内容

注释标签

注释不会显示在界面上. 目的是提高代码的可读性.

ctrl + / 快捷键可以快速进行注释/取消注释.
注释的原则

要和代码逻辑一致.
尽量使用中文.
不要传递负能量.

标题标签: h1-h6

<h1>helloh1>
<h2>helloh2>
<h3>helloh3>
<h4>helloh4>
<h5>helloh5>
<h6>helloh6>
1
2
3
4
5
6

数字越大，字体越小
假如我们写了也不会报错，因为我们的HTML是解释型语言，只是没有标题的效果

img标签

在HTML中，图像标签为。是一个自闭合标签。只需要掌握3个属性就可以了：src、alt、title。
- src属性表示图片文件的路径
- width和height表示图片的大小
- alt表示图片的提示(当图片显示不出来的时候)
- title 鼠标移到图片的时候显示的文字

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"border="5px"> 
1

注意:

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行.
属性之间不分先后顺序
属性使用 “键值对” 的格式来表示

谈到路径就牵扯到相对路径和绝对路径

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)

下一级路径: image/1.jpg
上一级路径: …/image/1.jpg

绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如

磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

段落标签: p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落

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

不加段落标签的效果

在这里插入图片描述

加了段落标签

<p>
	在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中
的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在
为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设
备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等
于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公
司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大
小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道
理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八
门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
p>
<p>
	还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

换行标签: br

br 是 break 的缩写. 表示换行.
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
是规范写法. 不建议写成

格式化标签

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

strong 加粗
b 加粗
倾斜
倾斜
删除线
删除线
下划线
下划线
1
2
3
4
5
6
7
8

在这里插入图片描述

超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

在这里插入图片描述

链接的几种形式

外部链接——用来跳转到其他网站

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

内部链接: 网站内部页面之间的链接. 写相对路径即可.


我是 1.html
<a href="2.html">点我跳转到 2.htmla>

我是 2.html
<a href="1.html">点我跳转到 1.htmla>
1
2
3
4
5
6

空链接: 使用 # 在 href 中占位.

<a href="#">空链接a>
1

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

<a href="test.zip">下载文件a>
1

锚点链接: 可以快速定位到页面中的某个位置

<a href="#one">第一集a>
<a href="#two">第二集a>
<a href="#three">第三集a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

无语义标签: div & span

HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。

行内元素特点：

（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等

列表标签

无序列表 ul li
- type disc(default) , circle , square
有序列表 ol li
- 属性：start 表示从*开始，type 显示的类型：A a I i 1(deafult)
自定义列表 dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

<h3>无序列表h3>
<ul>
	<li>咬人猫li>
	<li>兔总裁li>
	<li>阿叶君li>
ul>
<h3>有序列表h3>
<ol>
	<li>咬人猫li>
	<li>兔总裁li>
	<li>阿叶君li>
ol>
<h3>自定义列表h3>
<dl>
	<dt>我的老婆们dt>
	<dd>咬人猫dd>
	<dd>兔总裁dd>
	<dd>阿叶君dd>
dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

HTML中的特殊字符

实体：HTML中预留字符串必须被替换成字符实体。如:< > &

水分子的化学式： H<sub>2sub>O <br/>
氧气的化学式： O<sup>2sup><br/>
5<10
10>5
5≤10
10≥5
注册商标 ®
版权符号 ©
 表示空格
1
2
3
4
5
6
7
8
9

在这里插入图片描述

我们需要用到的时候进行查询就行

表格标签

基本使用

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td 或者 th.

 <table  border="1" cellpadding="2" cellspacing="0" width="500" height="50" >
        <tr align="center" >
            <th>姓名th>
            <th>门派th>
            <th>成名绝技th>
            <th>内功值th>
        tr>
        <tr align="center">
            <td>乔峰td>
            <td>丐帮td>
            <td>少林长拳td>
            <td>5000td>
        tr>
        <tr align="center">
            <td>虚竹td>
            <td>灵鹫宫td>
            <td>北冥神功td>
            <td>15000td>
        tr>
        <tr align="center">
            <td>扫地僧td>
            <td>少林寺td>
            <td>七十二绝技td>
            <td>未知td>
        tr>
    table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

表格标签有一些属性, 可以用于设置大小边框等. 但是这些已经被淘汰，一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸

合并单元格

跨行合并: rowspan=“n”
跨列合并: colspan=“n”

名称	单价	数量	小计	操作
苹果	5	20	100	删除
菠萝	15	45	删除
西瓜	6	6	36	删除
总计	181

在这里插入图片描述

表单标签

表单其本质就是一个容器，承载了我们客户端发送给服务器的信息

表单是让用户输入信息的重要途径

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.

<form action="demo04.html" method="post">
	昵称：<input type="text" value="请输入你的昵称"/><br/>
	密码：<input type="password" name="pwd"/><br/>
	性别：<input type="radio" name="gender" value="male"/>男
	 	 <input type="radio" name="gender" value="female" checked/>女<br/>
	爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
		 <input type="checkbox" name="hobby" value="football" checked/>足球
		 <input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
	星座：<select name="star">
			<option value="1">白羊座option>
			<option value="2" selected>金牛座option>
			<option value="3">双子座option>
			<option value="4">天蝎座option>
			<option value="5">天秤座option>
		 select><br/>
	备注：<textarea name="remark" rows="4" cols="50">textarea><br/>
	<input type="submit" value=" 注 册 "/>
	<input type="reset" value="重置"/>
	<input type="button" value="这是一个普通按钮"/>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

form标签

<form action="demo04.html" method="post">
... [form 的内容]
form>
1
2
3

form表单是要提交数据的，这个页面会提交到另一个资源上
- action=“提交资源的路径”，默认是当前资源，就是将资源提交到什么地方
- method=“本次提交，采用的是HTTP协议是什么方法”,默认是get 关于get和post的区别，我们在http请求中说明

input 标签

name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的，我们的服务器就是根据name属性来找对应的value属性，尤其是对于单选按钮, 具有相同的 name 才能多选一.
value属性 value一般就是用户填写的内容，value=“默认值”，将数据提交给服务器，如果没填写，就是写的默认的值
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.
type=“类型”，表示这个input标签是什么类型的
- text 表示单行文本框
- password表示密码文本框
- radio 表示单选本文框
  - name属性值保持一致，这样才会有互斥的效果
- checkbox 表示复选框
  - name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
- submit表示是提交按钮
- reset表示是重置按钮
- button表示是普通按钮

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

 <label for="male">男label> <input id="male" type="radio" name="sex">
两种方式的效果一样
 <label>
     男
     <input id="male" type="radio" name="sex">
 label> 
1
2
3
4
5
6

select 标签

下拉菜单

option 中定义 selected=“selected” 表示默认选中

星座：<select name="star">
			<option value="1">白羊座option>
			<option value="2" selected>金牛座option>
			<option value="3">双子座option>
			<option value="4">天蝎座option>
			<option value="5">天秤座option>
	 select><br/>
1
2
3
4
5
6
7

textarea 标签

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的

<textarea rows="3" cols="50">textarea>
1

空格也会变成默认内容，所以用的时候最好不要有任何内容

相关阅读:
FastDFS学习（二）
HTML5 新元素
 211. 添加与搜索单词 - 数据结构设计
 猿创征文｜Python基础——Visual Studio版本——Web开发
 微服务项目：尚融宝（10）（后端接口：统一异常处理）
TPM零知识学习六 —— tpm模拟器安装
 【操作系统】文件管理——文件的物理结构（个人笔记）
python(牛客)试题解析3 - 困难
 【Android】将图片转为xml文件
 一篇文章教会你什么是高度平衡二叉搜索(AVL)树
原文地址：https://blog.csdn.net/qq_50985215/article/details/128154786

HTML基础

文章目录

学习前端的目的

HTML的基础标签

HTML的结构

注释标签

标题标签: h1-h6

img标签

谈到路径就牵扯到相对路径和绝对路径

段落标签: p

换行标签: br

格式化标签

超链接标签: a

链接的几种形式

无语义标签: div & span

列表标签

HTML中的特殊字符

表格标签

基本使用

合并单元格

表单标签

form标签

input 标签

label 标签

select 标签

textarea 标签