HTML+CSS笔记整理⽬录
前⾔
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.空标记没有结束标签，⽤"/"代替。
htm软件下载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中有三种列表，分别是⽆序列表，有序列表，⾃定义列表。
如何使用break和continue语句说明：
⽆序列表
<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>
亲爱的热爱的grunt胃疼页⾯打开⽅式<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)
storehouse是什么意思<form name=“表单名称” method="post"  action="#">
</form>
*get和post的区别:
Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对⽤户来说都是不可见的。
Get传送的数据量较⼩，这主要是因为受URL长度限制；Post传送的数据量较⼤，⼀般被默认 为不受限制。
html个人网页完整代码顺序
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.内联样式表：⾏内（内联）样式的作⽤域是当前标签。在标签⾥写
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名{属性：属性值;}
说明：
当我们使⽤id选择符时，应该为每个元素定义⼀个id属性；
如：<div id="top"></div>
id选择符的语法格式是“#”加上⾃定义的id名；
如：#top{width:300px; height:300px;}
起名时要取英⽂名，不能⽤关键字：(所有的标记和属性都是关键字)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。