2022-08-22 吉林化工学院 第五组 韩嘉宁
作者：互联网
HTML
目录
HTML概念及特点
- HTML是用来描述网页的一种语言。
- HTML是超文本标记语言（Hyper Text Markerup Language ）,不是编程语言。
- 标记语言就是一套标记标签。
- HTML使用标记标签来描述网页。
HTML标签
- HTML标记标签通常称为HTML Tag
- HTML标签有成对出现的尖括号包围的关键词
- HMTL通常成对出现，如
- 开始和结束标签也称为开放标签和闭合标签
网页
- HTML文档描述的就是网页
- HTML文档包含HTML的标签和纯文本
- HTML文档被称为网页
HTML头部
HTML头部head元素包含了所有的头部信息（script ,link,以及各种meta，title，base）。
web浏览器的作用是读取HTML文档，并以网页的形式显示出他们，浏览器不会显示HTML标签，而是使用HTML标签来展示页面的内容
title
（1）浏览器工具栏中的标题
（2）当网页被收藏时，显示默认标题
（3）显示在搜索引擎结果界面的标题
base
描述了基本的链接地址/链接目录，作为HTML文档中的所有链接
link
引用css样式表
style
定义css层叠样式表
script
既可以引用script脚本，也可用script文件
建议写在body内最下方，不建议写在head中
meta（元数据）
指定网页描述，关键词，文件的最后修改时间，作者
可以定义搜索引擎的关键词
元素分类
块级元素(自占一行，有换行功能)
div ,h,p,form,ul(无序)，ol（有序）.........
<div>文档中的块级元素</div>
行级元素（自己没有换行功能）
a, span , del , sup , sub , strong
<span>文档中的行级元素</span>
列表
有序（ol）
无序（ul）
自定义列表(dl)
表格
| 关键词 |
|---|
| tr : 行 |
| td : 列 |
| th : 表头 |
点击查看代码
<!-- 表格 -->
<table border="1" cellpadding="10内边距" width="1100" cellspacing="0单元格边距">
<thead>
<tr>
<th >学号</th>
<th>姓名</th>
<th>联系方式</th>
<th>毕业院校</th>
<th >国籍</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>罗永浩</td>
<td>13523142421</td>
<td>延边第二中学</td>
<td rowspan="3">中国</td>
</tr>
<tr>
<td>1002</td>
<td>罗翔</td>
<td>13125691131</td>
<td>北京大学法学院</td>
</tr>
<tr>
<td>1003</td>
<td>樊登</td>
<td>15521256672</td>
<td>西安交通大学</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="center">他们都是有钱人</td>
</tr>
</tfoot>
</table>
效果如下：
表单
<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">女
</p>
<p>地址:
<select multiple --多选>
<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">读书
<input type="checkbox">游泳
<input type="checkbox" checked>打扑克
</p>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>邮箱:
<input type="email" name="" id="">自带验证功能
</p>
<p>数字
<input type="number" name="" id="">
</p>
<p>头像
<input type="file" name="" id="">
</p>
<p>隐藏
<input type="hidden" name="" id="">
</p>
<p>
<input type="submit" value="自来也">
<input type="reset" name="" id="">
<input type="button" value="卡卡西">
<button type="submit">提交</button>
<button type="button">自定义</button>
<button type="reset">重置</button>
</p>
</form>
HTML5 与 HTML4及之前的区别
-
- 在HTML5中废弃了HTML4中的一些标签
-
- 自2012年成为稳定版本，且新增: 地图 、重力感应、画图 、画布
-
- HTML5相对于之前增加了离线缓存机制
CSS
基本概念
CSS为层叠样式表，用于修饰html结构
- 定义如何显示HTML元素——样式
- 样式通常存储在样式表中，把样式表添加到HTML中，内容与表现分离（样式和结构分离）
- 外部样式表可以极大提高工作效率
- 外部样式通常存储在css文件中
CSS选择器
基础选择器
类选择器
标签选择器
id选择器
通配符选择器
后代选择器
组合选择器
属性选择器
/* 类选择器可以选择多个用空格隔开 */
.fontstyle{
color: red;
font-size: 20px;
}
.backcolor{
background-color: aqua;
}
/* id选择器 每个标签元素的id是唯一的不能重复*/
#dd{
color: blue;
font-size: 30px;
}
/* 标签选择器 */
p{
font-family: "仿宋";
}
/* 通配符,全部选择器 页面初始化*/
*{
margin: 0;
padding: 0;
}
/* and 组合选择器 */
h1,div{
font-size: 100px;
}
/* 后代选择器 */
div p{
background-color: red;
}
/* 子选择器 */
div>p{
background-color: aqua ;
}
/* 紧跟着div的p元素 */
div+p{
background-color: pink;
}
/* 属性选择器 */
input[name]{
color: red;
width: 1000px;
font-size: 50px;
}
input[name=username]{
color: blue;
}
伪类选择器
a{
color: red;
}
/* 初始状态 */
a:link{
color: blueviolet;
}
/* 激活状态 */
a:active{
color: aqua;
}
/* 鼠标悬停状态 */
a:hover{
color: greenyellow;
}
/* 访问过的状态 */
a:visited{
color: black;
}
img:hover{
width: 200px;
}
p::first-letter{
color: red;
}
感悟：可以说是温故而知新，之前学习过的知识趁此机会巩固了一下，以前不太熟悉的知识也经此机会有所提升。尤其是在CSS选择器这一块，从以前不熟悉达到掌握程度。继续努力！
标签：网页,22,color,标签,08,HTML,第五组,选择器,CSS 来源： https://www.cnblogs.com/WorkerHevien/p/16614004.html