本文章仅为作者对html与css知识点的总结，如有不恰当的地方欢迎沟通交流，如需转载请注明出处http://blog.csdn.net/tobesuccess/article/details/78650724

HTML部分
- HTML的概念
- HTML的文档构成
- HTML中的标签
CSS部分
- CSS的概念
- CSS与html的结合方式
- CSS的选择器
- CSS的基本语法
- CSS的常用属性

HTML部分

HTML的概念

HTML（Hyper Text Mark-up Language）超文本标记语言
1.超文本：表达能力优于普通文本，指页面内可以包含图片、音乐、超链接及程序等。
2.标记语言：由标记构成的语言，其中还有XML、XHTML等。html是用来制作网页的标记语言，不需要编译，直接由浏览器执行。它的后缀名有.html和.htm两种，这两种后缀名没有区别。

HTML的文档构成

<!--最外层包裹-->
<html><!--头标签  里面可以写标题、网页属性、css、js等--><head><meta charset="utf-8" /><!--标题标签--><title></title></head><!--体标签  用来写正文部分--><body></body>
</html>

html标签的写法：1.在<>中包裹一个英文单词。2.所有标签中的英文单词不区分大小写（推荐使用小写）。3.标签分为两类1>围堵标签：有开始标签，也有结束标签（如<html></html>）。2>自闭合标签：本身既是开始标签，也是结束标签（如<br />)。注意：所有标记语言，标签中的英文单词没有以数字开头的。

HTML中的标签

排版标签

<!--这是一段注释。注释不会在浏览器中显示。-->
<p> → 标签定义段落。<p> 相见时难别亦难， </p>
<p> 东风无力百花残。 </p>
<p> 春蚕到死丝方尽， </p>
<p> 蜡炬成灰泪始干。 </p>

效果：

相见时难别亦难，

东风无力百花残。

春蚕到死丝方尽，

蜡炬成灰泪始干。

<br> → 标签可插入一个简单的换行符。成功没有快车道，幸福没有高速路。<br>所有的成功，都来自不倦的努力和奔跑；<br>所有幸福，都来自平凡的奋斗和坚持。

效果：

成功没有快车道，幸福没有高速路。
所有的成功，都来自不倦的努力和奔跑；
所有幸福，都来自平凡的奋斗和坚持。

<hr> → 标签在 HTML 页面中创建一条水平线。春蚕到死丝方尽，<hr>
蜡炬成灰泪始干。

效果：

春蚕到死丝方尽，

蜡炬成灰泪始干。

<pre> → 可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。<pre>public static void main(String[] args){System.out.println("Hello JavaWeb!");}
</pre>

效果：

    public static void main(String[] args){System.out.println("Hello JavaWeb!");}

<font> → 字体标签：该标签的使用必须配合属性。size：大小（取值1~7之间从小到大）。face：字体。color：颜色，值的写法有以下三种：1.可以直接填写颜色的英文名称2.#FFFFFF3.rgb(255,255,255)<font size="5" face="黑体" color="red">这是一个字体标签！</font>

效果：

这是一个字体标签！

<strike> → 可定义加删除线的文本。<strike>这行文字将被删除。

效果：

这行文字将被删除。

<big> → 标签呈现大号字体效果。<big>这行文字将呈现大号字体效果。

效果：

这行文字将呈现大号字体效果。

<small> → 标签呈现小号字体效果。<small>这行文字将呈现小号字体效果。

效果：

这行文字将呈现小号字体效果。

<u> → 标签为文本添加下划线。<u>这行文字将添加下划线。

效果：

这行文字将添加下划线。

<b> → 标签呈现粗体文本效果。<b>这行文字将加粗显示。

效果：

这行文字将加粗显示。

<sup> → 标签可定义上标文本。5<sup>2</sup>

效果：

5²

<sub> → 标签可定义下标文本。5<sub>2</sub>

效果：

5₂

<hn> → 标题标签：n的取值范围是1-6。可以达到的效果:1>1-6文字从大到小; 2>文字加粗;3>换行<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

注意：HTML中不支持：空格、回车、制表符，都会被解析成一个空白。

列表标签

<!-- ol有序列表：order list -->
<!-- type属性：取值A a I i 1(默认值) -->
<!-- start属性：从几开始计数 -->
<ol><li>First Line</li><li>Second Line</li><li>Third Line</li>
</ol>

效果：

First Line
Second Line
Third Line

