HTML和CSS

HTML

基础讲解

1569173197503
要点：

标记语言不是编程语言
.html和.htm都是html文档的后缀
标签有围堵和自闭两类
开始标签中可以定义属性，属性的值要用引号引起来

H5一般用于移动端的开发

1569204650388

文件标签

H5中新增了一个lang标签，放在<!DOCTTPE html>之后，用于表示页面目标群体所在的国家，我们一般这样写：

<html lang="ch">

meta标签用来指定字符集:<meta charset="UTF-8">

注意，html中的注释格式为：

图片标签

图片标签是自闭标签

<img src="图片的相对路径"/>

相对路径从html所在的文件夹开始，可以用.表示当前文件夹，".."代表上一层目录，"/"代表根目录。如果图片和html放置在同一个文件夹下，则相对路径可以写为./图片名，也可以写为当前文件夹名/图片名，当然，也可以什么都不写，此时默认就是./

img标签下的属性：

1569205610557
1569206384627
图片加载失败了，就显示alt中的文字信息

列表标签

1569206941224
1569206963824

链接标签

<a herf="点击后要跳转到的位置">要显示的文本内容</a>

属性：

target:_self:在本页面打开；_blank：在空白页面打开

mailto:邮箱名：点击之后会启动邮箱对其发邮件：

1569207280379
也可以为图片添加超链接（但这种方法其实不常用，更多时候是用Javascript实现的)：

1569207331249

块标签

div和span，与CSS搭配使用。

span默认在一行中展示，是行内标签；而div会换行，是块级标签

题外话：

标签：
标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

语义化标签：H5新定义

在html4中，为了区分不同块的作用以及提高文档可读性，我们会在每一个div标签中定义一个id，而在H5中则直接提供了语义化标签：

<header>:头部

<footer>:尾部

这些标签同样是要结合CSS一起来使用的

表格标签

HTML中，表格只有行的概念，列要分别在行中定义单元格进行。输入的时候是一行一行输入

1569207968793
<table>：定义表格，border属性定义表格线，width表示表格宽度

注意，这里border对应的是“1”“2”等，这个1表示的是用几条线包围td\tr，所以如果这个值是1，两个单元格之间其实有两条线。如果要变成一条线，应该将cellspacing属性，也就是定义单元格之间空白的属性，设置为0.

1569208411450
<tr>:定义行

<td>：定义单元格

<th>:定义表头单元格

<caption>:定义表格标题

1569209939573
上面三个没有样式，而同样是为了与CSS搭配，同时增强阅读性

定义了三个部分之后，表格就会按thead-tbody-tfoot的顺序展示，和书写的顺序就无关了

合并单元格：

合并行

colspan，值为几就合并从这里向下几个行，合并之后的算在第一行中
例如：
合并列

rowspan，值为几就合并从这里向右几个列，合并之后的算在第一列中

如果不使用CSS,table也可以用来做布局，由于网页的布局总是比较复杂的，并不好说有几列，所以多使用table的嵌套来完成，这样每一行就只有一个单元格了

实例：旅游网首页简版

1569210967260

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游网</title>
</head>
<body>
    <!--采用Table来完成布局-->
    <!-- 最外层Table，用于整体布局-->
<table width="100%",align="center">
    <tr>
        <td>
            <img src="./source/image/top_banner.jpg" width="100%" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="source/image/logo.jpg" alt="">
                    </td>
                    <td>
                        <img src="source/image/search.png" alt=">"
                    </td>
                    <td>
                        <img src="source/image/hotel_tel.png"alt="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <table width="100%" align="center" cellspacing="0">
            <tr bgcolor="orange" align="center" height="45" >
                <td>
                    <a href="https://www.baidu.com">首页</a>
                </td>
                <td>
                    门票
                </td>
                <td>
                   酒店
                </td>
                <td>
                    香港车票
                </td>
                <td>
                    出境游
                </td>
                <td>
                    国内游
                </td>
                <td>
                    港澳游
                </td>
                <td>
                    抱团定制
                </td>
                <td>
                    全球自由行
                </td>
                <td>
                    收藏排行榜
                </td>
            </tr>
        </table>
    </tr>
    <tr>
        <!-- 轮播图-->
        <td>
            <img src="source/image/banner_3.jpg" width="100%">
        </td>
    </tr>
    <tr>
        <td>
            <img src="source/image/icon_5.jpg">黑马精选<hr color="orange">
        </td>
    </tr>
    <tr>
        <td>
            <table width="95%">
                <tr>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <img src="source/image/icon_6.jpg">国内游<hr color="orange">
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td rowspan="2" height="100%">
                        <img src="source/image/guonei_1.jpg">
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jingxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <img src="source/image/icon_7.jpg">境外游<hr color="orange">
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td rowspan="2" height="100%">
                        <img src="source/image/jiangwai_1.jpg">
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <img src="source/image/footer_service.png" width="100%">
    </tr>
    <tr>
        <td >
            <table bgcolor="orange" align="center" width="100%">
                <tr>
                    <td align="center">
                        <font color="gray" size="2" >
                            贾丁版权所有
                        </font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

表单标签

表单：用于采集用户输入的数据，用来和服务器进行交互

使用的标签：form,用于定义一个范围，表示采集用户数据的范围

表单项中的数据要想被提交，必须指定其name属性

