HTML and CSS

HTML

Explain the basis

1569173197503
Highlights:

Markup Language is not a programming language
.html and .htm are suffix html document
Tag has two types of containment and self-closing
Start tag can define the properties, the value of property due to use quotation marks

H5 generally used to develop a mobile terminal

1569204650388

File tags

Lang H5 There is a new label, placed <!DOCTTPE html>after the page is used to represent the country where the target group, we generally write:

<html lang="ch">

meta tag is used to specify the character set:<meta charset="UTF-8">

Note, html comments in the format:

Picture tags

Image label autistic label

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

Html file relative path from the folder begins, can be used. Represent the current folder, ".." on behalf of the parent directory, "/" represents the root directory. If the picture html and placed in the same folder, you can write to a relative path ./图片名, can also be written as 当前文件夹名/图片名, of course, can not write anything, then the default is./

Under the img tag attributes:

1569205610557
1569206384627
Image loading failed, alt text information display

List tab

1569206941224
1569206963824

Links tab

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

Attributes:

target: _self: Open on this page; _blank: Open in blank page

mailto: mailbox name: E-mail will start after clicking their email :

1569207280379
You can also add a hyperlink to a picture (but in fact this method is not commonly used, more often implemented using Javascript):

1569207331249

Block Label

div and span, and with the use of CSS.

The default display span in the row, the row is a label; div and will wrap, a block-level tag

Digression:

label:
Theme change tag defines an HTML page (for example, to change the subject of), and displayed as a horizontal line.

Semantic tags: H5 new definition

In html4 in order to distinguish the role of the different blocks and improve the readability of the document, we will define a div id in each tab, and in the H5 directly provides semantic tags:

<header>:head

<footer>: Tail

These labels are also to be used in conjunction with CSS together

Table tags

HTML, a table row concept only, the column should be defined in line cells, respectively. When the input is a line by line input

1569207968793
<table>: Definition table, border line definition table attribute, width represents the width of the table

注意，这里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:高度
盒子模型

The element as the box to look at, is mainly used to control the layout .
- mergin: Margin
- padding: padding
Inner and outer margins on each direction may be provided separately in fact

Inside and outside the margin is relative, it depends on the element currently under study is which.

for example:

Note that the margins will change the size of the box in the modification . Solution: Set box box-sizing property is border-box, so that is the size of the final width and height of the box.

Float: float

left / right: left floating, floating right

Most most easiest understood that the floating elements arranged in one row may be implemented

About floating, there is a more detailed description: https://www.jianshu.com/p/07eb19957991



Learning HTML and CSS