一.基础标签:
1.标签:元素,标记。包括单标签,双标签,注释标签
注释标签:不会被浏览器翻译
双标签:<开始标签>标签内容</结束标签>
单标签:也叫空标签<标签名/>
注释标签:<!--注释语句-->
基础标签:标题,段落,文本格式化
标题:网页标题titie,1~6级标题
段落标签:p
换行标签:<br/>
加重语气标签(加粗标签):<strong>
斜体标签:<em>
删除线标签:<del>
字体格式:b粗体,big大字体,i斜体,s和strike为删除线,small小字体,sub下标,sup上标,tt固定宽度字体,u下划线
水平线标记符:hr
链接标签:a;href属性:指向链接地址(1.链接到网址:https://xxx.com/;2.链接到其他页面(网页文件):href=xxx.html;3.空链接:#
4.锚点链接:step1:设置锚点,标签需要用id属性进行唯一确定;step2:href属性指向锚点 href="#id名称"
5.target:打开新的页面
6._self:在当前窗口打开链接
7._blank:在新的窗口打开链接
图片标签:img 1.src:source源,图片源.注意相对路径 2.width:宽 3.height:长
tips:在img中width和height属性一般只使用一个值,另一个值会自动进行等比例缩放
- alt:图片加载错误提示
列表标签:
1.无序列表:ul
2.有序列表:ol
3.自定义列表:dl——标题:dt;小标签:dd
4.列标签:li
二.表单标签:
表单标签:
1.表单域:form标签包含的区域
2.表单标签:输入——input,选择——select,文本域——textarea
3.提示信息:span
*:type:text 明文显示文本 type:password 密码显示 type=radio 单选 type=checkbox复选框 type=file文件 type=date日期 type=button普通按钮 type=reset重置 type=submit 提交
*:placeholder:占位符 name 定义 (和 radio相同) value值(点击)
三.表格标签
1.border:边框、cellspacing:单元格之间的空间距离、cellpadding:单元格的填充值
2.表格标签:table
3.表头部分:thead
4.行:table row——<tr>
5.表头:<th>
6.数据部分:<tbody>、数据单元格:table date——<td>
四.盒子模型
盒子模型:
内容content,
内边距padding(少用—---会把边框撑大)
边框border(大小,边框虚或实线,颜色)
外边距margin
外边距的应用:1.可以让块级盒子水平居中《***:盒子要有宽度,盒子水平外边距设置为auto(自动值)》
- 初始化所有标签的内外边距
- *通配符:指所有的标签————初始化所有标签的内边距和外边距,写在样式最开始的位置
- padding:50px;四个方位
3.padding:20px 30px 40px 50px; 分别对应:上,右,下,左 顺时针方向
4.padding:60px 80px; 分别对应:上下两边,左右两边
5.padding:50px 40px 30px; 分别对应:上边,两边,下边
6.auto盒子居中
外边距带来的问题: 解决方法:
1.相邻块级元素,垂直外边距合并 (自会取其中最大的外边距值) 1.一般只给一个盒子设置外边距。
2.嵌套块级元素,垂直外边距塌陷问题 2.给父盒子添加边框;给父盒子添加一个内边距(少用);给父盒子添加overflow:hidden;(开发中常用)。
五.显示模式
标签的显示模式:
1.块元素(有哪些?——span,del,a)
比较霸道,单独占一行;
默认宽度是,父级元素宽度的100%;
可以设置宽,高和对齐属性;
*可以包含行内元素和其他块元素;
文本标签(h1~h6)内不要再装块元素;
p标签内不要加div标签;
2.行内元素 inline(有哪些?——p,h1~h6.a)
一行显示多个;
默认宽度是,内容的宽度;
宽,高和对齐属性设置无效;
只能包含文本或其他行内元素,一般不包含块元素;
链接标签内不要再包含其他链接;
3.行内元素 inline-block:
一行显示多个
默认的宽度是内容的宽度
可以设置宽,高和对齐属性
<ipnput/> <img/> <td>:数据单元格标签
4.元素显示模式的转换
display:block/inline/inline-block;
六.选择器
选择器:
1.标签选择器:最常见的
2.类选择器:class
3.ID选择器:#font 最优的
七.样式
引入样式:
1.内联样式:在开始标签中使用style属性书写样式
2.内部样式:在HTML文档的head标签中用style标签来书写样式
3.外部样式:{1.创建css文件(关联CSS文件:href:指向关联的样式文件地址,re:关联) 2.在HTML文件中关联css文件}
color:green; /*字体颜色*/
font-size:36px; /*字体大小*/
text-align:center; /*文本居中显示*/