HTML基础

2301_740097890

已于 2023-03-11 11:13:17 修改

阅读量122

点赞数

分类专栏： html 文章标签： html

于 2023-03-11 10:18:56 首次发布

本文链接：https://blog.csdn.net/2301_76892837/article/details/129459540

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!--

笔记：

html基础

站点：本质就是一个大的文件夹，用来存储文件，起到资源整合的作用

1、 web有几部分组成？（面试题）

HTML---------结构 hyper text markup language

CSS----------表现（样式）cascading style sheets

JavaScript-------行为交互

2、什么是HTML？

超文本标记语言 hyper text markup language

3、什么是HTML5？

超文本标记语言的第五个版本，5代表的是版本号

4、什么是h5？

包含了HTML、CSS、JS

5、文件命名规则：

1）不能用中文命名

2）不能以数字开头

3）使用数字、字母下划线或者（-）组合而成，其中不能包含空格和特殊字符（！@#¥%……&*）

4）建议使用英文命名，最好见名知意

5）可以使用驼峰式命名（多个英文单词命名时，第二个英文单词首字母大写）

6）首页文件名字只能叫做index.html

HTML中注释：

快捷键：ctrl+/

作用：给开发人员使用的，解释说明的作用，不会显示在浏览器中

常用快捷键：

复制：ctrl+c

粘贴：ctrl+v

返回上一步：ctrl+z

保存：ctrl+s

HTML(标记、标签、元素)

单标签：

语法：<标签名属性=“属性值” 属性=“属性值” 属性=“属性值”/>

特点：

1、单独出现

2、标签名与属性用空格隔开

3、属性和属性值用等号连接

4、属性值放在引号内（单引号双引号均可）

5、可以有多个属性，也可以没有属性

6、属性和属性之间用空格隔开

7、/加不加均可

例如：<meta charset="UTF-8">

双标签：

语法：<标签名属性=“属性值” 属性=“属性值” 属性=“属性值”></标签名>

特点：

1、成对出现，有开始有结束

2、标签名与属性用空格隔开

3、属性和属性值用等号连接

4、属性值放在引号内（单引号双引号均可）

5、可以有多个属性，也可以没有属性

6、属性和属性之间用空格隔开

例如：<title>Document</title>

常用标签：

1、标题标签

语法：

<h1>一级标题内容</h1>

<h2>二级标题内容</h2>

<h3>三级标题内容</h3>

<h4>四级标题内容</h4>

<h5>五级标题内容</h5>

<h6>六级标题内容</h6>

特点：

1、h1-h6字号由大到小

2、自带加粗效果

3、独占一行

4、默认自带间距

应用：

h1---------页面大的标题（只有一个），logo区域

h2、h3----------应用在副标题，内部标题区域

h4、h5、h6-------酌情使用

2、段落标签：

语法：<p>文本内容</p>

作用：让文本以段落的形式展示

特点：

1、独占一行

2、自带间距

注意：p标签内不要嵌套p标签

3、加粗标签

区别：

strong标签具有语意化，更具有强调性

4、倾斜标签

区别：

em更具有语意化，具有强调性

5、下划线标签

6、删除线标签

7、空格标签

语法： 

 一个空格大小没有具体的数值，空格大小取决于当前字体与字号大小

&emsp;

&emsp;代表一个中文字符大小

补充：html特殊字符：

&copy；版权©

&trade；商标™

&it；小于号或显示标记＜

&gt；大于号或显示标记＞

&reg；已注册®

8、换行标签

<br/>

9、水平线标签

<hr>

10、图片标签；

语法：<img src="图片路径" alt=“” title=“”>

src：路径

1、相对路径

把图片文件放置在站点文件夹下面

目标文件：指的是要找到的图片

1）当前文件与目标文件在同一级别，src=图片名+后缀名”

2）当前文件与目标文件所在的文件夹在同一级别，src=“文件夹名/图片名+后缀名

3）当前文件所在的文件夹与目标文件所在的文件夹在同一级别，src=“../文件夹名/图片名+后缀名”

2、绝对路径

1）在电脑具体的某一个盘符下面

2)是一个具体的网址

alt：提示信息，当图片加载失败时显示的提示信息

title：提示信息，当鼠标悬停时显示的提示信息

11、角标标签

上角标：<sup>文本内容</sup>

下角标：<sub>文本内容</sub>

12、超链接标签

语法：<a href="跳转地址" target=“窗口打开方式”></a>

默认自带效果：字体蓝色，并且有下划线,一旦地址被访问过，字体颜色变成紫色

target：表示窗口打开方式

取值：

_self-------在当前窗口打开（默认值）

_blank------在新窗口打开

13、列表标签：

1）无序列表

语法：

</ul>

type:表示列表项样式

取值：

disc-------黑色实心圆（默认值）

circle-----空心圆

square-----黑色实心方块

none-------取消列表项样式（常用）

2）有序列表

语法：

</ol>

type：表示列表项样式类型

取值：

A--------大写字母

a--------小写字母

I--------大写罗马数字

i--------小写罗马数字

1--------数字类型（默认值）

start：列表项起始值

取值为数字

3）自定义列表

语法：

<dl>

</dl>

14、表单：

语法：<form action=“”></form>

作用：主要用来收集用户信息，将收集到的数据，提交到后台。需要配合表单元素一起使用

type取值

text---------文本输入框

password-----密码框

submit-------提交按钮（提交表单同时带有跳转功能）

reset--------重置按钮

button-------普通按钮（开发中常用）

value属性：表示值的意思

应用在输入框上面时，表示给一个值，显示在输入框内，用户是可以自行进行编辑的

应用在按钮上面时，表示提示信息

placeholder：表示提示信息，在输入框内不占位置，用户不可编辑

form中action属性：表示表单提交的地址（实际开发中地址是后端给的）

15、div

通用用来实现页面排版布局,划分结构

特点:

独占一行

16、span

通常用来包裹一段文本内容,需要配合css一起使用

-->