html_css总结

iam-ironman iam-ironman     2023-03-09     115

关键词:

HTML:超文本标记语言
web应用(crm)

HTML有且只有一个HTML根标签。
HEAD标签代表文件头。
BODY标签代表网页主体。

如何编写HTML?
HTML文件的后缀名.html。

常用标签:
基本标签:
HTML
HEAD
BODY
HR: 分割线
BR:换行
PRE: 原样输出
H1~H6:标题

格式化标签:
SUB: 下标
SUP:上标

字体标签:
<font>
<strong>:加重点
<b>:加粗
<i>:斜体

列表标签:
ol和li:有序列表
ul和li:无序列表
dl、dt和dd:定义列表

超链接标签:a
1)链接其他资源;
2)锚点定位;
3)当做一个按钮使用;

href:
1)如果是http协议,那么浏览器就会启用http解析器解析网页内容;
2)如果没有任何协议,默认就是file协议;
3)如果是其他协议(mailto、javascript),浏览器就会查询注册表是否存在处理该协议的软件
。如果有就启用该软件处理协议。
target:指定资源的打开方式。
_self: 在当前窗口中打开资源;
_blank: 在新窗口中打开资源;
framename: 在指定框架中打开资源;

图像标签:img
src:指定图片资源的路径
alt:指定可替换文本

表格标签:
<table>:定义一个表格
<caption>:表格标题
<tr>: 定义一行
<td>: 定义单元格
<th>:定义标题的单元格
<thead>:表格头,可以没有
<tbody>:表格主体,至少出现一次
<tfoot>:表格底部,可以没有

表格相关的属性:
border:定义表格边框
width: 定义表格的宽度
height: 定义表格的最小高度
cellspacing: 指定单元格之间的间隔
align: 表格的对齐方式,例如:居中center、左对齐left、右对齐right、两边对齐justify;

指定行或列的对齐方式:
align: 表格的对齐方式,如果放在tr标签中,那么该行中所有单元格都有效;
如果放在td标签中,那么只对该单元格有效;

框架标签:把一个网页切割成不同部分,每一个部分都是一个框架。
frameset:框架集,负责把页面中所有框架包含起来;
cols: 指定每一个框架的宽度(垂直排列);
rows: 指定每一个frame的高度(水平排列);
frame:框架,一个框架代表一个页面;

注意:frameset不能够与body同时存在。




CSS: 层叠样式单,美化网页。
编写方式:1)在style标签中编写CSS;2)在外部的CSS文件中编写CSS,然后把CSS文件引入到HTML页面;
3)在HTML元素中定义style属性(优先级最高);

选择器:标签选择器、类选择器、ID选择器、伪类选择器、通用选择器、交集选择器、并集选择器。
CSS样式:
1)背景样式:
background-color: 背景色
background-image: 背景图
background-repeat:no-repeat 不平铺
background-position:背景图的位置
background-attachment: fixed 固定背景图

2)字体和文本样式:
font-size: 字体的大小
color: 字体的颜色
text-indent: 文本缩进
text-decoration: 修饰文本
text-align: 文本对齐方式
text-transform: 转换大小写

3)表格样式:
border-collapse: 合并单元格的边框;
border-spacing:设置单元格边框的距离;

4)边框样式:设置元素边框的宽度、颜色和风格。
border-开头

5)盒子模型:设置元素的内边距和外边距。
内边距:元素内容与边框的距离;
注意:元素实际宽度=元素的width + 左右padding
元素的实际高度=元素的height + 上下padding
外边距:元素边框以外的部分;
margin-left:-10px

6)定位:
相对定位:相对于元素原先位置的定位;
绝对定位:相对于屏幕的位置而言;
固定定位:跟绝对定位一样,但是不会随着屏幕滚动而滚动;
postion:relative|absolute|fixed
left:元素左上角的横坐标
top:元素左上角的纵坐标

浮动定位:
float:设置向哪个方向浮动;

 

 

 

 

html_css选择器

