什么是HTML
- HTML是用来描述网页的一种语言
- HTML叫做超文本标记语言(Hyper Text MarkerUp Language)
- 标记语言就是一套标记标签
- HTML使用标记标签来描述网页
网页由谁来解析
- 浏览器
- IE
- Firefox火狐浏览器
- safari 苹果
- Chrome 谷歌 -----业界标杆
- Opera浏览器
HTML标签
- HTML标记标签通常称为 HTML tag
- HTML标签由成对出现的尖括号包围的关键词，比如
- HTML标签通常是成对出现的，有例外，比如
- 标签对中第一个标签是开始标签，第二个标签是结束标签，结束标签是由/结束的
- 开始和结束标签也被称为开放标签和闭合标签
标题标签由h1-h6构成,超过这个范围则输出为普通文本
什么是网页
- HTML文档描述的就是网页
- HTML文档包含HTML的标签和纯文本
- HTML文档就被称为网页
Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们
浏览器不会显示HTML标签，而是使用HTML标签来显示网页的内容
HTML头部
head元素包含了所有的头部信息元素
- title：定义了浏览器工具栏的标题，当网页被收藏到收藏夹，显示的默认标题，显示在搜索引擎结果页面的标签
- base：描述了基本的链接地址/链接目录，作为HTML文档中所有的
- link：引用css层叠样式表
- style：定义css层叠样式表
- script：既可以定义script脚本，也可以引用script文件。不建议写在head里，写在body的最下方
- meta：元数据；指定网页的描述，关键词，文件的最后修改时间，作者。可以定义搜索引擎的关键词
HTML标签组成
- 段落标签h1--h6
<h1>最大的标题h1</h1>
<h2>最大的标题h2</h2>
<h3>最大的标题h3</h3>
<h4>最大的标题h4</h4>
<h5>最大的标题h5</h5>
<h6>最大的标题h6</h6>
<h7>我是h7</h7> //如果超过了范围则会输出普通文本
- 段落标签
<p>我的第一个段落</p>
- 普通文本
我是一个普通的文本
- 水平分隔符
<hr>
- 换行符
<br>
- 注释
<!-- 注释 -->
- 图像链接
<img src="img/libai.jpeg" width="300" title="" alt="" align="bottom" border="1">后面的文本
<!-- align="bottom"：把图像与底部对齐 -->
- 其它
<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>
超级链接
- 普通的链接
<a href="http://www.baidu.com" target="_self">百度一下</a><br>
<!-- taeget中的取值
1、_blank：在新窗口打开
2、_self：默认，在相同的框架打开
3、_top：在整个窗口中打开
-->
- 图像链接
<a href="http://www.baidu.com"><img width="150"
src="img/libai.jpeg" alt="这是刺客李白" title="青莲剑仙"></a>
<!--
点击图片进入对象网站
src处输入图片的位置
alt图片加载不成功时的提醒
title鼠标悬停在图片时的提醒
-->
- 邮件链接
<a href="mailto:[email protected]">站长信箱</a>
- 锚记链接
<a id="tips">提示部分</a>
<a href="#tips">跳到提示不分</a>
块级元素
块级元素：自占一行，自带换行功能
div,h,p,form,ul,ol...
行级元素
行级元素：自己没有换行功能
a,span,del,sub,sup,em,b,strong....
无序列表
<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>
表格
<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>
<!--
cellpadding 设置单元格内容与单元格边框之间的空白距离（内间距）
cellspacing 设置单元格与单元格边框之间的空白间距
border="1" 规定表格单元是否拥有边框 （1代表有）
-->
内联框架
<iframe src="https://www.sina.com.cn" height="600" width="400"
frameborder="0"></iframe>
表单
<!--
action：数据的提交后台地址
method：数据的提交方式
get：默认值，会把所有要提交的数据拼接在地址栏
post：封装一个请求体，把数据提交给后台，不会拼接在地址栏
disabled和readonly的区别？
1、作用范围不同：disabled属性可以用于所有的表单元素；readonly属性只对input(text / password)和textarea有效
2、对元素的影响程度不同：disabled属性阻止对元素的一切操作；readonly属性只是将元素设置为只读，其他操作正常
3、表单提交：disabled属性可以让表单元素的值无法被提交；readonly属性则不影响提交问题
-->
<form action="" method="post">
<p>
账号：<input type="text"> <!--文本框-->
</p>
<p>
密码：<input type="password"> <!--密码框-->
</p>
<p>
性别：
<input type="radio" name="gender">男 <!--单选框 checked：默认-->
<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="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>
<!--submit：提交 reset：重置 button：自定义 -->
<!--
我们项目的要求：
如果有form，用input
如果没有form，用button
-->
</p>
</form>
<form action="aaa">
<input type="text" autofocus required>
<input type="image" height="20" src="./img/baidu.png">
<br>
<input type="number" step="100" min="1000" max="6000">
<input type="text" pattern="[A-Za-z]{3}" placeholder="请输入英文字符">
<input type="submit">
</form>
<!--
autofocus 自动聚焦
required 必须填写
min 最小取值
max 最大取值
step 设置每次添加量
pattern 设置输入值的类型和数量
placeholder 提示的文字
-->
实体Entity（转义字符）
空格
& &符号
< 小于号
> 大于号
© 版权号
HTML4与HTML5之间的关系
- HTML4.01中的几个标签已经被废弃，这些元素在HTML5里有的被删除了，有的被重写定义
- HTML5新增：画布，多媒体，重力感应，地图
- HTML5 浏览器兼容性 IE9之前几乎不支持H5
音频标签
新：<audio src="123.mp3" autoplay controls></audio>
<!--
autoplay ：自动播放
controls：显示播放插件
-->
旧：<audio>
<source src="">
</audio> -->
视频标签
新版本：<video src="123.mp4" autoplay controls></video>
旧版本：<video >
<source src="">
</video>
什么是CSS
- html提供了布料，css上色
- CSS层叠样式表
- 定义如何显示HTML元素--样式
- 样式通常存储在样式表中
- 把样式表添加到HTML中，内容与表现分离(样式和结构分离)
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在css文件中
css文本的链接方式
-
行内样式
-
<p style="background-color: red;">我是P标签</p>
-
-
内联样式
-
写在head内
-
<head> <style> h1 { background-color: green; } span{ background-color: yellow; } </style> </head>
-
-
外部样式
-
创建了一个.css文件，在head里连接
-
<head> <link rel="stylesheet" href="css/style.css"> </head>
-
CSS选择器
<style>
/* 类选择器 */
.fontStyle {
color: red;
font-size: 20px;
}
.backgroudStyle {
background-color: yellow;
}
</style>
<!--
CSS选择器
选择你想要的元素
-->
<!-- 在使用类选择器选择css样式时，可以选择多个，中间用空格隔开即可 -->
<p class="fontStyle backgroudStyle">我爱你中国！</p>
/* id选择器，每个标签元素的id是唯一不能重复 */
#fontStyle2 {
color: blue;
font-size: 30px;
}
</style>
<p id="fontStyle2">我爱你长春！！！</p>
<style>
/* 标签选择器 */
h1 {
font-family: "仿宋";
}
</style>
<h1>我是h1标签</h1>
<style>
/* 通配符，全部选择器
用于：页面初始化
*/
* {
margin:0;
padding: 0;
}
</style>
<style>
/* 组合选择器 */
h1,div {
font-size: 50px;
}
</style>
<style>
/* 后代选择器 */
div p {
background-color: red;
}
</style>
<style>
/* 子选择器 */
div>p {
color: blueviolet;
}
</style>
<style>
/* 紧跟着div的p元素 */
div + p{
background-color: pink;
}
</style>
<style>
/* 属性选择器 */
input[name]{
height: 100px;
font-size: 50px;
}
input[name=username] {
color: red;
}
</style>
<input type="text" name="username">
<input type="password" name="password">
伪类选择器
<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>