什么是HTML
“html”是“Hyper Text Markup Language”，即“超文本标记语言”，一种标记语言，是由一些标签组成，主要是用来制作网页的。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 开始和结束标签也被称为开放标签和闭合标签
- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
标签属性
- 通常是以键值对形式出现的. 例如 name="wood"
- 属性只能出现在 开始标签 或 自闭和标签中.
- 属性名字全部小写,属性值必须使用双引号或单引号包裹 例如 name="wood"
标签分类
标签一般分为两种：
1. 块级标签：一整行的标签。比如：<h>,<p>,<div>,<form>等
2. 行内标签：多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等
特殊字符
常用标签使用
<html>
<!--一个html标签中会存在head和body两个主要标签-->
<head>
<title>this is my first page</title>
</head>
<!--引用外部定义的css文件-->
<link rel="stylesheet" href="C:\Users\zemuerqi\Desktop\css.css" />
<!--用于进行描述一个网页中的文本内容-->
<body>
<!--color表示的是font标签的属性-->
<h1><font color="red">完成以下信息的注册</font></h1>
<a href="http://www.baidu.com">百度一下</a>
<!--定义一个表格-->
<table border="1" width="60%" align="center">
<tr>
<td class="left">id</td>
<td class="left">name</td>
</tr>
<tr>
<td>1</td>
<td class="bg-yellow8">张三</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
</tr>
</table>
<!--表单-->
<form>
<!--输入框、密码框-->
用户名：<input type="text" value="username"/><br/>
密码：<input type="password" /><br/>
验证码：<input type="text" /><img src="http://123.57.71.195:8787/index.php/home/seccode/makecode.html?1591430678772" /><br/>
<!--复选框、单选框、下拉列表框-->
兴趣：打LOL：<input type="checkbox" />
逛街：<input type="checkbox" /><br/>
性别：男：<input type="radio" name="sex" />
女：<input type="radio" name="sex"/><br/>
学历：<select>
<option>未选择</option>
<option>博士</option>
<option>本科</option>
<option>大专</option>
</select><br/>
<!--clos是定义文本区域的宽度，而row定义文字区域的高度-->
备注：<textarea clos="10" rows="6"></textarea><br/>
<!--按钮操作;按钮触发会存在事件;在web自动化测试中如果元素定位得到但是无法使用click方法的话，则还可以使用onclick事件进行执行-->
<input type="submit" value="提交" notallow="javascript:alert('确定提交？');"/>
<input type="reset" value="重置" />
<input type="button" value="确定" />
</form>
<!--块级标签-->
<div>
<h3>块级1</h3>
<p>这是第一个段落</p>
用户名：<input type="text" value="username"/><br/>
密码：<input type="password" /><br/>
</div>
<div>
<h3>块级2</h3>
<p class="bg-red">这是第二个段落</p>
用户名：<input type="text" value="username"/><br/>
密码：<input type="password" /><br/>
</div>
<!--ul和ol，其中ol标签标示的是有序列表，ul标示的是无序列表-->
<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
<ol>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ol>
<!--span是用于进行组合行内元素，便于格式化-->
<p><span>这是span标签</span></span></p>
<p><span>这是span标签</span></span></p>
<p><span>这是span标签</span></span></p>
</body>
<!--相比xml语法不是那么严格,结束标签丢失是不会影响整体页面，只需刷新即可加载最新页面-->
</html>CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }选择器：selector，需要改变样式的 HTML 元素，
声明：declaration1，一个属性和一个值组成。
属性：property，设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}如下：p是选择器，color 和 font-size 是属性，red 和 18px 是值。作用是将 p元素内的文字颜色定义为红色，同时将字体大小设置为 18 像素。
p {color:red; font-size:18px;}多重声明
每条声明的末尾都加上分号，从现有规则中增减声明时，会尽可能地减少出错的可能性。
p {text-align:center; color:green;}每行只描述一个属性，这样可以增强样式定义的可读性：
p {
text-align: left;
color: red;
font-family: arial;
}选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。如下：所有的标题元素进行了分组，所有的标题元素都是红色的。
h1,h2,h3,h4,h5,h6 {
color: red;
}id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
这是wood实现html的第一个html页面
</h1>
<p class="center">
以下相关标签的详细说明
</p>属性选择器
对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8及以上才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}属性和值选择器
下面的例子为 title="wood_programming" 的所有元素设置样式：
[title=wood_programming]
{
border:6px solid green;
}css示例
/*设定背景*/
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
span.highlight
{
background-color:yellow
}
/*设置文本颜色*/
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
/*设置字体大小、风格、格式*/
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
p.normal {font-style:normal}
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
/*设置边框样式、颜色*/
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
/*无序列表标记*/
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
/*下面表示 是table标签的tr第一个标签设定的css*/
table tr:nth-child(1) {color: #008000;font-size: 40px}
/*与上面是等价的*/
tr:first-child {background: green;font-size: 40px}
/*下面表示的是偶数行tr设定的css*/
tr:nth-child(2n) {color: gold}
