HTML基础知识

最新推荐文章于 2024-10-05 16:51:11 发布

小蜻蜓追风筝

最新推荐文章于 2024-10-05 16:51:11 发布

阅读量135

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_47120961/article/details/114843494

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页调试

1、elements:浏览器渲染的HTML代码
2、console: 控制台，js中使用
3、sources:源码，只加载我们写的代码
4、network:网络资源
5、Application: 浏览器的存储
6、style:样式

HTML的骨架

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

备注：开发者编写的内容，会自动将其添加到body标签中。

DOCTYPE 文档类型
快捷键：
（1）html:5+tab HTML5类型
(2) html:4+tab HTML4类型
(3) html:xt+tab XHTML类型

常用标签

一、head中常用标签
1、title：
（1）定义了浏览器工具栏的标题
（2）当网页添加到收藏夹时，显示在收藏夹中的标题
（3）显示在搜索引擎结果页面的标题
2、link
（1）定义了文档与外部资源之间的关系。
（2）通常用于链接到样式表。
3、script：用于加载脚本文件，如： JavaScript。
4、style：定义了HTML文档的样式文件引用地址。
5、meta：描述了一些基本的元数据。
搜索引擎优化：title–>description–>keywords
备注：关键字（keywords）编写的注意事项：
1.关键字一定和网页相关
2.关键字不宜写得太多，3-6个关键字（关键字会在搜索中分摊搜索资源）
6、设置图标
rel：设置连接资源的类型
icon：表示加载的资源为页面的小logo
href：指向网页图片的资源
（1）指向互联网资源，优先加载icon图片，支持任意图片格式
（2）访问本地资源：绝对路径（不推荐）、相对路径（相对于当前页面所在的目录）

二、body中常用标签
标签分类：行级标签（不换行）、块级标签（换行）、行内块级标签（不换行，但可以设置宽高）
常用标签:
1、标题标签：h1-h6
2‘、水平线标签：hr
3、引入图片标签：img
src:指向图片的路径/位置（互联网资源/本地资源）
alt:图片的加载说明
width：设置图片的宽度
height：设置图片的高度
border：设置图片的边框，默认为0
ps：（1）默认引入的图片就是原始大小
（2）如果没有设置高度，那么高度会按照宽度设置的比例进行等比缩放；
（3）换行的图片与图片之间有一个默认的间距。
4、设置字体标签：font（行级标签）
size：设置字体大小，取值1-7，默认为3；
face ：设置字体类型
color：设置字体颜色
5、空标签：
（1）块级标签：eg：div，默认宽度为继承父元素的宽度，高度被内容撑开
（2）行级标签：eg：span，默认宽度为内容的宽度，不能设置宽高
ps：编程注意事项：一般情况下，行级元素不要嵌套块级元素（如p标签不要嵌套div标签）
6、文本标签：
（1）标记标签:mark
（2）字体加粗：b,strong
（3）字体倾斜：i,em
（4）字体删除线：s,del
（5）字体下划线：u,ins
7、超链接标签：a（功能：资源定位）
（1）本地资源定位
（2）网络资源定位：必须以http或者https开头（类如mailTo：发送人的邮箱，thunder://迅雷服务器资源也可）
target：资源的打开方式（_self在当前窗体打开新页面，_blank在新页面中打开新页面）
（3）锚点定位：定位到当前页面的某个部分
href:默认“#”——>回到顶部、“#+标签的id值”——>到达指定位置
8、实体标签：用一些特定的符号，表示html中指定的内容
（1）html中回车键不表示换行；
（2）html中的空格键不能够让文本元素产生距离，如果写多个空格，最多一个空格起作用
（3）语法：&nbsp（空格）、&lt（小于号）、&gt（大于号）、&yen（金额）、&copy（版权）、&reg（商标）、sub（下标）、sup（上标）
9、表格标签：table
caption:表格标题；
thead:表头
tbody:表格体，默认加载，一个表格中可以有多个tbody
th:单元格
tr:行，行中不存储文本内容
td: 单元格、列，表示一个单元格，存储内容【普通单元格】
ps:属性有 border、bordercolor、width、height、align、cellspacing、cellpadding、bgcolor、background（当bgcolor与background同时存在时，background会覆盖bgcolor。
10、表单标签：form,前端与后端的数据交换的过程，可以通过表单的提交，向服务器发送内容，所有表单元素均为行内块级元素。
（1)输入的内容应该在url中显示，表示传递的数据；
（2）必须要给定一个目标位置：action
（3）表单元素必须要有两个属性:name+value
（4）target:提交展示，属性同a标签的target一样（_self、_blank）
（5）method:提交方式（get post put delete）