<!-- ul无序列表：unorder list -->
<!-- type属性：disc(默认)、square(方形)、circle(圆形) -->
<ul><li>First Line</li><li>Second Line</li><li>Third Line</li>
</ul>

效果：

First Line
Second Line
Third Line

<!-- dl定义列表:definition list -->
<dl><!-- dt定义标题:definition title --><dt>html</dt><!-- dd定义条目:definition description --><dd>标签</dd><dt>css</dt><dd>选择器</dd>
</dl>

效果：

html: 标签
css: 选择器

图形标签

<!-- <img />自闭合标签:src属性：指定图片的URL。alt属性：当图片无法加载时显示的提示信息。title属性：鼠标悬浮时显示提示信息。height属性：图片的高（单位是像素）（如果宽和高只指定一个，图片会按比例缩放）width属性：图片的宽。border属性：边框（单位是像素）usemap属性：将图片分区，每个区点了之后链接到不同的页面。 dw（不常用）
-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511849983184&di=a71f72def5bc9e741dd9b5d0ac2457a4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140622%2F0035035760337678_b.jpg" alt="唯美图片" title="flower" height="300px" width="900px"/>

效果：

表格标签

<!-- <table>表格<th>:table header 标题单元格align属性：对齐cellspacing：外边距 → 单元格和其他单元格（边框）之间的距离cellpadding：内边距 → 内容和单元格框线之间的距离<tr>:table row 表格中的一行<td>：table data cell 一行中的一个单元格colspan属性：横着占多少列rowspan属性：竖着占多少行
-->
<table border="1"><tr><th colspan="3">学生信息表</th></tr><tr><td>学号</td><td>姓名</td><td>年龄</td></tr><tr><td>001</td><td>苏娜</td><td>18</td></tr><tr><td>002</td><td>亚森</td><td>19</td></tr>
</table>

效果：

学生信息表
学号	姓名	年龄
001	苏娜	18
002	亚森	19

框架标签

<!-- 框架标签与<body>标签互斥（使用时需要把body标签删除掉）frameset标签：定义一个框架集。rows属性：定义框架集中行的数目和尺寸。cols属性：定义框架集中列的数目和尺寸。frame标签：定义 frameset 中的一个特定的窗口（框架）。src属性：指定显示页面的路径。noresize属性：不能调整框架大小。scrolling属性：是否显示滚动条yes no auto。frameborder属性：是否显示边框0（无边框）、1（有边框）。name属性：规定框架的名称。target属性用法：如果想在框架中指定在哪个框架页显示，那么该值填写框架名称。--><html><frameset cols="25%,50%,25%"><frame src="frame_a.htm" /><frame src="frame_b.htm" /><frame src="frame_c.htm" /></frameset></html>

锚（超链接）标签

<!-- <a>标签可定义锚(anchor),有两种用法：1. 通过使用 href 属性，创建跳转的超链接(格式：协议名+资源)；2. 通过使用 name 或 id 属性，在当前页面中跳转，例如：回到顶部 → 使用就是锚。步骤：1> 做一个锚标记，使用a标签的name属性指定锚点名称。2> 跳转到锚标记，使用href属性指定要跳转到的锚点。<a>标签中的属性:href属性：跳转的资源名或锚点名称。name属性：定义锚点时，指定锚点名称。target属性：针对资源跳转时使用。该属性不指定 → 在当前页面打开新的窗口。该属性值为_blank → 在空白页打开新的窗口。
-->
<a href="http://blog.csdn.net/" name="csdn">CSDN博客</a>

效果：

CSDN博客

表单标签