第二种增加css样式的方法,可以在head中增加style标签,style中通过选择器定位标签增加css样式CSS选择器分为六种:1、id选择器2、class选择器 3、标签选择器 4、层级选择器(空格) 5、组合选择器(逗号) 6、属性选... 查看详情

html_css样式表样式属性格式布局

CSS(CascadingStyleSheet,叠层样式表),作用是美化HTML网页。/*注释区域*/此为注释语法一、样式表(一)样式表的分类1.内联样式表    和HTML联合显示,控制精确,但是可重用性差,冗余较多。   例:<ps... 查看详情

markdown[html元标记的完整列表]#html_css(代码片段)

查看详情

scssmediaqueryの呼び出しhttp://www.tam-tam.co.jp/tipsnote/html_css/post10708.html(代码片段)

查看详情

40个web前端实战项目,练完即可就业,从入门到进阶,基础到框架,html_css附视频+源码

当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而... 查看详情

《大数据实时处理》学生学期总结

文章目录1、乔自静《学期总结》2、陈春宏《学期总结》3、陈梅《学期总结》4、蒋志友《学期总结》5、付洪蔺《学期总结》6、黄立涛《学期总结》7、黄雨《学期总结》8、滕瑶《学期总结》9、王富祥《学期总结》10、王文萱《... 查看详情

2021前端面试总结

HTML篇HTML面试总结CSS篇CSS面试总结JS篇js面试总结ES6面试总结vue篇vue面试总结微信小程序篇小程序面试总结 查看详情

8如何写好月总结/年总结

8、如何写好月总结/年总结月总结/年总结经常与绩效、加薪、奖金、评级升职有关,所以要认真对待认真书写月总结/年总结,体现出自己的价值给上级留下一个好印象,人家才会觉得让你升职加薪是值得的事。其中绕不过:目... 查看详情

slam算法总结——经典slam算法框架总结

SLAM算法总结——经典SLAM算法框架总结SLAM算法总结——经典SLAM算法框架总结SLAM算法总结——经典SLAM算法框架总结从研究生接触SLAM算法到现在也有两三年了,期间学习了很多经典的SLAM算法框架并写了一些相关的博客,本... 查看详情

slam算法总结——经典slam算法框架总结

SLAM算法总结——经典SLAM算法框架总结SLAM算法总结——经典SLAM算法框架总结SLAM算法总结——经典SLAM算法框架总结从研究生接触SLAM算法到现在也有两三年了,期间学习了很多经典的SLAM算法框架并写了一些相关的博客,本... 查看详情

ctf逆向总结

目录 CTF逆向总结题目类型总结:汇编操作类总结:ASCII码表类总结:逆向、脚本类总结:栈、参数、内存、寄存器类总结:函数类总结:IDA等软件类总结:算法类总结:main函数主逻辑分析(C语... 查看详情

c语言总结

c语言总结总结 查看详情

c语言总结

c语言总结总结 查看详情

课程总结(代码片段)

一、课程总结第二周课程总结第三周课程总结第四周课程总结第五周课程总结第六周课程总结第七周课程总结第八周课程总结第九周课程总结第十周课程总结第十一周课程总结第十二周课程总结第十三周课程总结第十四周课程总... 查看详情

大学阶段总结——大三

        参考文章        大学阶段总结——大一        大学阶段总结——大二 查看详情

javaweb笔记总结

这里面由我自己总结的一些JavaWeb笔记总结。 查看详情

2018年秋季学期《c语言程序设计》编程总结

《c语言程序设计》第四周编程总结《c语言程序设计》第五周编程总结《c语言程序设计》第六周编程总结《c语言程序设计》第七周编程总结《c语言程序设计》第八周编程总结《c语言程序设计》第九周编程总结《c语言程序设计... 查看详情

2018年秋季学期《c语言程序设计》学习总结

《c语言程序设计》第四周学习总结《c语言程序设计》第五周学习总结《c语言程序设计》第六周学习总结《c语言程序设计》第七周学习总结《c语言程序设计》第八周学习总结《c语言程序设计》第九周学习总结《c语言程序设计... 查看详情