前端-html

最新推荐文章于 2024-06-12 11:13:48 发布

努力学习！！！！

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量217

点赞数

分类专栏： html 文章标签：前端 html 搜索引擎

本文链接：https://blog.csdn.net/m0_51642633/article/details/127152656

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

1、html 5的基本语法结构（骨架结构）

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF_8'>
        <script></script>
        <link>
        <title></title>
    </head>
    <body><body/>
</html>

注意：

<! DOCTYPE html >——文档声明（告诉浏览器以html 5版本的标准来解析当前代码）

必须放在第一行；doctype不区分大小写

<html></html>

根标签，也叫根元素
lang = “en / zh-CN” 语言，可写可不写

< head ></ head >

头部区域、描述区域
meta表示元信息，针对当前网页的一些基础信息的设置，一个网页上可以有很多meat标签。
- charset 字符集：UTF-8（万国码）、GBK（全部中文）、GB2312（简体中文）、BIG5（繁体中文）
title 当前整个文件的标题
link 用于引入css文件，或者直接写内联样式
script 用于引入js文件或者直接在页面当中写js代码

<body></body>

主体区域

2、常用的html标签

标签是html的基本组成部分，也称之为元素
标签分单标签和双标签
双标签都是成对出现的 <标签名></标签名>（起始标签结束标签）
单标签都是单独出现的，有开始标签没有结束标签 <标签/> <标签>（html 5的标准不需要“/”，html 4的标准需要“/”）
<标签名属性名=“属性值” 属性名=“属性值”><标签名/>
- 标签可以没有属性，也可以有多个属性
- 标签名与属性名之间必须使用空格隔开
- 属性与属性之间没有空格不会影响页面渲染，但不符合语法规范（此时浏览器会自动修正）
- 属性名与属性值之间要使用等号连接，属性值必须写在引号（单引号或双引号，推荐双引号）中，但没有引号不影响使用
标签和属性不区分大小写
标签之间的关系：嵌套关系（父子关系或包含关系、后代关系或祖孙关系）和并列关系（同辈关系或兄弟关系）

（1）标题标签（页面内容）：h1~h6

h1（代表这个页面当中最重要的内容）在页面当中只能使用一个
一个标签对于搜索引擎优化来说，都是具备一定意义的，我们称之为语义化
搜索引擎并不具备区分两个h1当中，谁的内容是真正的标题的能力，不利于搜索引擎优化
一般情况下，我们用h1存放logo

（2）段落标签：p

自动段落换行，自带行间距

（3）文本格式化标签

标签含义	语义化标签	普通标签
加粗	strong	b
倾斜	em	i
删除	del	s
下划线	ins	u
上标字	sup
下标字	sub

（4）文本节点：span

当我们想要单独操作某些文字的样式效果（颜色、字体、倾斜、加粗、大小）的时候，不能直接对文字进行操作，而是将文字放入到标签中，通过操作标签来影响文字

（5）水平线标签（hr）和换行标签（br）

（6）转义字符

当我们在文字当中，连续输入多个空格，最终只会解析成一个

字符含义	转义字符
空格	&nbsp ;
<	&lt ;
>	&gt ;
版权符号©	&copy ;

（7）列表标签

①无序列表

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

②有序列表

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

③自定义列表（描述列表）

<dl>
    <dt>名词或图片</dt>
    <dd>解释或描述1</dd>
    <dd>解释或描述2</dd>
</dl>

（8）div——布局、区域划分、搭建结构

（9）图片标签 img（前景图）

属性	含义
src	必填项，添加的图片路径（地址）
alt	当图片加载不出来时的替代文本
title	图片的提示文本（鼠标悬停）
width、height、border	宽高边框（不用加单位px），当只设置宽或者高时会有等比缩放

路径：

相对路径：根据文件的相对位置寻找文件。从当前位置出发寻找目标文件
- 当前文件夹：./文件名文件名
- 上一级：…/
- 下一级：/
绝对路径：从跟位置开始出发，寻找目标文件。不需要考虑文件之间的位置关系

（10）超链接 a

属性	属性值
href	目标文件的路径或要跳转的网址，必填
target	目标窗口的弹出方式。_ self：默认，从当前页面跳转；_ blank：新窗口跳转

超链接的应用场景：