<!-- 将要提交的内容放入form标签中，1.action属性：决定表单提交到哪里。2.method属性：决定表单的提交方式，取值：get（默认值）/post。post提交和get提交的区别：1.post提交（http请求正文中）键值对没有在地址栏上，而get是放在地址栏上的。2.安全性上post更高一些。3.长度上：get因为是放到地址栏中，长度受限(2k),post理论上是无限的。 -->
<form action="" method="post"><table border="1" width="100%" cellspacing="15"><tr><td>用户名</td><!-- text 文本框 --><td><input type="text" id="username" name="username"></td></tr><tr><td>密码</td><!-- password 密码框 --><td><input type="password" id="password" name="password"></td></tr><tr><td>确认密码</td><td><input type="password" id="repassword" name="repassword"></td></tr><tr><td>性别</td><!-- radio 单选框 --><!-- 同一组单选项name值相同 --><td><input type="radio" name="sex" value="男">男<input
                        type="radio" name="sex" value="女">女</td></tr><tr><td>籍贯</td><!-- select标签：下拉选 --><td><select id="province" name="province"><option>-请选择-</option><option>北京</option><option>上海</option><option>广东</option></tr><tr><td>爱好</td><!-- checkbox 多选框 --><!-- 同一组多选框name值相同 --><td><input type="checkbox" name="hobby" value="篮球" />篮球 <input
                        type="checkbox" name="hobby" value="足球" />足球 <input
                        type="checkbox" name="hobby" value="排球" />排球 <input
                        type="checkbox" name="hobby" value="羽毛球" />羽毛球</td></tr><tr><td>邮箱</td><td><input type="text" id="email" name="email"></td></tr><tr><td>描述</td><!-- textarea标签：文本域 --><td><textarea rows="3" cols="20"></textarea></td></tr><tr><!-- submit 提交 --><!-- 用于提交表单内容 --><td colspan="2"><input id="regBut" type="submit" value="注册"></td></tr></table></form>
<!--input 标签的type属性还有：file → 文件上传hidden → 隐藏域（用于提交用户看不到的，必要的提交的内容）               reset → 重置（还原）image → 提交（图片，没用了）button → 按钮input 标签的name属性：对于需要提交的表单项：提交时键值对的键input 标签的value属性：1.对于需要提交的表单项：提交时的值2.对于按钮类型的：按钮上显示的文字。input 标签的readonly属性：1.只读属性，只是限制value属性的变化2.只能给：text和password使用。textarea也有这个属性input 标签的disabled属性：1.禁用。颜色变灰，不参与提交。2.使用范围，所有input都可以使用。input 标签的checked属性：1.默认被选中。2.只适用于：1 raido，2 checkboxinput 标签的maxlength属性：定义最大长度（只能放在text和password中）input 标签的size属性：定义输入框的显示长度（只能放在text和password中）select 标签：name 属性：下拉列表的名称：提交的键size 属性：下拉列表中可见选项的数目multiple 属性：可选择多个选项selected 属性：让option默认被选中。textarea 标签：name 属性：文本区的名称：提交的键col 属性：文本区内的可见宽度row 属性：文本区内的可见行数readonly 属性：文本区为只读注：该标签没有value属性
-->

meta标签

<!-- meta标签：属性定义了与文档相关联的名称/值对,网页元标签。 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 可以实现当前网页定时刷新或定时跳转 -->
<meta http-equiv="refresh" content="3;url=#" />
<!-- 可能对于进入搜索引擎的索引有帮助 -->
<meta name="keywords" content="#" />
<meta name="description" content="#" />

转义字符

&nbsp; → 空格
&gt; → 大于号
&lt; → 小于号
&trade; → ™商标
&copy; → ©版权
&reg; → ®已注册
&quot; → "引号

注：在html中，当属性的键和值完全一样时，可以忽略属性的值。

CSS部分

CSS的概念

CSS（Cascade Style Sheet）层叠样式表CSS 能够决定页面的样式，对网页的配色以及元素的布局进行精确控制。

CSS与html的结合方式

在标签上加入style属性

<!-- 属性值为CSS样式代码 -->
<p style="color: red;">aaa</p>

在页面的head标签中，书写一个style标签

<html><head><title></title><!-- 在style标签中书写css代码 --><style type="text/css">p{color: blue;}</style></head><body></body>
</html>

在页面head标签中填写link标签

<html><head><title></title><!-- type:mime类型   rel:类型    href:css文件路径(.css文件) --><link type="text/css" rel="stylesheet" href="#" /></head><body></body>
</html>

CSS的选择器

元素选择器

<!-- 语法：元素名称{属性键：属性值;}
-->
<style type="text/css">html {color:black;}h1 {color:blue;}
</style>
<body><h1>标题标签</h1>
</body>

ID选择器

<!-- ID属性唯一标识符，要确保页面当中id属性的唯一性语法：#ID{属性键：属性值;}
-->
<style type="text/css">#tb{background-color: red;}
</style>
<body>
<talbe id="tb"><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
</table>
</body>

类选择器

<!-- class属性可以随意重复语法：.class名称{属性键：属性值;}
-->
<style type="text/css">.tb{background-color: red;}
</style>
<body>
<talbe class="tb"><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
</table>
</body>

