HTML5、CSS初体验
学习笔记，如有错误，希望尽快在评论区指出，不胜感激。
仅适用于初学者，部分内容HTML5中不支持，不赞成使用。
参考教程 菜鸟教程. bilibili.
一、 HTML
网页结构编写（超文本标记语言: HyperText Markup Language）
实例
<!DOCTYPE>// 声明为 HTML5 文档
<html>// 元素是 HTML 页面的根元素
<head>
<meta charset="UTF-8">//声明编码，否则会出现乱码
<title>页面标题</title>
</head>
<body>只有<body>//区域才能显示再网页中
<h1>我的第一个标题</h1>//标题标签h1~h6
<p>我的第一个段落。</p>//段落标签，自动换行切行之间间距更大
</body>
</html>
//注：注释格式是错误的，正确格式 <!--注释-->1、基本标签
基础标签及其属性、作用
注：提及标签有部分标签H5 已废弃
已废弃：已废弃的元素或者属性意味着它已经过时。废弃的元素在以后将会过时，但是浏览器会继续支持已废弃的元素。
文件标签
<html> html文档的根标签
<head> 头标签。指定html文档的一些属性，引入外部的资源
<title> 标题标签
<body> 体标签
<!DOCTYPE> 声明为 HTML5 文档 文本标签
<h1>~<h6> 主题标签，由大到小
<p> 段落标签，自动换行切行之间间距更大
<br> 换行标签
<hr> 展示一条水平线。
<b> 字体加粗
<i> 字体斜体
<font> 字体标签（淘汰）
*属性：size、color、face字体
color：rgb(a,b,c) a、b、c表示红绿蓝占比0~255
#abc 00~FF 例 #FF00FF
图像标签
<img> 图像标签
*主要属性 src:规定显示图像的 URL(统一资源定位符)，可以是图片相对路径，图片网络地址
* align:规定如何根据周围的文本来排列图像,值:"top,bottom,middle,left,right"(H5不支持)
* alt：规定图像的替代文本，图像显示错误时，提示用户图像内容显示的字。
//可套用<a>超链接标签列表标签
//有序列表
<ol> //标签定义了一个有序列表. 列表排序以数字来显示。
*属性 type规定列表类型，及1、2、3或A、B、C,值"1,A,a,I,i"
//无序列表
<ul>//标签定义无序列表。
*属性 type列表的项目符号的类型 值"disc,square,circle"分别显示为“原点，方块，圆圈”注：HTML5 不支持。HTML 4.01 已废弃。
<li> //标签来定义列表选项。
例
<ul type="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
链接标签
<a>定义一个超链接
*属性 href:指定访问资源的URL(统一资源定位符)
* target:指定打开资源方式
*_self：默认值，在当前页面打开
*_blank: 在空白页面打开块标签
<div>每一个div占满一整行
*常与属性class进行格式控制
<span>文本信息在一行展示，行内标签，内联标签语义化标签
*提高代码可读性，与css控制样式
<header>
<footer>
...表格标签
<table> 定义表格
<tr> 定义行
<td> 定义单元格
*可用<td><img></img></td>实现对图片格式控制
<th> 定义表头单元格，对样式没有影响
*属性 rowspan行个数，colspan列个数,用于合并单元格
<caption> 表格标题
//与css控制样式，提高代码可读性，对样式无影响，但是标签位置改变不影响最后格式。
<thead> 表示表格头部分
<tbody> 表示表格体部分
<tfoot> 表示表格脚部分
*样例
<table>
<caption>标题</caption>
<thead>
<!-- 表头-->
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
</thead>
<tbody>
<!-- 表体-->
<tr>
<!-- <td></td>-->
<td></td>
</tr>
</tbody>
<tfoot>
<!-- 标尾-->
<tr>
<td colspan="2"></td>
<!-- <td></td>-->
</tr>
</tfoot>
</table>2、表单标签
<form> 定义表单，采集用户数据
*属性
*action:指定提交数据的URL
*method:指定提交方式（共7种，常用两种）
get:1、请求会在地址栏中显示，会封装在请求体中。
2、请求参数大小有限
3、不安全
post:1、请求不会再地址栏中显示。会封装在请求体中。
2、参数大小没有限制
3、较为安全
*表单数据想被提交，必须指定name属性表单项标签
*input标签:可以通过type属性，改变元素展示的样式
*type属性：
*text:文本输入
*passworld:密码框输入，隐藏输入内容
*color:取色器
*date、datetime-local:选择时间
*email:邮箱输入框，规定输入格式
*number:数值输入框
*radio:单选框
*注：1、想让单选框实现但是选效果，name属性值必定相等
2、一般会给单选框提供value属性，指定选中后提交的值。
3、checked属性指定默认值
*file:文件选择框
*hidden：隐藏域，不会显示但会提交数据。
*checkbox:复选框
*注：1、提供value属性
2、checked属性指定默认值
*button:按钮，以后学js以前使用
*image:图片按钮，提交表单数据
*src属性指定图片路径
*submit:提交表单
*select标签:下拉列表
*option标签：单选项
*属性：selected默认选择
*注：一般用value属性保证提交的值
例：
<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2" selected >济南</option>
</select>
*label标签:
*label的for属性一般会和 input 的 id 属性值对应。对应及点击label区域，会让input输入框获取焦点。及点击跳转到输入框
*textarea标签:文本域
*属性cols列宽，一行的字符数。 ws行高，默认多行。
二、CSS：页面美化布局控制
概念：Cascading Style Sheets 层叠样式表> *层叠：多个样式也以作用在同一HTML的元素上
好处：1、功能强大
2、将内容与样式控制分离
*降低耦合度（分工协作）
*提高开发效率
css的使用：css与html结合方式
1、内联样式
*在标签内使用style属性指定css代码
*如：<div style="color:red;">红色</div>
*不常用2、内部样式
*在head标签内定义style标签
*如：div{
color:blue;
}3、内部样式
*定义css资源文件
*在head标签内定义link标签，引入外部资源文件
*如：a.css文件：
div{
color:green:
}
html文件：
<link rel="stylesheet" href="css/a.css">
或
<style>
@import "css/a.css";
</style>基础选择器
1、id选择器：选择具体的id属性元素，建议一个html页面中id值唯一
*语法：#i的属性值{}
2、元素选择器：选择具有相同标签名称的元素
*语法：标签名称{}
*注意：id选择器优先级高于元素选择器
3、类选择器：选择具有相同class属性值的元素
*语法：.class属性值{}
*注意：类选择器优先级高于元素选择器扩展选择器
1、选择所有元素：
*语法：*{}
2、并集选择器：
*语法：选择器1,选择器2{}
3、子选择器：筛选选择器1元素下的选择器2元素
*语法：选择器1 选择器2{}
4、父选择器：筛选选择器2的父元素选择器1
*语法：选择器1 > 选择器2{}
5、属性选择器：选择元素名称，属性名=属性值的元素
*语法：元素名称[属性名="属性值"]{}
6、伪类选择器：选择一些元素具有的状态
*语法：元素:状态{}
*如：<a>
*状态：
*link:初始化的状态
*visited:被访问的状态
*active:正在访问的状态
*hover:鼠标悬浮状态例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样例</title>
<style>
p{
color: #FFD026;
}
div > p{
border: 1px solid;
color: red;
}
div div{
color: aqua;
}
div input[type="text"]{
border: 5px solid;
border-radius: 5px;
}
a:link{
color: red;
}
a:visited{
color: pink;
}
a:active{
color: #0cf5ff;
}
a:hover{
color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>样例div>p</p>
<div>样例div>div</div>
</div>
<p>样例p</p>
<div>
<input type="text"></input>
</div>
<a href="aaaaa.html">注册界面</a>
</body>
</html>属性
1、字体文本
* font-size：字体大小
* color：文本颜色
* text-align：对齐方式
* line-height：行高
2、背景
* background：背景图片
* 例：background: url("") no-repeat center;//图片不重复，居中
3、边框
* border：设置边框属性
* border-radius：边框半径
4、尺寸
* width：宽度
* height：高度
5、盒子模型（与div合用）具体应用才会理解
* 内外边距是相对的
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子大小
* 用box-sizing: border-box; 固定盒子大小成果展示
道路很远，还需心向远方。
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="../CSS/a.css">
<!-- <style>-->
<!-- @import "../CSS/a.css";-->
<!-- </style>-->
</head>
<body id="web_bg" style="background-image: url(https://photo.16pic.com/00/15/98/16pic_1598736_b.jpg);">
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="post">
<table >
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></input></td>
</tr>
<tr>
<td class="td_left"><label for="passworld">密码</label></td>
<td class="td_right"><input type="passworld" name="passworld" id="passworld" placeholder="请输入密码"></input></td>
</tr>
<tr>
<td class="td_left"><label for="email">邮箱</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></input></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></input></td>
</tr>
<tr>
<td class="td_left"><label for="phnumber">手机号</label></td>
<td class="td_right"><input type="number" name="phnumber" id="phnumber" placeholder="请输入手机号"></input></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="sex" value="male">男</input>
<input type="radio" name="sex" value="female">女</input>
</td>
</tr>
<tr>
<td class="td_left"><label>生日</label></td>
<td class="td_right"><input type="date" name="brithdata" id="brithday"></input></td>
</tr>
<tr>
<td colspan="2" align="center" ><input id="btn_sub" type="submit" value="登陆"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有帐号？<a class="text_submit" href="#">立即登陆</a></p>
</div>
</div>
</body>
</html>
css文件
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
margin: auto;
margin-top: 15px;
}
.rg_left {
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color: #A6A6A6;
font-size: 20px;
}
.rg_right {
float: right;
margin: 15px;
}
.rg_right > p a{
color: pink;
}
.rg_center {
float: left;
width: 450px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#phnumber,#passworld,#name,#email,#brithday{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
.rg_form{
padding-top: 50px;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
margin: auto;
}转载：https://blog.csdn.net/likesomething/article/details/101934099
查看评论