页面之间的跳转（href属性的属性值：链接地址）
- 在书写页面链接的时候，协议（http://、https://）是不能省略的
本地页面之间的跳转（href属性值：本地文件的地址（绝对路径或相对路径，推荐相对路径））
锚点链接：在同一个页面的不同位置的快速跳转
- 除了在我们当前页面当中不同的元素位置进行跳转之后；在跳转到其他页面也可以附带锚点连接
- ```
<a href="#锚点链接"></a>
<div id="锚点名称">
</div>
```
下载文件（href属性值：要下载文件的文件地址）
- 如果href添加的是类似.txt .png .jpg等这些浏览器支持者直接打开预览的文件是不会支持执行下载任务的，而是会直接打开文件
- 如果想要不管什么文件都是不管浏览器能不能预览，都能执行下载操作，我们需要给a标签添加一个download属性（download=“下载的文件名称”）。但download属性需要启动了服务器之后才能下载，本地时不能进行下载的（download属性前提是下载的资源文件必须与网页是在同一个域名下）

扩展（下面的三个功能，需要结合服务端才能实现其功能）：

电子邮件（href = “mailto: 邮箱地址”）
手机电话（href = “tel: 10086”）
发短信（href = “sms: 10086”）

base标签：

<base target="" href="">

base标签要写在head标签内
为页面上的所有链接规定默认的打开方式
base标签的href，会影响src属性、href属性（不管是写在base标签之前还是之后的标签，均会影响），因此不建议通过base进行统一更改
当为base标签的href属性添加属性值时，该页面中的所有src、href属性值为相对路径的都会拼接上href属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K9WEh6X6-1664782002036)(web前端笔记/1.png)]

（11）iframe框架标签——内联框架（了解）

属性	属性值
src	要嵌入的目标路径
width	宽度
height	高度
frameborder	是否显示有边框。1表示有边框（默认值），0表示没有边框
scrolling	是否显示滚动条。no：不显示滚动条； yes：显示滚动条； auto：内容溢出显示滚动条，没溢出则不显示

引入网页
引入本地页面
引入图片
引入广告
iframe指定a标签打开的位置
- 按照超链接指向的地址，在iframe里边打开
- iframe不用设置src（按照a标签的href属性打开执行的）
- name表示给iframe添加一个名字

<a href="网页链接" target="guigu"></a>
<iframe width="100%" height="500" name="guigu"></iframe>

（12）表格 table

作用：展示数据。早期表格是用于布局（早期没有div标签），现在不用表格进行布局：表格在布局上局限性太大、过于死板，并且表格不利于搜索引擎优化

<table>
    <caption>表格标题</caption>
	<thead>
    	<tr>
        	<th></th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td></td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td></td>
        </tr>
    </tfoot>
</table>

标签	标签含义
table	表格
tr	行
td	列（或单元格）
th	表格行或列的标题标签，默认：文字水平居中，有加粗效果
caption	表格的标题（表名）。要写在table标签内部第一个子元素的位置
thead	表头，表示表格的头部区域
tbody	表体，表示表格的主体区域
tfoot	表尾，表示表格的结尾区域
colgroup	列分组。有span属性，其属性值为一个数值，表示把相邻的几列分为一组，默认值为1，从左到右依次进行分组

表格的行分组就是对表格的行元素进行分组处理，可以用于单独操作某些行的样式。
一个表格当中只能有一个thead和一个tfoot，但tbody可以有很多
当我们没有tbody标签、thead标签、tfoot标签时，浏览器会自动创建一个tbody标签，包含table中的所有标签（除了表格标题）。

表格的基本属性	属性值
border	边框，默认0无边框，数值（给table设置了border属性之后，单元格也会自动添加边框，但随着数值的增大，单元格的边框不会改变）
cellspacing	单元格之间的间距，默认为2
cellpadding	单元格与内容的间距，默认为1
width	宽度。当table设置了宽度之后，单元格的宽度会随着table的宽度而改变，占满整个表格
height	高度
bgcolor	背景颜色。可为table、tr、th、td添加此属性
aligin	水平对齐属性，属性值left（默认值）、right、center。当为table设置align属性，则是整个表格在页面中的对其方式，对内部的td没有作用；当我们将align属性写在行分组标签时，就是操作了td内部内容的对齐方式；当align使用在列分组上时无效。
valign	垂直对齐方式，top、middle（默认值）、bottom。当table设置valign属性没有作用；当为行分组标签（thead、tbody、tfoot）设置时，就是操作了其内部的th、td内容的对齐方式。
rowspan	跨行合并，数值。合并单元格的个数，只能为td、th添加此属性
colspan	跨列合并，数值。合并单元格的个数，只能为td、th添加此属性
rules	分割线属性（该属性只增加给table），rows（位于行与行之间的线条）、cols位于列于列之间的线条）、all（行列之间均有线条）、none（默认值，没有线条）、groups（位于行组和和列祖之间的线条；行分组（thead、tbody、tfoot）之间有；列分组之间也有）

