从开始接触前端到现在也有好长一段时间了,仅个人而言写点对于h4和c2的知识点。
1.font
这是在html中比较重要的一个属性,
用法:<font color=”gray” size=”2” face=”宋体” >内容</font>
color:让文字颜色改变
size:范围是1-7 正常3
face : 指定文本的字体
font-weight 设置具体的数字范围是100-900.
font的连写:
font: font-style font-weight font-size font-family;
特点:
font-style,font-weight 可以省略
font-style,font-weight 可以交换顺序
font-size font-family 不可以省略
例如:font: 15px "华文行楷";
其中字体大小和字体体系是必写的
line-height:40px;
行高定义需要在字体定义之后,如果 行高在font之前 ,line-height失效!
2.粗体、斜体、下划线、删除线
标签 |
用法 |
效果 |
被弃用的相同效果 |
strong |
<strong></strong> |
加粗 |
b |
em |
<em></em> |
斜体 |
i |
ins |
<ins></ins> |
下划线 |
u |
del |
<del></del> |
删除线 |
s |
3.ol,ul,dl列表
ul无序列表:
<ul>
<li>内 容</li>
<li>内 容</li>
</ul>
ol有序列表
dl自定义列表:
<dl>
<dt>小标题</dt>
<dd>内 容</dd>
</dl>
其中,ul列表在以后的开发中是会经常使用的
4.table表格
<table>
<caption>标题</caption>
<thead><tr><th> 表头 </th></tr></thead>
<tbody><tr><td> 内容 </td></tr></tbody>
<tfoot><tr><td> 表尾 </td></tr></tfoot>
</table>
colspan="2" rowspan
个人认为表格了解一下,能看懂即可,因为并不会有太多的需求使用到这类表格
5.超链接标签
target=”跳转的方式”
_blank 在新的窗口打开页面
_self 在当前页面跳转
使用a标签在页面上定位标签
要准备一个被a标签定位的标签,要有id属性
标签的href属性的值是#+目标标签的id
实现下载功能
<a href=”文件的相对路径” ></a>
注意:
①这种方式当下已经很少使用
②如果浏览器认识这种文件,会直接在浏览器中打开
6.input输入框
<input type="text" placeholder="请输入用户名" value="123456" />
属性: placeholder 提示的文字,当我们输入内容的时候,会消失
maxlength 设置允许输入的最大长度
<form action="">
<fieldset> //给表单加个框框
<legend>测试type属性 //框框上的字
</legend>
<label for="">color:
</label>
<label for="">tel:
</label>
<input type="tel">
<input type="submit">
</fieldset>
</form>
这个属性也是特别重要的一个属性,因为在网页中我们能够点击去输入内容的文本框,80%都是input标签
7.定位
1.固定定位
position :fixed
特点:
1 不占据原来在标准流里的位置
2 模式转换
3 定位的基准是以浏览器为基准的
2.绝对定位
position:absolute
特点:
1 不占据原来在标准流中的位置
2 可是实现模式的转换
3 如果父元素设置了定位,绝对定位是相对于父元素而言的,否则就是相对于浏览器而言
3.相对定位
position: relative
特点:
1 占据原来在标准流里的位置
2 不能实现模式转换
3 定位是相对于原来在标准流里的位置而言的
4.静态定位
position: static
静态定位其实就是标准流,也就是默认的情况
特点:
1 占据原来的位置
2 不能实现模式转换
3 定位无论怎么设置,都没有效果
平时在使用的时候,要记住子绝父相,也就是给子元素绝对定位,那么就要给父元素相对定位,让子元素相对于父元素来设置定位的位置
8.层级
z-index:number
默认层级为0,最大为9999,当然这很少有人会这样去设置层级 。。
只有设置了定位的元素才能够使用层级这个属性,static定位是无法使用z-index的
控制的是定位里层级
写的不是很好,具体内容我认为还是要再实践中去探索