目录
8.引入背景图片:background-image:url();
14 块级格式化上下文 (Block Formatting Context)
前言
HTML和CSS基础内容总结，包含HTML基础和CSS基础两部分。
一、HTML基础
1 HTML概念
I.HTML(Hyper Text Markup Language)称为超文本标记语言
由一套标签组成的语言称为标记语言
XHTML 可扩展超文本标记语言
II.W3C万维网联盟 制定了结构html和表现css的标准
WHATWG 网页超文本应用技术工作小组，推动H5标准为目的的组织
ECMA 制定行为的标准
Web标准 结构（html，xhtml），表现(css)，行为(DOM，JS)
III.首页必须命名为index.html，其他页面先在html文件夹里。
2 HTML语法
I.常规标记/标签 <div></div>
空标记<标记/><br/>
说明：a.在<>中的第一个单词叫做标记，标签，元素。
b.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。
c.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
d.空标记没有结束标签，用"/"代替。
II.注释:
html注释 <!--注释内容 -->
css注释 /*注释内容*/
js注释 /*多行*/ //单行
III.在head部分放置表现(css).
IV.在body部分放置结构（网页内容）。
3 HTML标签
I.表格中数字自动填充增加{$} 如：table>tr*5>td{$}*5 加Table为表格样式
II.段落文本内容 <p></p>.
III.空格
IV.加粗 <b></b>或者<strong></strong>
V.倾斜<em></em>或者<i></i>
VI.强制换行 <br/>
VII.水平线<hr/> 下划线<u></u> 删除线<s></s>
VIII.HTML中有三种列表，分别是无序列表，有序列表，自定义列表。
说明：
无序列表
<ul>
<li></li>
<li></li>
....
</ul>
有序列表
<ol>
<li></li>
<li></li>
...
</ol>
自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
<dd>解释</dd>
...
</dl>
IX.img
title="鼠标滑过显示文字" alt="图片加载失败显示文字" src="图片存储路径/图片网址"
X.超链接 <a href="链接地址">点击文本</a>
页面打开方式<target>
本页面打开_self 另开一页_blank
alt="加载失败显示文字"
XI.div
分区标签，可大可小，最常用的容器标签之一
XII.span
行内元素， 文本结点，一般用于存放某一小段文本，或是某一个字
4 HTML表格
I.数据表格的作用及组成
作用：显示数据
组成：
<table>
<tr>行
<td>内容</td> /*单元格*/
<td>内容</td>
....
</tr>
</table>
II.表格的相关属性
width="宽" height="高"
border=“表格边框大小”
cellspacing="单元格间距离"
bgcolor="表格背景色“
align="表格对齐方式"（left/center/right）
合并单元格属性：
colspan="所要合并单元格列数”合并列，左右合并
rowspan="所要合并单元格行数”合并行，上下合并
5 HTML表单
I.表单的作用：用来收集用户信息。
II.表单框：method提交方法 提交方式（post,get)
<form name=“表单名称” method="post" action="#">
</form>
*get和post的区别:
- Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。
- Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认 为不受限制。
- Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
- Get执行效率却比Post方法好。Get是form提交的默认方法。
III.文本框
<input type ="text" value="默认值“ placeholder="输入框内容/>
IV.密码框
<input type="password"/>
V.提交按钮
<input type="submit" value="按钮内容"/>
VI.重置按钮
<input type="reset" value="按钮内容"/>
VII.禁用按钮 disable="disabled"(简写disabled)
VIII.默认选项 checked="checked"(简写checked)
IX.下拉菜单
<select>
<option>菜单内容</option>
<option selected(默认选中)>菜单内容</option>
</select>
X.多行文本框
<textarea></textarea>
XI.占位 placeholder="内容"
XII.按钮 button只起到跳转作用，不进行提交。
submit是提交按钮 起到提交信息的作用
XIII.单选框
男<input type="radio" name="ral"/>
女<input type="radio" name="ral" />
单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
XIV.复选框
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled">
(disabled="disabled" :禁用)
(checked="checked" :默认选中)
二、CSS基础
1.CSS汉译:
层叠样式表，就是如何修饰网页信息的显示样式。
层叠性：给同一个元素添加相同的CSS属性，属性值会存在覆盖问题（代码执行顺序从上向下执行）
2.CSS语法：
CSS由两部分组成：选择符（选择器）例div{}，声明（属性：属性值组成）例：声明{属性：属性值；}
语法说明：
a.每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
b.属性必须放在花括号中，属性与属性值用冒号连接。
c.每条声明用分号结束。
d.当一个属性有多个属性值的时候，属性值和属性值不分先后顺序。
e.在书写样式过程中，空格，换行等操作不影响属性显示。
3.CSS样式表
a.内部样式表：内部样式的作用域是当前文件。在head标签内写style标签，在style标签内写选择器和声明。
b.外部样式表：外部样式表的作用域是有关联的所有文件。创建外部CSS文件，通过link标签引入外部css文件。例如：<link rel="stylesheet" href="路径">(多数使用)或者@import url(路径)
c.内联样式表：行内（内联）样式的作用域是当前标签。在标签里写style="属性：属性值；属性：属性值；..."
d.样式表的优先级
！important>内联>内部/外部
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
4.css选择器
a.class选择器：通过class起名字，通过.名字设置样式。
b.群组选择器
语法：选择符1，选择符2，选择符3......{属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
c.包含选择器
语法：选择符1 选择符2{属性：属性值;}
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;
d.伪类选择器
语法：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
E:hover{属性：属性值;}鼠标划过元素时的状态;
E:active{属性：属性值;}即鼠标按下时元素的状态;
*当这4个超链接伪类选择符联合使用时，应注意他们的顺序
e.id选择器
语法：#id名{属性：属性值;}
说明：
最低0.47元/天 解锁文章
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
