HTML基础

字好名

已于 2022-08-02 20:45:38 修改

阅读量1.2k

点赞数

文章标签： html

于 2022-07-28 00:03:25 首次发布

本文链接：https://blog.csdn.net/qq_58293159/article/details/126005013

版权

作用

编写前端代码的骨架

第一个HTML代码

<html>
    <head>
        <meta charset ="utf-8" />
    </head>
    <body>
        你好世界!
    </body>
</html>

项目结构

本质:一个文件夹
结构:
项目名
css:文件夹,存放前端代码中的css文件
js:文件夹,存放前端代码中使用的js文件
img:文件夹,存放前端代码中使用的图片文件
xxx.html:一个网页文件,一个项目中可以有无数个网页文件

HTML注释

作用:

解释说明

消除一些无法删除,但是暂时又不能生效的代码

语法:

Head中的标签

meta:原标签如:

如:<title>网页标题</title>

Body标签

文本标签:

h1 ~ h6: 属于标题

p: 段落

font: 老的文本标签

span:新的文本标签

big:变大

b: 加粗标签

i: 斜体标签

small : 标签

超链接标签:

标签名: a

特有属性 : href

作用:跳转当前项目的其它网页

图片标签:

标签名:img

特有属性: src 放的是图片的地址

注意: 支持jif格式的图片

输入标签:

标签名:input

其中的type 属性可以给其特殊的意义

媒体标签:

音频:

使用 HTML5 <audio> 元素

<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

视频:

<video> 是 HTML 5 中的新标签。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

其它:

br: 换行标签

hr: 横线

无序列表:

有序列表:

下拉选择:

select

option

div : 块级元素

textarea: 多行文本输入

表格标签:

table

table: 表示表格

tr: 表示一行

th 和 td 都表示一个单元格,th是一个头部元素

CSS基础

作用

美化HTML标签

如:

文本的大小,颜色,字体,位置等

背景的颜色,大小,位置等

标签的大小位置等

中文名称: 层叠样式

CSS书写位置

方案一:

        标签中的style属性中书写,这种书写称为内联样式,不建议使用

        <iframe src="index2.html" width="50%" height="50%"></iframe>

方案二:

在head标签中书写style标签,在style标签中书写css代码,建议新手使用

        <style type="text/css">

对应样式

</style>

方案三:

在css文件中书写,通过link标签将其引入到使用的html文件中(建议熟练后使用)

        <link rel="stylesheet" type="text/css" href="css文件路径"/>

选择器

作用: 在css代码中寻找html的标签

常用的选择器

基本选择器

统配选择器

作用:给当前网页的所有标签都设置该样式

语法:

css代码

}

标签选择器

作用:给当前网页中的所有该标签使用

语法:

标签名{

css代码

}

class选择器

作用:给当前网页中所有class属性值为xxx的设置样式

语法:

.class的属性值{

css代码

}

注意:

所有标签都有class属性,并且class属性值可以重复

一个标签可以拥有多个class属性值

id选择器:

作用:给当前网页中所有id属性值为xxx的设置样式

语法:

#id的属性值{

css代码

}

注意:网页中的id不能重复

高级选择器:

子代选择器:

作用:限定所取得范围

语法:

父选择器子选择器{

css代码

}

父选择器 > 子选择器{

css代码

}

伪类选择器:

作用: 特殊情况下得标签样式

语法:

选择器:伪类{

css代码

}

注意: hover表示鼠标悬停

select表示获取鼠标焦点

当多个选择器给同一个标签设置样式听谁的?

选择器优先级相同:

谁在下面听谁的,

选择器优先级不同,

谁得优先级高听谁的

优先级:

内联样式 > id选择器 > class选择器 > 标签选择器 > 统配选择器

子代选择器的优先级

先看子选择器是否为id选择器

如果其中一个是id选择器,就听id选择器的

如果没有id选择器或者都是id选择器,看父类的优先级

如果父选择器优先级相同,那么再看子选择器的优先级

文本样式

大小
颜色
样式
下划线
字体样式
行高
文本在标签中的位置
...

背景样式

背景颜色
background-color
背景图片
background-image
配合属性:
background-size
background-repeat
background-position

元素类型

所有标签可以分为行内元素,行内块元素,块元素
行内元素:设置宽高无效,标签大小安装标签中的内容进行填充
行内块元素:设置宽高有效,但不独占一行
块元素:设置宽高有效,独占一行
如何修改标签的元素类型:
通过display属性进行修改
display的属性值:
block:块元素
inline-block:行内块元素
inline:行内元素
none:隐藏

盒子模型

标准盒子
标签实际宽/高=宽/高+左/上内边距+右/下内边距+左/上边框+右/下边框+左/上外边距+右/下外边距

IE盒子
标签实际宽/高 = 宽/高+左/上外边距+右/下外边距
如何设置标签为IE盒子:box-sizing: border-box;

定位:

作用:

移动标签的位置,对标签的位置进行设定

常用定位:

相对定位:relative

作用: 相对于标签的原位置进行移动

特点: 会保留原标签的位置

配合使用的属性:

left:相对于标签的左边,向右边移动距离

right: 相对于标签的右边,向左边移动的距离

top:相对于标签的上边,向下移动的距离

bottom:相对于标签的下边,向上移动的距离

使用情况:

对标签的位置进行微调

防止内部使用绝对定位

绝对定位:absolute

作用:相对于最近一个上层做过定位的父容器的距离

配合使用的属性有:

left: 相对于最近一个上层做过定位的父容器左边的距离

right:相对于最近一个上层做过定位的父容器右边的距离

top:相对于最近一个上层做过定位的父容器上边的距离

bottom:相对于最近一个上层做过定位的父容器下边的距离

z_index : 层级

使用情况: 移动到父容器的某个位置

浏览器窗口定位:

作用:将指定的标签设置到浏览器的指定位置,参考位置是浏览器窗口

配合的属性是:

left: 距离浏览器窗口左边的位置

right: 距离浏览器窗口右边的位置

top:距离浏览器窗口上边的位置

bottom: 距离浏览器窗口下边的位置

使用情况:让标签恒定浏览器的某个位置,使用该定位

制作网页

步骤:

        1,对网页进行划分

             划分原则:

                1,由外向内

                2,从上向下

                3,从左向右

        2,先编写html代码的骨架

        3,在编写css,使其骨架在正确的位置上 4,在进行细致补充