最基础的的HTML
基本标签
< h1> 与 <
/h1> 之间的文本被显示为标题 < p> 与 < /p> 之间的文本被显示为段落
HTML标题 Heading 是通过 < h1> - < h6> 等标签进行定义的。
HTML段落 paragraph 是通过 < p> 标签进行定义的。
HTML链接 链接 是通过 <a> 标签进行定义的。
HTML图像 image是通过 <img> 标签进行定义的。 示例：
<h1 align=”center”>----------------------设置位置为中间
--------------设置body背景颜色
Style 可以用来设置格式<p>，<h>。
Eg: <h1 style="color:
aqua;font-size:px;">hhhhhhh</h1>-------设置颜色
----------------------------设置位置
HTML标题 Heading 是通过 < h1> - < h6> 等标签进行定义的。 示例：
This is first heading
This is second heading
This is third heading
HTML段落 paragraph 是通过 < p> 标签进行定义的。 示例：
This is a paragraph.
This is another paragraph.
HTML链接 链接 是通过 < a> 标签进行定义的。 示例：
This is a link
HTML图像 image是通过 <img> 标签进行定义的。 示例：
用图片添加链接
<a href="https://www.baidu.com/?tn=44004473_2_oem_dg">
<img src="https://eduimage.nosdn.127.net/5B8826377EE623C7B6328E8F8B8D2871.png?imageView&thumbnail=510y288&quality=100&thumbnail=223x125&quality=100">
</a>
打开连接之后是否新建窗口
打开方式分为在本页打开和在新的浏览器窗口打开，默认情况下，超级链接打开新页面的方式是自我覆盖（就是在本页打开）。根据浏览者的不同需要，读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置，取值分别为_self（自我覆盖，默认）、_blank（创建新窗口打开新页面）。下面我们就来动手区分下这两个属性的区别（由于我们已近写过默认的情况，这里我们就只添加_blank属性）
在前面的基础上我们在< a>标签加入target属性：target="_blank"
超链接添加提示文字
有些时候超链接文字不足以说明点击以后所要链接的内容，所以这个时候我们就需要给超链接添加提示文字，加以描述下一个链接的内容，当光标停留在超链接上时，提示语言就会显现，会让页面显现的很简介。设计到的属性就是title，下面我们再来动手实验一把 下面就是实验内容和效果
HTML表格
每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。< th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
border="1"定义的是最外面边框粗细，为1，你也可以设置为0，就是不显示边框（默认就是没有边框）
标签：< th>表头<
/th>：设置表头
标签：< caption>标题< /caption>：设置表的标题
属性：cellpadding="..."设置单元格边距
属性：bgcolor="..."设置表格背景颜色
属性：background="..." 以某张图片作为表格背景
定义表格
定义表格标题。
定义表格的表头。
定义表格的行。
定义表格单元。
定义表格的页眉。
定义表格的主体。
定义表格的页脚。
定义用于表格列的属性。
定义表格列的组。
HTML图片
下面是设置图片的对齐方式：
image test
let's have an example
align left
下面是创建图片超链接范围
涉及到的标签就是< map>标签，用来指定图片,< area>用来指定超链接区域
这里以一张图片作为地图， 在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。
这是具体实现内容
image test
tap the li zi
然后，当我们点击小松鼠举起的栗子，你就会看见跟多栗子
[if !vml]
[endif]
shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。
coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。
Html布局
这里是具体实现内容：
div#container{width:1000px}
div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
<h1>php中文网
list of book
the summary of the book
i will lead you to travel in the season of linux
good good study day day up
只要将上面的style里的div定义和下面的div块对应就很好理解，这里的逻辑表达的很清晰，就不再赘述。直接来看看效果截图吧
CSS背景
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
<title>内联块状元素
a{
display:inline-block;
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}
Css盒模型
下面我们就用一张图来描述下他们的结构：
均可进行设置
CSS边框
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style: dashed;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
盒模型宽度和高度：
盒模型宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
[if !vml]
[endif]
元素的高度也是同理。
CSS定位
1.CSS 定位
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS 有三种基本的定位机制：
普通流:
元素按照其在 HTML 中的位置顺序决定排布的过程
浮动:
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
绝对定位:
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
定位属性:
position,将元素放在一个静态的,相对的,绝对的,或固定的位置
通过对 top,left,right,bottom 这四个属性的赋值让元素向对应的方向偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素的显示形状,多用于图片
vertical-align 设置元素的垂直对其方式
z-index 设置元素的堆叠顺序
接下来就着重来看看 position 属性: 为了形象,我们先建立一个 html 文件和 CSS 文件
html:
<p>this is php中文网
<p>this is php中文网
<p>this is php中文网
<p>this is php中文网
CSS:
.position1{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
接下来我们就可以看到普通流的效果:
当我们在 CSS 中加入 position 赋值为相对的,向左偏移60px
position: relative;
left: 60px;
接下来我们会看见:
下面我们再将 position 设置为绝对的:
position: absolute;
效果就变成了这样:
通过比较我么就能理解 position 这两个值的区别,还有两个属性就是 fixed,和 static,fixed 是将元素固定下来,就算滚动屏幕,它也会在同一个地方不会动;而 static 设置以后,偏移量什么的就没用了.
下面我们接着来看其他的属性
当我们再加一个块在前面 div 后面的时候: HTML
CSS 添加:
.position2{
width: 100px;
height: 100px;
background-color: aquamarine;
position: relative;
left:10px;
top: 10px;
}
接下来我们就可以通过 z-index 来控制哪一块在最前面:
接下来我们就修改下 CSS 文件来交换他们的前后顺序: position1 中加入
z-index: 2;
position2 中加入:
z-index: 1;
就可以达到交换的效果:
CSS尺寸
CSS 尺寸
尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 涉及到的属性有
height-- 设置元素的高度。 line-height --设置行高。 max-height-- 设置元素的最大高度。 max-width --设置元素的最大宽度。 min-height --设置元素的最小高度。 min-width --设置元素的最小宽度。 width --设置元素的宽度。
下面我们就写个 html 和 CSS 文件来具体比较下
.p1{ line-height: normal; width: 400px;
}.p2{ line-height: 50%; width: 400px;
}.p3{ line-height: 200%; width: 400px;
}
CSS导航栏
下面我们就来定制下自己的导航栏.
垂直导航栏:
首先我们以列表的形式作为最基础的承载,然后我们再其中加入本地或外部的链接,就像下面这样:
<li><a href="http://www.php.cn">php中文网link
<li><a href="http://www.php.cn">php中文网link
<li><a href="http://www.php.cn">php中文网link
<li><a href="http://www.php.cn">php中文网link
然后我们就会得到这样的效果:
我们一般看见的导航栏都没有下划线,和前面的带点,并且当我们的鼠标移到链接上面时链接的颜色会发生相应的变化,这就是我们现在要让 CSS 实现的效果.
首先,我们要去掉前面的点
ul{ list-style: none;
}
接下来我们就去掉下划线(不管是未被点击的状态还是已被点击的状态都去掉),然后加上个背景颜色,再将其显示作为块来显示:
a:link,a:visited{ text-decoration: none; background-color: lightgray; display: block;
}
最后我们再给导航栏加个鼠标移动到上面时,改变背景颜色:
a:active,a:hover{ background-color: cadetblue;
}
下面就是效果图
垂直的效果图讲完之后,我们再来讲讲水平的导航栏,我们就只需要修改 CSS 文件就可以了.
首先我们要将前面的显示效果删除,就是这句:
display: block;
然我们只需要在 li 标签中改变显示方式就可以:
li{ display: inline;
}
这样就可以实现水平导航栏
CSS图片操作
首先我们先引入一张图片,加上一句描述语,使用 div 承载.
就是下面的效果:
接下来我们就开始定制图片的显示:
图片加边框,修改描述字体中对其,修改字体大小,将整个 div 向左浮动,使边框与图片进行贴合:
.image{ border: 2px solid darkgrey; width: auto; height: auto; float: left; text-align: center; padding: 5px;
}img{ padding: 5px;
}.text{ font-size: 20px; margin-bottom: 5px;
}
这就是处理过后的的效果
[if !vml]
[endif]
之后我么再设计图片的透明度: 这个比较简单,就只需要在图片 CSS 设置中加入:
opacity: 0.5;
这个属性的值范围为 0-1 设置透明度,0 为完全透明,1 代表完全不透明.
下面就是半透明的效果图:
[if !vml]
[endif]
选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
HTML 表单和输入
HTML 表单用于收集不同类型的用户输入。
[if !vml]
[endif]
在线实例
创建文本字段(Text field)本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
创建密码字段本例演示如何创建 HTML 的密码域。
（在本页底端可以找到更多实例。）
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
.
input
元素
.
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
First name:
Last name:
浏览器显示如下：
First name:
Last name:
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
密码字段
密码字段通过标签<input type="password"> 来定义:
Password:
浏览器显示效果如下:
Password:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
Male
Female
浏览器显示效果如下:
Male
Female
复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
I have a bike
I have a car
浏览器显示效果如下:
I have a bike
I have a car
提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
Username:
浏览器显示效果如下:
Username:
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。
tp实际操作
Href=网站链接
Alert（） 是用来在站点显示出一个弹窗
表示跳转到out.js文件
暂时进度（截止至2019.8.4）
