html 总结

html总结

　　html相当于人的骨架，是根本，是一种和python一样的编译语言

 

　　几个重要的标签：

1.特殊字符

　　 空格、&lt 小于;、&gt大于;、&copy 版权

超链接标签

　　<a href="new.html" target="_blank">点击进入到新网页</a>

　　作用：

　　　　name属性

　　　　target属性

　　　　实现页面指定跳转（需要创建锚点）——>>即给要去跳转的地方添加name属性/id属性

图片标签

　　width属性

　　height属性

　　title属性

　　align属性

　　alt属性

查找：
    相对路径查找
            
        即 . 和 .. 分别地表当前目录 和 父路径

    绝对路径查找
        不推荐，（换电脑的话路径会更换）

表单标签<form>

　　列表标签：

　　　　1.无序列表ul　　li

　　　　　　属性有type属性

　　　　2.有序列表ol　　li

　　　　　　属性 type

　　　　3.定义列表dl　　dt　　dd

　　表格标签：

　　　　用table　　tr行　　td列　

border：边框。像素为单位。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。

　　　   以上有个重要属性是：style=‘border-collapse:collapse'：单元格的线和表格的边框线合并

　　　　需要注意:

　　　　　　在行内不能设置背景颜色，背景颜色需要在列中设置

　　　　单元格的合并：

　　　　　　colspan：横向合并

　　　　　　rowspan：纵向合并

　　　　表格的标题有一个标签：<caption>

　　　　写表格的时候经常会用到 <thead> <tbody> <tfoot>,这样的会页面会显得有条理，检查时方便

表单标签：

　　与服务器进行交互，表单就是用户输入的数据，发送到后台，然后接到后台反应

　　<form>

　　其中name id属性 是用于JS来操作表单时使用的

　　action  method 属性

嵌套input标签才是form的强大之处

<input type="text" />

　　type属性：

type="属性值"：文本类型。属性值可以是：
text（默认）
password：密码类型
radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
checkbox：多选按钮，名字相同的按钮作为一组进行选择。
checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
hidden：隐藏框，在表单中包含不希望用户看见的信息
button：普通按钮，结合js代码进行使用。
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
file：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
value="内容"：文本框里的默认内容（已经被填好了的）
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

下拉列表标签

　　<select>中的选项是<option>

　　有multiple属性和size属性

多行文本输入框

　　<textarea>

　　有value rows cols readonly 属性

<label>标签

　　实现文件和选项按钮相关联

　　for标签： 找到与之要关类联的事件的id 或者name属性

 css总结

　　简单就是给框架中添加一些样式，但是都是静态的。使页面有了一些基本的审美观

选择器

• 标签选择器
• id选择器 #
• 类选择器 .
  • 总结：写类名尽量就小

　　高级选择器

1. 1. 后代选择器
   2. 子代选择器
   3. 并集选择器
   4. 交集选择器
   5. 属性选择器

继承性：

　　有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

 　　总结：

• • 先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
  • 如果没有被选中标签元素，权重为0　
  • 权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性　　

 盒模型：

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

　　小属性：top  right  bottom  left

　　　　有个透明颜色需要注意一下：transparent

标准文档流：

　　空表折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

　　高矮不齐，底边对齐

　　自动换行

块级元素和行内元素

　　行内：

　　　　与其他行内元素并排

　　　　不能设置宽高，默认就是文字的宽度

　　块级：

　　　　独占一行

　　　　能接受指定宽高

两者之间转换方法：

　　用display：inline行内　参考span标签

　　　　　　：block块级    参考div

浮动

float：none: 表示不浮动，默认

• • left: 表示左浮动
  • right：表示右浮动

　　浮动的四大特性：

1. 1. 脱标
   2. 浮动的元素相互贴靠
   3. 由“字围”效果
   4. 收缩效果

 　　清除浮动的方法：

1. 1. 给父盒子设置高度
   2. clear:both
   3. 伪元素清除法
   4. overflow：hidden（常用）

 margin塌陷问题

　　水平方向上没有影响，垂直方向上有塌陷问题

常用技巧

• 标准文档流盒子水平居中 margin：0 auto
•  水平文本居中：text-align：center
• 文本垂直居中：行高=盒子的高度
• 盒子浮动就不会出现垂直方向上塌陷问题

 文本属性和文字属性

background　

background:  red  url('./images/banner.jpg')  no-repeat   center top;

• background-color属性表示背景颜色

• background-img:表示设置该元素的背景图片

• background-repeat:repeat 表示设置该元素平铺的方式

• background-position: 0 0 属性设置背景图像的起始位置。

 　　作用：

1. 1. 将好多小图标合成在一张大图中，利用position找到需要展示的位置
   2. 可以减少http的请求
   3. 减少图片的字节
   4. 减少网页设计师在命名上的困扰

 定位

　　相对定位：

　　　　不脱标、形影分离、老家留坑

　　　　用途：微调元素， 做父相子绝

 　　绝对定位：

　　　　脱标、做遮盖效果提升层级、设置绝对定位后，不再区分行内和块级元素。都能设置宽高

*{
            padding: 0;
            margin: 0;
        }
        .box{
             100%;
            height: 69px;
            background: #000;
        }
        .box .c{
             960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
        }

绝对定位：

　　　　脱标、固定不变

　　　　top是以左上角为参考点，bottom是一左下角为参考点

　　　　实例：

　　　　　　返回顶部栏、固定导航栏、小广告

z-index

　　谁大谁压着谁

　　只有定位的元素才能有z-index

　　没有单位，是整数

　　从父现象：父亲怂了，儿子再牛逼也没有用。

 透明度：

　　  opcity:0.6
  　　background:rgba(0,0,0,.6)        

　　　　以上都表示透明度为0.6