Head Html Css 第二版笔记

男娘i 2022-01-10 03:39 91阅读 0赞

## 一、 引用 ##

1 <q>I like</q> 简短地“引用”文字中的一部分，而 1 <blockquote>ago aog aogag </blockquote> 则是引用一大段文字并独立显示

## 二、 <a> ##

### 创建目的地 ###

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <h2><a id="chai">Chai Tea</a></h2>//创建了一个目标锚
    2 <a href="index.html#chai">See Chai Tea</a>//链接到的位置

使用id属性在页面中创建目标锚，在“\#”后面跟目标锚id，用以链接到页面的特定位置。

### 使用target打开一个新窗口 ###

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <a target="_blank" href="http://buzz.headfirsttlabs.com" title="ew">Caffeine Buzz</a>

### 三、 文本下划线 ###

text-decoration:underline

### 四、 链接到外部样式表 ###

### 五、 font-family工作原理 ###

1 body\{ 2 font-family: Verdana, Geneva, Arial; 3 \}

g按照顺序在浏览器中找，如果第一种字体没有，就显示第二种，依次类推。

### 六、 字体大小 ###

1 font-size: 15px;
    2 font-size:150%;
    3 font-size: 1.2em//表明字体大小应该按比例放大1.2倍

### 七、 边框 ###

border-width 边框宽度

border-style 边框样式：实线、虚线等

border-color 边框颜色

### 八、 元素的宽度 ###

如果我们不设置元素的宽度，那么就会默认“auto”，使内容充满所有空间。

而且我们不能定义整个元素的宽度，只能定义内容区、补白、边框和边界的宽度，把这些加起来就是整个元素的宽度。

### 九、 text-align ###

text-align设置文本居中对齐，text-align属性会影响到一个元素中所有内联内容的对齐样式，使其中所有内容都居中，并且text-align只用于块元素，如果直接作用于内联元素是没用的。

例子：如果一个div中包含了img，在对这个div使用text-align时，图像也会居中

### 十、 line-height ###

可以用来确定行间距

### 十一、 浏览器放置元素 ###

当浏览器并排放置两个内联元素时，如果左边元素有10像素的边界，右边的有20像素的边界，则两个元素之间就会有30像素的空间。

当浏览器并列放置两个块元素时，就会把共同的边界重叠到一起，重叠边界的高度是最大边界的值

### 十二、 漂移属性float ###

对于float属性必须先给元素设置一个宽度

![1705412-20190603230847403-2136218435.png][]

clear属性，就是使元素流入页面时，不允许漂移元素出现在这个元素周边；

如clear：right；就会使这个元素右边不能出现漂移元素

### 十三、 绝对布置 ###

position：absolute；

![1705412-20190603232228345-2043370722.png][]

且流元素忽视绝对布置元素的存在，也就是clear不再起作用

### 十四、 固定布置 ###

使用固定布置后，元素就会呆在你放置的地方，再也不动。

position：fixed

### 十五、 表格 ###

如果把表头放在表格的左边而不是上边，则需要将表格表头元素分别放入每行来代替原先的第一行。把每个<th>元素放在每行的开头，那么所有的表头放在第一行。

border-collapse：collapse； 可以将两个相邻的边框合并为一个边框

border-spacing：mpx;设置边框间距

vertical-align：top/bottom/center；表格中垂直的排列方式

### 十六、 列表 ###

1、 list-style-type：disc/circle/square/none; 设置列表前面的样式

2、 list-style-position：inside/outside; 如果属性设置为inside，则文本就会环绕在标记的下面，设置为outside，那么标记就会环绕在文本的下面。

### 十七、 表单 ###

1、 输入单选框

![1705412-20190604092942935-1464423882.png][]

2、 输入复选框

![1705412-20190604093006973-1711981030.png][]

3、 maxlength属性可以限制用户最多输入的字符数。

4、 表单中的每个输入控件都有一个那么属性，即都有一个唯一的名字，当我们单击提交按钮时，浏览器会将提取的所有名字连同他们的名字一起发给服务器。例如，当你将邮编“90050”输入到名为“zip”的<input>的文本元素时，提交表单后浏览器会发送“zip=90050”给服务器。

注意：<option>元素没有name属性，因为全部的option元素都是由<select>元素创建的，只要一个名字命名就可。

5、 POST和GET

两者都是把表单数据发送给服务器，但是POST，是把表单变量打包后隐藏在后台发送给服务器，GET也是把表单变量打包后，不过在它向浏览器发送请求之前，附加在URL的末端部分。

即POST发送的用户不可见，而GET发送的用户可见。

![1705412-20190604143246956-790781831.png][]

6、 Fieldsets和legends

![1705412-20190604143753700-1748520246.png][]![1705412-20190604143807566-790415281.png][]

7、label标签

![1705412-20190604143925362-91550768.png][]

8、 文件输入

9、 多选属性 multiple

![1705412-20190604144206434-2043664584.png][]![1705412-20190604144217411-903362839.png][]

### 十八、 伪元素选择符 ###

1 p:first-letter{
    2     font-size:3em;
    3 }//:first-letter伪元素选择符可用于选择一个块元素的第一个字，允许你设置首字大写和首字下沉。
    4 p:first-line{
    5 font-style:italic;
    6 }//:first-line用于选择某一段的第一行文字。

### 十九、 属性选择符 ###

![1705412-20190604144847701-1699156739.png][]

### 二十、 组合选择符 ###

![1705412-20190604145151761-1065749156.png][]

转载于:https://www.cnblogs.com/evanlyf/p/10965152.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220109/fabc32e08ab24b2996914a2b6f7d8da7.png
[1705412-20190603230847403-2136218435.png]: /images/20220109/b7689ee8311b47c99b7d0b107848979e.png
[1705412-20190603232228345-2043370722.png]: /images/20220109/9ac7e0d5bb674683ac1ec832a288039c.png
[1705412-20190604092942935-1464423882.png]: /images/20220109/bf44f1948051438aa98feedd497f26f1.png
[1705412-20190604093006973-1711981030.png]: /images/20220109/6258d136972145c0aabed12db1eae5e9.png
[1705412-20190604143246956-790781831.png]: /images/20220109/deb78b79700a4d8f8cfe3378a9ee5bcd.png
[1705412-20190604143753700-1748520246.png]: https://img2018.cnblogs.com/blog/1705412/201906/1705412-20190604143753700-1748520246.png
[1705412-20190604143807566-790415281.png]: /images/20220109/34073f191fde45fcbaf56747e8f7303c.png
[1705412-20190604143925362-91550768.png]: /images/20220109/b7242c27dfba43278b1bc79d1a4ee181.png
[1705412-20190604144206434-2043664584.png]: https://img2018.cnblogs.com/blog/1705412/201906/1705412-20190604144206434-2043664584.png
[1705412-20190604144217411-903362839.png]: /images/20220109/d05ee12b358e4720a9954d56a43e64b0.png
[1705412-20190604144847701-1699156739.png]: /images/20220109/d6b2df446cb547b6a5435bd9d2124b16.png
[1705412-20190604145151761-1065749156.png]: /images/20220109/3cff83d535614d0ab7a8e0988f12bb6b.png