首页 前端知识 HTML知识上总结

HTML知识上总结

2024-09-03 02:09:47 前端知识 前端哥 25 307 我要收藏

第一部分:HTML里的标签通常成对出现(除单标签外),特殊字符要用特殊转义码

一.常用标签

加粗字体可用strong和b标签(hn标签也可以做到)

斜体可用em和i标签

加下划线可用u标签

删除线用del标签

br标签用来换行

hr标签为水平分割线,可以设置width和size

span标签是修饰行内文本的标签(可自定义属性)

div为标准块级标签

二.表单标签

form一般与input标签连用

input标签要设置其type(表单类型),name(表单名称),value(表单的值)

select(选择)标签一般与option(选项可填其中)连用

textarea标签显示文本域:cols(多少列),rows(多少行)

三.超链接

a标签可存放超链接,href属性存放跳转路径具体颜色与图片应具体设置

#+id名称可以进行链接

四.图片标签(位图)

用img标签进行实现,src表示图片的路径。还有一些常见属性width(宽度),height(高度),align为大致位置取值为:top(上对齐),middle(居中对齐),bottom(下对齐),right(右对齐),left(左对齐)

五.多媒体标签

Audio标签(音频),video标签(视频)

Controls属性表示播放器的组件,autoplay属性表示自动循环,loop属性表示循环播放。

六.表格布局

table标签包含了了thead(表头),tbody(主干),tfoot(表尾),tr(行),td(列)标签

border属性设置表格边框,width宽度,height高度,bgcolor背景颜色,background背景图片,align表示表格的位置(left,center,right),

cellpadding ---- 表示的是表格边距(表示单元格内元素距离单元格边框的距离)

cellspacing------ 表示的是表格的间距(表示的是单元格和单元格之间的距离)

特殊用法:表格的嵌套和表格的合并

单元格合并行

rowspan="n" ------ n是一个整数,表示在单元格垂直方向去跨行(合并行)

colspan = "n" ------- n是一个整数,表示在单元格水平方向去跨列(合并列)

七.列表标签(有序,无序,数据列表)

1.有序列表:ol标签与li标签连用,type 属性 ----- 表示设置序号的种类 ,默认值是数值1

start属性 ------ 序号开始的位置 reversed属性----- 反序(降序)

2.无序列表:ul标签与li标签连用,type属性 ----- 无序列表的样式 disc(默认值 实心圆)circle(空心圆) square(实心方块)

3.数据列表:dl标签与dt,dl连用(新闻或数据)

第二部分:css部分

一.引入方式

行内样式:通过style属性

内嵌样式:style标签

外链样式:link标签进行导入css文件

导入样式:@import url() ,但是要注意放到style标签内部

四种选择器的优先级:就近原则,距离修饰标签的位置最近优先级最高

二.选择器

1.基本选择器:标签选择器(通过标签的名称进行获取)、ID选择器(通过标签的ID属性进行获

取)、class(类)选择器((通过标签的class属性进行获取))、通用选择器(通配符选择器 *)

四种选择器的优先级:ID > class > 标签 >通用

2.包含选择器:子代选择器:获取某个标签的第一级子标签

后代选择器:获取某个标签的所有子标签

分组选择器:逗号选择器,可以同时设置多个标签,使用逗号分隔

3.属性选择器:选择具体的属性去修改

4.伪类选择器:同一个标签,根据不同的状态,有不同的样式,这就叫做伪类

:link ----- 链接点击之前

:visited ------ 链接点击之后

:hover ------ 悬停

:active ------ 激活 鼠标点击的时候不松手的时候

对与a标签,这四种状态的顺序可不可以改变?四种状态的顺序最好固定,link visited hover active

5.伪元素选择器

三.常见样式

1.基本语法:创建一个.css的文件

选择器{

属性:属性值;

属性:属性值;

属性:属性值;

}

2.控制字体:设置字号 ------ font-size:12px;

设置颜色 ----- color : 颜色值;

设置字体 ----- font-family:“宋体”;

设置行高 ------ line-height:150%,1.5em,30px;

3.样式特点: 继承性 ------ 页面中子元素的样式会继承父元素的样式,层叠性 ----- 如果子元素和父元素设置的样式相同的情况下,子元素的样式会覆盖掉父元素的样

4.控制文本:text-indent ----- 设置文本的缩进 2em (可以取负值)

text-align ----- 文本的对齐方式 center left right

text-transform ---- 文本的大小写

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17568.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!