1569220543648
#可以用来表示当前页面

get和post的区别：

1569220847420

input:可以通过修改type属性值，改变元素展示的样式

Input常见元素类型：
1. text：文本输入，是input项的默认值
2. password：密码输入框，是密文显示的
3. radio：单选框。要想让多个单选框实现单选的效果，则多个单选框name属性值必须一样，这样才能声明他们是归于同一组的
为每一个单选框设置value属性作为提交时的值，注意，value和name是不一样的，不能混为一谈
1. checkbox：复选框
? checked="checked"//默认被选中

placeholder属性：给出输入框的提示信息

题外话：label元素的作用。如果将输入框对应的文字放置在label中：
1. file:文件选择框<input tyep="file" name='file'>
2. hidden:隐藏域：不被显示，但是值可以被提交，以便于携带隐藏数据一并提交
3. submit:提交按钮
4. button:一个纯按钮，一般和JavaScript配合使用以实现动态效果
5. 用image做按钮：src引用图片位置，input类型中就填image,这样就会把图片作为按钮了
6. color：取色器，选中的颜色也会被提交
7. data:年月日
8. datatime-local:年月日+小时分钟
9. email：会自动对输入的内容进行校验，必须符合邮箱格式
10. number：自动校验输入内容是否为数字
select:下拉列表

列表项要用option进行定义，当然我们也要给select加value

一般第一项都会写“请选择之类的引导性的话，当然用户要是提交了这个也不行，所以要对它设计特定的值并在随后检验

题外话：最后提交的表单项是一个key:value形式的，这里的key就是select的name（注意不是它的value,我们不会直接对select设置value的，那就没有选的意义了)
textarea:文本域

多行的待输入区域

常用属性:
1. cols:列数
2. rows:行数

CSS

CSS概述

1569256417102

CSS的优点：

功能强大
将内容的展示和样式的控制分离（解耦）：降低耦合度以便于分工协作、提高开发效率以及CSS的重用性（因为不需要和具体HTML内容绑定了，可以套在不同HTML上）

CSS与HTML结合

内联样式：在标签内使用style属性指定css代码

不推荐使用，没有实现解耦的效果，并且只对当前元素生效
内部样式:在head标签内定义style标签，其的标签体内容就是css代码

作用域更大了，可以作用域整个HTML页面
外部样式:在外部的CSS文件中写CSS代码
1. 定义CSS资源文件
2. 在head标签内，定义link标签，引入外部资源文件
这种方式下，CSS文件的作用域可以拓展到整个项目

1569257004262
? 也可以写为：

1569257074278

CSS基础语法

CSS格式

1569289463840
选择器：筛选具有相似特征的元素。例如如果我们写div，那么所有的div都会被控制

CSS的注释：

/*
注释内容
*/

注意，每一对属性都要用分号隔开，最后一个可以不加

如果CSS格式有问题，则不会生效

CSS选择器

基础选择器
1. id选择器：选择具体id属性值的元素
  
  语法：#id属性值{内容}
  
  注意，对于div和p,我们也能给他们赋id
  
  建议在一个html中选择唯一id
2. 元素选择器:选择有相同标签名称的元素
  
  如果一个元素被多个同级别的css控制且控制的类型相同，则后面的会覆盖前面的
  
  id选择器的优先级高于元素选择器
3. 类选择器：选择具有相同的class属性值的元素
  
  语法:.class属性值{}//注意前面那个.
  
  在元素内部可以定义类：
  类选择器的优先级也高于元素选择器
拓展选择器
1. *{}:选择所有元素
2. 并集选择器，语法为；选择器1，选择器2{}。
3. 子选择器，语法为“选择器1 选择器2{}“:筛选选择器1元素下的选择器2元素
  
  例如像这样，操作div下的p
4. 父选择器,语法为“选择器1>选择器2{}":筛选选择器2的父元素选择器1
  
  操作的是p标签的父类div标签
5. 属性选择器,语法为"元素名称[属性名=“属性值]{}",一般用于input元素下的选择（因为input元素下的种类太多了，需要通过指定属性名来指定元素）
6. 伪类选择器,选择一些元素具有的状态，语法为：“元素：状态{}”，一个典型的使用是用来控制超链接：
  
  CSS属性
字体、文本
1. font-size:字体大小
2. color:文本颜色
3. text-align:对齐方式
4. line-height:行高

背景

background:背景，可以使用图片

background: url("image/test.png")no-repeat center;

边框
1. border:设置边框，是一个复合属性。
  
  四条线组成一个边框，每一条线都可以单独设置，如果泛指border那就是指四个一起。
  
  多个属性值用空格隔开就好了
尺寸
1. width:宽度
2. height:高度
盒子模型

把元素当成盒子来看待，主要用来控制布局。
- mergin:外边距
- padding:内边距
每一个方向上的内外边距其实都是可以单独设置的

内外边距都是相对的，它取决于当前我们所研究的元素是哪个。

举个例子：

注意，修改内边距会改变盒子大小。解决方案：设置盒子属性box-sizing为border-box，让width和height就是最终盒子的大小。

浮动：float

left/right:左浮动、右浮动

最最最最最简单的理解是，浮动可以实现元素排列在一行

关于浮动，这里有更加详细的介绍：https://www.jianshu.com/p/07eb19957991



HTML和CSS学习