选择器分组

<!-- 语法：选择器1，选择器2...{属性键：属性值;}
-->
<style type="text/css">.t1,#t2{background-color: red;}
</style>
<body>
<talbe><tr id="t1"><td></td><td></td></tr><tr class="t2"><td></td><td></td></tr>
</table>
</body>

伪类选择器

<!-- 指的是选择的某个标签的某种状态。常见状态有4种，a标签最全:l   link      没有点击过的状态v   visited   访问过的状态h   hover     鼠标悬浮a   active    激活状态（鼠标点下去没有弹起）
-->
<style type="text/css">a:link {color: #FF0000;}       /* 未访问的链接 */a:visited {color: #00FF00;}   /* 已访问的链接 */a:hover {color: #FF00FF;}   /* 鼠标移动到链接上 */a:active {color: #0000FF;}   /* 选定的链接 */
</style>
<body><a href="#">a标签的不同状态</a>
</body>

CSS的基本语法

选择器｛属性键：属性值;属性键：属性值1 属性值2 ...;
｝注释：与java中多行注释相同      /*注释内容*/

CSS的常用属性

单位（了解）

颜色单位(color  units)#RRGGBB       rgb（R,G,B）      color name长度单位(Length units)em     ex     px像素（常用）     pt     pc     in     cm     mm单位换算：1in = 2.54cm = 25.4mm = 72pt = 6pc

字体属性

color  → 文字颜色
font-family → 文字样式
font-size → 文字大小
font-style → 文字样式（斜体）
font-weight → 文字加粗
font-variant → 异形字
font → 复合属性

背景属性

background-color → 背景色
background-image → 背景图
background-repeat → 图片重复
background-attachment → 背景定位
background → 复合属性

【JavaWeb学习笔记】之HTMLCSS相关推荐

JavaWeb学习笔记（十）--HttpServletRequest
1. HttpServletRequest简介 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中 2. Ht ...
JavaWeb学习笔记-目录（待完成）
JavaWeb学习笔记-目录(待完成) 01-基础加强(注解+反射) 02-mysql基础 03-mysql约束 04-mysql多表事务 05-jdbc 06-jdbc连接池JDBCTemplate ...
JavaWeb学习笔记2 —— Web服务器简介
JavaWeb学习笔记2 -- Web服务器简介参考教程B站狂神https://www.bilibili.com/video/BV12J411M7Sj 相关技术 ASP: 微软:国内最早流行的就是A ...
B站狂神说JavaWeb学习笔记
JavaWeb学习笔记(根据b站狂神说java编写) 1.基本概念 1.1 前言静态Web: 提供给所有人看数据不会发生变化! HTML,CSS 动态Web: 有数据交互,登录账号密码,网站访问人数 ...
JavaWeb学习笔记（5）-B站尚硅谷
文章目录十四.书城项目第三阶段--优化 (1)页面jsp动态化 (2)抽取页面中相同的内容 A.登录成功的菜单 B.base.css.jQuery标签 C.每个页面的页脚 D.manager模块的菜 ...
javaweb学习笔记2(jquery的使用，以及常用的方法，选择器，过滤器)
javaweb学习笔记2 javascript正则表达式 regfxp对象方式1: var putt=new RegExp("e");//表示要求字符串中必须包含字符串evar ...
【javaweb学习笔记】servlet-api，filter和Listener
javaweb学习笔记 1. servlet-api 1.1 servlet初始化 1.2 ServletContext和context-param 2. 什么是业务层 3. IOC 3.1 耦合/依 ...
【Javaweb学习笔记】在Eclipse中创建Web项目
[Javaweb学习笔记]在Eclipse中创建Web项目哈喽大家好,这里是Java框架学习笔记专栏第二期本期内容--在Eclipse中创建Web项目前期回顾: 第一期--schema约束笔者 ...
java web孤傲苍狼,JavaWeb学习笔记
我看的资料是孤傲苍狼的javaweb学习笔记,他写的真的很全,这或许就是社区力量吧!哪些问题不知道,上网搜一搜就有了,让自己不进步的敌人,只有懒惰了. 这是我接触JavaWeb的第二周,有一些自己的理 ...
JavaWeb学习笔记（动态SQL）
JavaWeb学习笔记(动态SQL) 动态SQL中的元素 < if>元素 < choose>.< when>.< otherwise>元素 < w ...

【JavaWeb学习笔记】之HTMLCSS