重新整理了一遍,花了小半月终于将基础Html+css系统的学完，期间的学习笔记+中文手册都在这，分享..

html+css基础入门月总结

文章目录
一.HTML初识
二.HTML常见标签
三.CSS初识
四.基础选择器
五.后代选择器
六.display转换模式
七.CSS 背景(background)
八.选择器优先级
九.盒子边框（border）
十. 内边距（padding）
十一.外边距(margin)
十二.浮动(float)
十三定位(position)
十四.overflow 溢出
十五.鼠标样式cursor
十六.溢出的文字省略号显示

一.认识WEB。
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
2. 常见的主流浏览器。

3.常见浏览器内核

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

一.HTML初识

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
贴出html的骨架图：

1.HTML标签关系
①嵌套关系，缩进一个tab键的身位（一个tab是4个空格）

 <head>  
 	<title> title> 
 head>

②并列关系

 <head>head>
 <body>body>

2.常见的开发工具(个人比较喜欢VScode，用起来舒服极了^_^)

二.HTML常见标签

1.为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

标题标签语义： 作为标题使用，并且依据重要性递减

其基本语法格式如下：

<h1>   标题文本   h1>
<h2>   标题文本   h2>
<h3>   标题文本   h3>
<h4>   标题文本   h4>
<h5>   标题文本   h5>
<h6>   标题文本   h6>

注：加了标题的文字会变的加粗，字号也会依次变大
一行是只能放一个标题的

2.段落标签p（常见）

<p>  文本内容  p>

3.水平线标签hr

<hr />是单标签

4.换行标签br

<br />

5.div 和 span标签

<div> 这是头部 div>    <span>今日价格span>

注：他们两个都是盒子，用来装网页元素

div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span

排版标签总结

标签名	定义	说明
< h x>	标题标签	作为标题使用，并且依据重要性递减
< p>	段落标签	把 HTML 文档分割为若干段落
< hr />	水平线标签	就是一条线
< br/>	换行标签
< div>< /div>	div标签	用来布局，但是现在一行只能放一个div
< span>< /span>	span标签	用来布局，一行上可以放多个span

6.文本格式化标签

7.图像标签img

	正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
	有提示文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
	有替换文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />

链接标签
文本或图像

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

9.表格标签
创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的文字td>
    ...
  tr>
  ...
table>

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容。

例如：

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名th>   <th>性别th> <th>年龄th>  tr>
   <tr>  <td>刘德华td> <td>男td> <td>55td>  tr>
   <tr>  <td>郭富城td> <td>男td> <td>52td>  tr>
   <tr>  <td>张学友td> <td>男td> <td>58td>  tr>
   <tr>  <td>黎明td>   <td>男td> <td>18td>  tr>
   <tr>  <td>刘晓庆td> <td>女td> <td>63td>  tr>
table>

表格标题caption

<table>
   <caption>我是表格标题caption>
table>

注： caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
caption 标签必须紧随 table 标签之后。

合并单元格2种方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

标签名	定义	说明
< table>< /table>	表格标签	表格模型
< tr>< /tr>	表格行标签	行标签要再table标签内部才有意义
< td>< /td>	单元格标签	单元格标签是个容器级元素，可以放任何东西
< th>< /th>	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
< caption> < /caption>	表格标题标签	表格标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan	合并属性	合并单元格

10.列表标签

概念：
容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表
特点：
列表最大的特点就是整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高。

①无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1li>
  <li>列表项2li>
  <li>列表项3li>
  ......
ul>

②有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1li>
  <li>列表项2li>
  <li>列表项3li>
  ......
ol>

③自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1dt>
  <dd>名词1解释1dd>
  <dd>名词1解释2dd>
  ...
  <dt>名词2dt>
  <dd>名词2解释1dd>
  <dd>名词2解释2dd>
  ...
dl>

标签名	定义	说明
< ul>< /ul>	无序标签	里面只能包含li，没有顺序
< ol>< /ol>	有序标签	里面只能包含li，有顺序
< dl>< /dl>	自定义列表	里面有2个兄弟， dt 和 dd

11.表单标签
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
① input 控件
语法：

<input type="属性值" value="你好">

input 输入的意思
标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中

12.label标签
目标：
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
概念：
label 标签为 input 元素定义标注（标签）。
作用：
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢？
1.第一种用法就是用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   label>

2 . 第二种用法 for 属性规定 label 与哪个表单元素绑定。

<label for="sex">男label>
<input type="radio" name="sex"  id="sex">

13 . textarea控件(文本域)

语法：

<textarea >
  文本内容
textarea>

作用：
通过textarea控件可以轻松地创建多行文本输入框.

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type=“text”	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

14.select下拉列表
目的：
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.
语法：

<select>
  <option>选项1option>
  <option>选项2option>
  <option>选项3option>
  ...
select>

注意：