HTML

本文主要是介绍HTML，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.行内元素和块级元素

//块级元素
//常见的块级元素h1-h6,div,p,ul,ol,li等
//1.独占一行
//2.宽度，高度，外边距及内边距都可以控制
//3.宽度是容器(父级元素)的100%
//4.是一个容器盒子，里面可以放块和行内元素
//注意：文字类的元素不能使用块级元素如：p,h1-h6都是文字类块级元素，里面不能放div块级元素

//行内元素
//常见的行内元素a,strong,b,span,em,i,del,s,ins等
//1.相邻元素在一行上，一行可以显示多个
//2.宽高设置无效，只有margin-left,margin-right,padding-left,padding-right设置有效
//3.默认宽度就是其本身内容的宽度
//4.行内元素只能容纳其他行内元素
//注意：a标签可以放块级元素，但是将a标签转换为块级更安全

//行内块元素
//<img/> <input/> <td>他们具有块元素和行内元素的特点
//1.相邻元素在同一行上，一行可以显示多个
//2.宽度，高度，内边距和外边距都可以控制
//3.默认宽度就是其本身内容的宽度

2.文本格式化标签

 文字<b>定义粗体文本</b>文字<br>
 文字<em>定义着重文字</em>文字<br>
 文字<i>斜体</i>文字<br>
 文字<small>小号文字</small>文字<br>
 文字<strong>定义加重语气</strong>文字<br>
 文字<sub>下标</sub>文字<br>
 文字<sup>上标</sup>文字<br>
 文字<ins>插入字</ins>文字<br><!-- 下划线 -->
 文字<del>删除线</del>文字<br>

3.超链接target属性

<a target="_self"></a>  默认
<a target="_blank"></a>  新建标签页

4.锚点链接

<a href="#a1"></a>
<h3 id="a1"></h3>

5.表格

<table>  align border cellpadding单元格与内容之间的距离默认为1 cellspacing单元格与单元格之间的距离默认为2
    <tr>
    <th>表头自带加粗属性</th>
    </tr>
    
    <tr>
    <td></td>
    </tr>
</table>

colspan 列，占多少列
rowspan 行,占多少行

6.列表

ul>li
ol>li
dl>dt dd

7.input

<input type=""/>
1.button
2.checkbox复选框
3.file 上传文件
4.hidden存储但不需要显示出来的值
5.image 图片
6.password 文本密码
7.radio //单选name相同，checked选择默认
8.reset 重置按钮，可重置表单里面所有数据
9.submit 提交按钮
h5新增
10.email
11.url
12.date 
13.time 
14.数量
15.手机号码
16.搜索
17.颜色

8.label

label标签中for的作用：当for和input标签中的id值一致时，
点击label标签也可以选择input按钮
<label for="txt">文本框</label><input type="text" id="txt"/>
<label for="rd">选择按钮</label><input type="radio" id="rd">

9.select and textarea

<select>
    <option selected></option>  默认选项
</select>
<textarea cols="30" rows="10"></textarea> cols,rows分别设置宽和高

10.多类名选择器

<style>
    .red{}
    .gray{}
   
</style>
<div class="red gray">
    
</div>

11.文本缩进

text-indent:2em; 

12.选择器

后代选择器和子元素选择器
.div>a 子选择器
.div a 后代选择器
并集选择器
div,p{}

13.链接伪类选择器

a:link{} 未访问的链接
a:visited{} 已访问的链接
a:active{} 鼠标按下没有弹起的链接

14.focus伪类选择器

input:focus{}
<input type="text"/>

15.背景位置

background-position:center left|| 0% 0%(左上角)   x||y

16.嵌套元素坍塌问题

父元素包裹子元素，当子元素设置margin-top时，会造成嵌套元素坍塌问题
解决方法：
1.给父元素设置overflow:hidden
2.给父元素设置边框
3.给父元素设置内边距

17.盒子阴影

box-shadow:离本体水平距离，离本体垂直距离，模糊度，大小(根据本体大小增减)，颜色

18.浮动

1.浮动元素可以向左或向右移动，直到它的外边缘碰到包含框(包裹其的元素)或另一个浮动的边框为止 
2.提升元素层级半级，即一个元素设置浮动属性后，其他盒子元素会无视这个元素的存在，
  但它们盒子里面的 文本 依然会为这个元素让出位置，环绕在其周围
3.不管什么元素设置了float属性后，该元素也就具备了inline-bloack属性，即该元素呈递为内联对象，
  不独占一行，后面块元素在满足宽度情况下与其排在一行
4.没有设置float的块元素会填充浮动元素留下来的空间，发生元素重叠，浮动元素位于重叠上方

19.清除浮动的方法

注：:before /:after伪元素默认是一个行内元素
1.给浮动元素的父元素添加overflow:hidden
2.给浮动元素的父元素添加一个伪元素after或before,在其中设置clear:both
3.在最后一个浮动元素的背后添加一个元素，给其设置clear:both

20.固定定位

position:fixed  默认在左上角
1.以浏览器的可视窗口为参照物移动元素
2.固定定位不占有原先位置

21.粘性定位

position:sticky 
1.以浏览器可视窗口为参照物移动元素
2.粘性定位占有原先位置
3.必须添加top,left,right,bottom才生效

22.z-index

定义：
z-index 属性指定一个元素的堆叠顺序。
使用：
1.必须在定位元素（position:relative/absolute/fixed/sticky）上才有效
2.可以有负值
3.不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染.

23.隐藏元素

display:none;隐藏元素，不占位置
visibility:hidden;隐藏元素，占位

24.三角形

width:0;
height:0;
border:10px solid transparent
border-top:10px solid blue 

25.光标样式

default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

26.取消表单轮廓

outline:none; 取消表单轮廓
resize:none; textarea标签防拖拽

27.单行溢出省略号显示

white-space:nowarp;强制文字在一行
overflow:hidden;  溢出隐藏
text-overflow:ellipsis 文字溢出省略号表示

28.表单新增属性

required不能为空
autofocus获取焦点

29.css3新增选择器

input[value]
input[type=text]
div[class^=icon] 以icon开头

30.结构伪类选择器

ul li:first-child{}
ul li:last-child{}
ul li:nth-child(5){}
ul li:nth-child(2n-1)

ul li:nth-child(1) 匹配父元素的第一个子元素，li是否与第一个子元素匹配
ul li:nth-of-type(1) 匹配指定类型的第一个子元素

31.box-sizing

box-sizing:border-box; w3c
box-sizing:content-box; ie

32.图片模糊处理

filter:blur(npx) 越大越模糊

33.calc

calc:(100%-100px) 父元素的百分比

34.favicon图标制作

www.ico51.cn

35.css宽度

em 相对于父元素
rem 相对于root元素

36.旋转rotate

transform:rotate(45deg)

37.移动translate

transform:translate(x,y)
transform:translateX();
transform:translateY();

38.缩放scale

transform:scale(x,y)
transform:scaleX(x);
transform:scaleY(y);
width:calc

39.间隙问题

  * {
            margin: 0;
            padding: 0;
        }

        .test {
            width: 600px;
            border: 1px blue solid;
            /* ：让水平间隙消失 */
            /* font-size:0; */
        }

        .test div {
            width: 100px;
            height: 100px;
            display: inline-block;
            background: blue;
            /* 让垂直间隙消失 */
            /* vertical-align: bottom; */
        }

这篇关于HTML的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！