注：

每一行的宽度（高度）都是统一的，以最宽（最高）的单元格的宽度（高度）进行显示

（13）表单

作用：收集用户信息

①表单域标签：表单区域，所有的表单元素都要写在表单域里边

<form action="接口地址（用于指定接收并处理表单数据的服务器程序的url地址）" methods=”get/post(请求方式，用于设置表单的提交方式)“ name=”表单名称（用于指定表单的名称，以便于区分同一个页面中的不同的表单域）“></form>

②表单元素input

<input type="设置表单类型，当type属性的值不同时，现实的表单类型也不同" value=”直接显示成输入框的内容“ name=”“>

type属性的属性值	含义
text	单行文本框
password	密码框
radio	单选框，同一组的单选框需要设置相同的name名
checkbox	复选框，同一组的复选框需要设置相同的name名
submit	提交按钮
reset	重置按钮
button	普通按钮（空按钮），默认不具备任何功能，但可结合js代码根据需求实现各种功能
file	文件域，用于上传文件的
hidden	隐藏域，隐藏表单。一般用于保存一些不想给展示用户的信息
image

注意：

radio和checkbox设置value的值，都是对应选项设置的值

③表单元素button

<button type="submit(默认的)/reset/button"></button>

④文本域textarea

cols：设置宽度，以字符为单位

rows：设置高度，以字符为单位

具有可拖拽的效果，可以手动更改宽高，刷新页面，依然会回到初始状态
取消可拖拽的效果，需要通过resize: none;（css的样式属性，写在css样式表中）
多行文本框里边的换行符是可以被浏览器解析出来的

⑤下拉列表select

<select>
    <optgroup label="添加组标题">
        <option>中国</option>
        <option selected="selected">朝鲜</option>
    </optgroup>
</select>

select标签中第一个option会默认实现出来
通过给option标签添加selected属性，修改默认选项（selected=“selected”——当我们遇到属性值与属性名相同的属性时，可简写为只写属性名）
通过optgroup对option进行分组，optgroup标签中有一个属性lable=“添加组标题”，optgroup不可被选中

表单中的属性	属性值
maxlength	控制最多输入的字符数
size	控制宽度的属性（以字符为单位）
placeholder	提示信息（h5新增）
checked	控制单选框和复选框默认选中的属性
disabled	禁用（置灰）

⑦提示信息标签

<input type="radio" name="sex" id="female">
<label for="female">女</label>

<label
       
       
	<input type="radio" name="sex">女
</label>

⑧表单字段集标签fieldset（使用在表单域当中，用来给表单分组，划分区域）

<fieldset>
	<legend></legend>
</fieldset>

默认自带边框，fieldset可以嵌套自己和其它元素，fieldset要写在form标签当中

legend标签可以给所在的fieldset增加标题，但是必须作为fieldset标签的第一个子元素

html注释语句：

普通注释：
- 语法：
- 作用：1）对于代码的批注和解释，既能够方便别人阅读，也能够让自己很好的维护代码；2）隐藏代码
- 注意：注释不能嵌套
条件注释：
- 条件注释只能应用于IE 9-IE 5的版本

用来给表单分组，划分区域）

<fieldset>
	<legend></legend>
</fieldset>

默认自带边框，fieldset可以嵌套自己和其它元素，fieldset要写在form标签当中

legend标签可以给所在的fieldset增加标题，但是必须作为fieldset标签的第一个子元素

html注释语句：

普通注释：
- 语法：
- 作用：1）对于代码的批注和解释，既能够方便别人阅读，也能够让自己很好的维护代码；2）隐藏代码
- 注意：注释不能嵌套
条件注释：
- 条件注释只能应用于IE 9-IE 5的版本
-

努力学习！！！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-html

前端之html基础内容学习总结
复制链接

扫一扫

专栏目录

前端-html

HTML

1、html 5的基本语法结构（骨架结构）

2、常用的html标签

（1）标题标签（页面内容）：h1~h6

（2）段落标签：p

（3）文本格式化标签

（4）文本节点：span

（5）水平线标签（hr）和换行标签（br）

（6）转义字符

（7）列表标签

（8）div——布局、区域划分、搭建结构

（9）图片标签 img（前景图）

（10）超链接 a

（11）iframe框架标签——内联框架（了解）

（12）表格 table

（13）表单

html注释语句：

html注释语句：

“相关推荐”对你有帮助么？