HTML&CSS

B/S和C/S

B/S（浏览器/服务器端工作模式）

优势：无需占用本地大量存储空间，相对节省存储空间。

不足：需要占用大量网络带宽。

C/S（客户端/服务器端工作模式）

优势：无需占用大量网络带宽，相对节省网络带宽资源。

不足：需要占用大量本地存储空间。

HTML简介

HTML（Hyper Text Markup Language）意为超文本标记语言。

超文本：超出文本以外，还可以包含图片，音频，视频等非文本资源。

标记语言：标记语言的语义都是由标记标签以及转义字符表示。

标记标签：由一组 <> 和标签名定义的。

标签分类

自结束标签（有开始）和成对标签（有开始有结束）

为什么HTML在浏览器中不是文本？

html文件都能在浏览器上直接运行，浏览器引擎对html进行了自动解析。

HTML标签是否区分大小写？

不区分大小写，因为浏览器引擎解析HTML后，均为小写。

HTML是否可以嵌套？

HTML可以嵌套，但是不可以交叉嵌套（即使交叉嵌套了标签也不会报错，浏览器引擎提供了一定的容错能力，会自动补全标签，不建议使用）。

HTML标签需要正确关闭

如果不正确关闭，浏览器控制台也不会报错，它会自动补全，但是不建议使用。

HTML属性必须有值，并且使用双引号引用

即使不写，浏览器也会补上属性，但是不会补上属性值，容易引起冲突等。

HTML的注释不能嵌套

第一个开始和第一个结束会匹配到一起，导致第二个开始匹配不到结束标签。
复制代码
HTML是否报错，需要从浏览器控制台查看，进入浏览器控制台有两种方式：快捷键Fn+F12；右键点击页面，点击检查。

开发者工具包含

Element：浏览器解析HTML后的代码

Console：控制台

Sources：HTML等源代码

Network：网络监听

一些常用标签

标题标签

	<h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
复制代码

只有h1~h6。

特点：

1 字体加粗，字号是递减的（随数字增大减小）。

2 没有h7，不会报错（浏览器引擎的容错很高），写了也没有意义，只是普通文本。

3 块级元素，自带换行效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

</body>
</html>
复制代码

换行标签

从这段话后边进行换行<br/>
复制代码

We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. <br/>The only real requirement we have is that your CSS validates.
复制代码

段落标签

<p>段落</p>
复制代码

<p>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>
复制代码

块标签

<div></div>自带换行
复制代码

块标签中的属性：

示例：

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>

<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
复制代码

<span></span> 不带换行
复制代码

字体标签：设置文本颜色大小等等属性
```
<font>文本</font>
复制代码
```
属性：face
分割线标签
```
<hr/>
复制代码
```
超链接标签
```
<a href="#">文本</a>
复制代码
```
属性：

href：路径（必要）；

target：”_self” 当前页面跳转，

“_blank” 新开一个页面跳转。
图片标签
```
<img src="#">文本</img>
复制代码
```
属性：

src（必须）插入图片路径；

title 设置鼠标移入【悬停】，显示的提示文本；

alt 设置图片路径有误时的提示文本；

width 宽；

height 高；

./是当前目录，就是该进程从中启动的目录。

../是父级目录，与代码文件同级的资源使用这个。

/是根目录

真实路径：基于本地盘符下的某个路径，如：C:/xxx

真实路径适用于：IO、文件上传下载等场景。

相对路径：基于当前项目下当前文件的路径，继续检索文件，如：../3.jpg或2.jpg。

不建议在web应用中使用。

绝对路径：基于当前服务器下的某个路径，如http://localhost:8080/xxx

建议在web应用中使用。

一些常用的转义字符

语法：以&开头，以;结尾

常用的转义字符：

空格：直接输入空格作用不大，要使用空格的转义字符。
- 普通空格：
```
&nbsp;
复制代码
```
- 中文空格：比普通空格要长一些
```
&emsp;
复制代码
```
大于号>：浏览器会把<>视为标签，所以需要进行转义。
```
&gt;
复制代码
```
小于号<：
```
&lt;
复制代码
```
版权号 ©
```
&copy;
复制代码
```

表格

无序列表标签

type:设置列表项类型

disc：实心圆形，默认的
square：实心方形
circle：空心原形
none：什么都没有没有，可以使用css自定义一些图案放在这里。

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>
复制代码

有序列表

<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
复制代码

自定义列表（用的越来越少了）

<ol type="i">
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
复制代码

type:设置列表项类型

表table

<table border="1" width="500px" height="300px" align="center">
    <tr>
        <th colspan="2">11</th>
        <th>12</th>
        <th>13</th>
    </tr>
    <tr>
    	<td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
    	<td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>
复制代码

跨行跨列

colspan:跨列

rowspan：跨行

这些属性在td或者th中声明

表单

使用from标签制作表单，使用input\select\button\textarea制作表单项

表单form中的属性

action：设置表单提交路径

method：设置表单提交方式（get/post）

input标签属性

type：设置表单项类型

text：单行文本框
password：密码框
submit：提交按钮，触发表单的action。
radio：单选框。

一组单选框的name属性值必须一致。（否则不认为是同一组单选框，限制单选也就失效了）

必须为单选框设置value属性值。（否则后台接收不到数据，相当于丢失了）

checked标注的是这一组单选框数据的默认值。
checkbox：多选框。注意事项同单选框一致。
hidden：隐藏标签，这个标签在页面内不显示。主要是为了隐藏对数据库进行操作时必要的数据，如id值等，但是对用户没有用的数据。

name：设置表单项名称

比如说表单项需要提交数据时，必须为表单项name属性值，否则无法通过name获取到文本框里面传过来的值。

placeholder：设置文本框内提示信息，不影响文本框输入的内容。

value：设置表单项数值

当为按钮设置value数值时，改变按钮默认文本值。

当为非按钮设置value数值时，设置表单项默认值。

select标签

下拉框

语法：（selected表示默认选中）

<select>
        <option selected>中国（默认选中）</option>
        <option >外国</option>
    </select>
复制代码

注意：如果option中没有设置value属性值时，会将option开始标签和结束标签内的内容作为value默认值。

练习：设计一个注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<h2>注册</h2>
<body style="text-align: center">
<form action = "register_success.html" method="get" >
    <input type="hidden" name = "id" value="10001"><!--需要这个数据（数据库操作），但是不需要显示出来-->
    <input type="text " name = "userName" placeholder="用户名"><br/>

    <input type="password" name="password" placeholder="设置密码"><br/>
    <input type="password" name="repassword" placeholder="确认密码"><br/>
    性别：<input type="radio" name="gender" value="male"  checked >男(默认)
    <input type="radio" name="gender" value="female">女<br>

    爱好：<input type="checkbox" name="hobby" value="打球">打球
    <input type="checkbox" name="hobby" value="游泳">游泳
    <input type="checkbox" name="hobby" value="打游戏">打游戏
    <br>
    国籍：
    <select>
        <option selected>中国（默认选中）</option>
        <option >外国</option>
    </select>
    <input type="reset" value="重置">
    <input type="submit" value="注册" >

</form>
<a href="../index.html">回首页</a>
</body>
</html>
复制代码