1、首先新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签一个模块，在div内，再使用div标签创建两个内部模块，下面将让两个内部div并排显示。
3、在test.html文件内，分别给每一个div设置class属性，分别为wdiv，fldiv，frdiv。
4、在css标签内，设置class为wdiv的div样式，定义其宽度为500px，高度为400px，背景颜色为灰色。
5、在css标签内，再分别设置class为fldiv和frdiv的样式，定义它们的宽度为240px，高度为350px，同时，使用float属性分别设置一个div浮动向左，另一个浮动向右，从而实现并排显示。
6、最后在浏览器打开test.html文件，查看实现的效果，就完成了。
1.有序列表：每项之间有先后顺序,默认在每项前面显示1,2,3…<ol type="A">：在每项前面显示A，B，C…
<ol type="a">：在每项前面显示a，b，c…
<ol type="I">：在每项前面显示I，II，III…
有序列表ol增加了一个属性， <ol start="50">，这样就指定了起始值从50开始
2.无序列表使用一对闭合的标签表示， <ul></ul>。内部的一项使用 <li>内容 </li>来表示。
可以通过ul标签的type属性来修改这个修饰符。
<ul type="disc">显示为一个圆点，是默认值
<ul type="circle">显示为一个空心圆圈
<ul type="square">显示为一个实体正方形
“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是前面增加一个圆点来表示。
3.自定义列表
<dl>标签全称是definition list，代表“自定义列表”。 <dl>后面的l代表list，列表的意思。
<dt>标签全称是definition term，代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt>后面的t代表term，“项目”的意思。
<dd> 标签的全称是definition description，代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd>后面的d代表description，“描述”的意思。
例子：
使用 list-style-type: none
id：指定标签的唯一标识
class:指定标签的类名,class可以通过给多个元素赋予同一class，批量操作来设置css
块元素都是独立显示，把内容分割成块，是网页的主要结构模块；行内元素，即内联元素，只显示在段落的文字流中，是用来标记内容的小片段
块级元素标签 h,ul,li,ol,p,div
行内元素标签 a,em,q, img,span
页面分：头部、内容、底部,头部有三个导航栏，内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。
语义化：使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
1.<form>标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
<form name="myForm" action="/test/6.php" method="post">
name:表单提交时的名称；
action:提交到的地址，如果不写action，信息就会提交到当前页面；
method:提交方式（get和post），如果不写，默认的是get
2.常用标签：
复选框当中，可以把name值设置成一个数组，例：
<button>提交 </button> ——普通按钮，button默认是不提交任何数据，需要绑定事件才可以用提交数据
<a class="btn" href="#">提交 </a> ——链接
<input type="submit" value="提交"> ——提交按钮，提交信息到服务器
设置name值实现分组，如果name值相同，则表示它们是一组，可以实现单选。
placeholder 属性提供可描述输入字段预期值的提示信息。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
<input type="hidden" name="identity" value="123">
原文链接： https://blog.csdn.net/qq_41145685/article/details/104464232—————————————————————
一、什么是盒子模型(Box Model)
盒子想必大家都是知道的吧！
生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。
模型是什么呢？
它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件
css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。
二、CSS中的标准盒子模型(W3c标准的盒子模型)
CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件，在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。
1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
2、标准盒子模型的计算
如图：
标准的盒子模型的大小是：content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距)；
注：标准盒子的初始设置宽高大小不包含padding、border和margin的大小。
三、怪异盒子模型(IE标准的盒子模型)
1、怪异盒模型也叫IE盒子模型
怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。
怪异盒子(IE盒子模型)的触发条件：
(1) 给元素添加CSS3属性box-sizing:border-box(注：所以如果用CSS3新属性，就不要考虑低版本浏览器了)
(2)文档结构的doctype不写，这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。
2、怪异盒子(IE盒子模型)模型的计算
如图可见添加了怪异盒的div盒子宽度变小了。
标准的盒子模型的大小是：content(区域内容大小)+margin(外边距)；
注：怪异盒子的初始设置宽高大小包含padding、border大小在内，但不包含margin的大小。
