学习笔记——HTML5&&CSS
一、学习重点
二、笔记内容
什么是HTML
HTML是用来描述网页的一种语言。
HTML叫做超文本标记语言（Hyper Text MarkerUp Language）
HTML不是编程语言，而是一种标记语言
标记语言就是一套标记标签
HTML使用标记标签来描述网页
网页由浏览器解析
IE
firefox火狐 flash中文
safari webkit 苹果
chrome webkit blink 谷歌（推荐）业界的标杆
Opera 手机端 blink
UC，360，QQ，搜狗，遨游，百度，2345
HTML标记标签通常称为HTML tag
HTML标签由成对出现的尖括号包围的关键词，比如<body>
HTML标签通常是成对出现的，有例外，比如<b></b>
标签对中第一个标签是开始标签，第二标签是结束标签
结束标签是由/结束的
开始和结束标签也被称为开放标签和闭合标签
什么是网页？
HTML文档描述的就是网页
HTML文档包含HTML的标签和纯文本
HTML文档就被称为网页
web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
浏览器不会显示HTML标签，而是使用HTML标签来解释页面的内容
HTML头部
head元素包含了所有的头部信息元素。
script,link,以及各种meta,title,base
<hr>
title:
定义了浏览器工具栏的标题
当网页被收藏到收藏夹，显示的默认标题
显示在搜索引擎结果页面的标题
<hr>
base:
描述了基本的链接地址/链接目录,作为HTML文档中所有的链接标签的默认链接
<br>
<a href="">哈哈</a>
<hr>
link:
引用css层叠样式表
<hr>
style:
定义css层叠样式表
<hr>
script:
既可以定义script脚本,也可以引用script文件。
不建议写在head里,写在body的最下方
<hr>
meta:元数据
指定网页的描述，关键词，文件的最后修改时间，作者。
可以定义搜索引擎的关键词
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body bgcolor="green"> <b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre> 池塘边的榕树下， 知了在声声叫着夏天。 </pre> <small>更小的文本</small> <strong>重要的文本</strong> <del>删除线</del> log<sub>5</sub> 2<sup>3</sup> = 8 <font color="green">我是font</font> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 超级链接 --> 普通的链接：<a href="http://www.baidu.com" target="_self">百度一下</a><br> 图像链接：<a href="http://www.baidu.com"><img width="150" src="img/libai.jpeg" alt="这是刺客李白" title="青莲剑仙"></a><br> 邮件链接：<a href="mailto:123456@qq.com">站长信箱</a><br> 锚记链接： <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="img/libai.jpeg" width="300" title="" alt="" align="bottom" border="1">后面的文本 </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>文档中的块级元素</div> <span>文档中的行级元素</span> <!-- 块级元素：自占一行，自带换行功能 div,h,p,form,ul,ol... 行级元素：自己没有换行功能 a,span,del,sub,sup,em,b,strong.... --> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 无序列表： <ul type="disc"> <li>项目1</li> <li>项目2</li> </ul> 有序列表 <ol type="I"> <li>项目1</li> <li>项目2</li> <li>项目3</li> <li>项目4</li> </ol> 自定义列表 <dl> <dt>项目1</dt> <dd>描述项目1</dd> <dt>项目2</dt> <dd>描述项目2</dd> </dl> </body> </html>
表格（行、列）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" cellpadding="10" cellspacing="0" width="400"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>联系方式</th> <th>毕业院校</th> <th>国籍</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>罗永浩</td> <td>13635412586</td> <td>延边第二中学</td> <td rowspan="4">中国</td> </tr> <tr> <td>1002</td> <td>罗翔</td> <td>13125693254</td> <td>北京大学</td> </tr> <tr> <td>1003</td> <td>樊登</td> <td>13326956541</td> <td>西安交通大学</td> </tr> <tr> <td>1004</td> <td>雷军</td> <td>15619851265</td> <td>武汉大学</td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> 备注：他们都是有一定能力的人。 </td> </tr> </tfoot> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <iframe src="https://www.sina.com.cn" height="600" width="400" frameborder="0"></iframe> <iframe src="https://www.sohu.com" height="600" width="400" frameborder="0"></iframe> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="" method="post"> <p> 账号：<input type="text"> </p> <p> 密码：<input type="password"> </p> <p> 性别： <input type="radio" name="gender">男 <input type="radio" name="gender" checked>女 </p> <p> 地址： <select> <option value="">请选择省</option> <option value="">吉林省</option> <option value="">北京市</option> </select> <select> <option value="">请选择市</option> <option value="">长春市</option> <option value="">北京市</option> </select> <select> <option value="">请选择区</option> <option value="">南关区</option> <option value="">西城区</option> </select> </p> <p> 爱好： <input type="checkbox" checked>读书 <input type="checkbox">游泳 <input type="checkbox" checked>跑步 </p> <p> <textarea cols="30" rows="10"></textarea> </p> <p> 邮箱：<input type="email"> </p> <p> 薪水：<input type="number"> </p> <p> 头像：<input type="file"> </p> <p> 颜色：<input type="color"> </p> <p> 电话：<input type="tel"> </p> <p> 隐藏：<input type="hidden"> </p> <p> <!-- <input type="submit"> <input type="reset"> <input type="button" value="自定义按钮"> --> <button type="submit">注册</button> <button type="reset">重写</button> <button type="button">自定义</button> <!-- 我们项目的要求： 如果有form，用input 如果没有form，用button --> </p> </form> </body> </html>
CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- action：数据的提交后台地址 method：数据的提交方式 get：默认值，会把所有要提交的数据拼接在地址栏 post：封装一个请求体，把数据提交给后台，不会拼接在地址栏 --> <a href="aaa?gender=on&username=admin">a标签</a> <form action="aaa" method="post"> <p> <!-- readonly和disabled区别： readonly可以提交到后台的 disabled是不可以提交到后台的 --> 账号：<input type="text" name="username" maxlength="12" placeholder="用户名为6-12位"> </p> <p> 密码：<input type="password" name="password" placeholder="密码必须是6位"> </p> <p> 性别： <input type="radio" name="gender" value="男" id="man"> <label for="man">男</label> <input type="radio" name="gender" checked value="女" id="women"> <label for="women">女</label> </p> <p> 地址： <select name="sheng"> <option value="0">请选择省</option> <option value="吉林省">吉林省</option> <option value="北京市">北京市</option> </select> <select name="shi"> <option value="0">请选择市</option> <option value="长春市">长春市</option> <option value="北京市">北京市</option> </select> <select name="qu"> <option value="0">请选择区</option> <option value="南关区">南关区</option> <option value="西城区">西城区</option> </select> </p> <p> 爱好： <input type="checkbox" value="reading" checked>读书 <input type="checkbox" value="swimming">游泳 <input type="checkbox" checked value="running">跑步 </p> <p> <textarea cols="30" rows="10" name="desc"></textarea> </p> <p> 邮箱：<input type="email" name="email"> </p> <p> 薪水：<input type="number" name="salary"> </p> <p> 电话：<input type="tel" name="tel"> </p> <p> 隐藏：<input type="hidden" name="hidden" value="hidden_value"> </p> <p> <button type="submit">注册</button> <button type="reset">重写</button> <button type="button">自定义</button> </p> </form> </body> </html>
实体Entity（转义字符）
李白乘舟将欲行， 忽闻岸上踏歌声， 桃花潭水深千尺， 不及汪伦送我情。
空格
& and符号
< 小于号
> 大于号
© 版权号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 1999年HTML4.01里程碑版本，在HTML4.01中的几个标签已经被废弃，这些元素在HTML5里有的被删除了，有的被重新定义。HTML5在2012年稳定的版本。 H5新增： 画布，多媒体，重力感应，地图，websocket。 --> <!-- 定义音频内容 --> <audio src="123.mp3" autoplay controls></audio> <!-- 定义视频内容 --> <video src="123.mp4" autoplay controls></video> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co ntent="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- HTML5 浏览器兼容性 IE9之前几乎不支持H5 --> <!-- <video src="123.mp4"></video> <video width="" height=""> <source src=""> </video> <audio> <source src=""> </audio> --> <input type="date"> <input type="time"> <input type="datetime"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="aaa"> <input type="text" autofocus required> <!-- <input type="image" height="20" src="../img/libai.jpeg"> --> <br> <input type="number" step="100" min="1000" max="6000"> <input type="text" pattern="[A-Za-z]{3}" placeholder="请输入英文字符"> <input type="submit"> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 2.内联样式 --> <style> h1 { background-color: green; } span{ background-color: yellow; } </style> <!-- 3.外部样式 --> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 什么是css？ html提供了布料，css上色。 CSS层叠样式表 定义如何显示HTML元素--样式 样式通常存储在样式表中 把样式表添加到HTML中，内容与表现分离（样式和结构分离） 外部样式表可以极大提高工作效率。 外部样式表通常存储在css文件中 --> <!-- 1.行内样式 --> <p style="background-color: red;">我是P标签</p> <h1>我是h1标签</h1> <span>我是span标签</span> <a href="#">我是超级链接</a> </body> </html>
CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 类选择器 */ .fontStyle { color: red; font-size: 20px; } .backgroudStyle { background-color: yellow; } /* id选择器，每个标签元素的id是唯一不能重复 */ #fontStyle2 { color: blue; font-size: 30px; } /* 标签选择器 */ p { font-family: "仿宋"; } /* 通配符，全部选择器 页面初始化 */ * { margin:0; padding: 0; } /* 组合选择器 */ h1,div { font-size: 50px; } /* 后代选择器 */ div p { background-color: red; } /* 子选择器 */ div>p { color: blueviolet; } /* 紧跟着div的p元素 */ div + p{ background-color: pink; } /* 属性选择器 */ input[name]{ height: 100px; font-size: 50px; } input[name=username] { color: red; } </style> </head> <body> <input type="text" name="username"> <input type="password" name="password"> <!-- CSS选择器 选择你想要的元素 --> <!-- 在使用类选择器选择css样式时，可以选择多个，中间用空格隔开即可 --> <p class="fontStyle backgroudStyle">我爱你中国！</p> <p id="fontStyle2">我爱你长春！！！</p> <h1>我是h1标签</h1> <div>我是div标签</div> <div> 我是div <p>我是div里的p</p> <span> <p>我是div里的span里的p</p> </span> </div> <p>我是div后面的p</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style> /* 初始状态 */ a:link { color: red; } /* 鼠标悬停 */ a:hover { color: green; } /* 激活状态 */ a:active{ color: black; } /* 访问过的 */ a:visited { color: yellow; } /* 获得焦点 */ input:focus { height: 100px; font-size: 50px; } </style> </head> <body> <a href="2">超级链接</a> <input type="text"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img:hover { width: 400px; border: 1px red solid; } </style> </head> <body> <img src="../img/libai.jpeg" width="100"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p::first-letter { color: red; } </style> </head> <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut error reprehenderit est ipsam voluptatem, expedita, ipsa exercitationem accusamus amet, temporibus deserunt tempore nobis? Cupiditate libero repudiandae neque quaerat, incidunt dolore.</p> </body> </html>
浙公网安备 33010602011771号