【开发者调试工具功能模块介绍】
查看器 用于查看或修改HTML元素的属性、CSS属性、监听事件
控制台 控制台一般用于执行一次性代码，查看JavaScript对象
网络 查看网络页面连接的相关信息
存储 存储Cookie信息
【HTML 表单】
表单：与服务器进行交互的框架，表单里有很多控件
<form> </form>
action 将数据提交到服务器的url
如果为空则提交到当前界面，也可以采用绝对路径和相对路径
method 提交方法
get 默认为get
post
enctype 编码
表单上传编码格式为：
application/x-www-form-urlencoded(默认值)
<input></input>
type 属性类型
password 密码框
text 文本框
radio 单选框
checkbox 多选框
checked 预选框
file 文件域
reset 重置按钮
submit 提交按钮
<select></select> 下拉框
<option><option> 下拉的选项
<textarea></textarea> 标签定义多行的文本输入控件。
【CSS 层叠样式脚本】
HTML、CSS都是前端的内容
HTML 地基公司
CSS 装修公司
将HTML与CSS分离
CSS样式
元素的内容的颜色 color
元素内容的背景色 background-color
字体大小 font-size
RGB颜色 [0-255]
白色 255 255 255 #ffffff
黑色 0 0 0 #000000
CSS与HTML进行组合的三种方式
1、内联方式
把样式表写在标签内部作为标签的style属性的属性值出现
使用内联方式，在标签内部加一个style属性，" "中写样式
格式：属性吗：值;属性名;值;
作用范围：仅针对于当前元素
<span style="font-size:116px;color:yellow">你好，世界</span>
2、内部样式
Class是类，以"."来命名
id代表标签的身份，以“#”开头命名
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout{border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY></HTML>
3、外部样式
CSS单独存放，后缀名为.css
需要<link>标签连接
"rel=stylesheet"，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始时将被使用
关于上文的知识来完成下面的实例
实例：
<!DOCTYPE html>
<html>
<head>
<title>黄泽鑫——注册界面</title>
<style type="text/css">
.demo {
width: 40px;
}
.div {
width:300px;
height:400px;
background-color:green;
}
#q {
height:500px;
background-color:#9AFF9A;
}
#textarea {
font-size: 20px;
}
</style>
<link rel="stylesheet" href="test.css" type="text/css" >
</head>
<body>
<center>
<form action="#" method="post" >
用户名：<input type="text" name="name"><br>
密码：<input type="password" name="password"><br>
再次输入密码：<input type="password" name="name"><br>
头像：<input type="file" name="phont"><br>
性别：<input type="radio" name="sex" value="1" checked="1">男
<input type="radio" name="sex" value="0">女<br>
爱好：<input type="checkbox" name="hobby" value="yd">运动
<input type="checkbox" name="hobby" value="lt">聊天
<input type="checkbox" name="hobby" value="wyx">玩游戏
<br>
出生日期：<input type="text" name="year" class="demo">年
<select>
<option>请选择月份</option>
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input type="text" name="day" class="demo">日
<br>
<input type="reset" name="reset">
<input type="submit" name="submit" value="同意以下服务条款，提交注册信息">
</form>
<!--内联方式-->
<span style="font-size: 165px;color: #7FFFD4">你好，世界</span> <br>
<!--内部方式-->
<span class="div">你好，2世界</span> <br>
<span id="q">你好，2.2世界</span> <br>
<!--内联方式-->
<ss>你好，3世界</ss> <br>
<textarea id="textarea">Practice makes perfect</textarea>
</center>
</body>
</html>
效果图：
颜色调用可看：
https://www.sojson.com/rgb.html
参考：
https://www.cnblogs.com/john568300/p/6396545.html
https://www.html.cn/qa/css3/12706.html
https://www.php.cn/css-tutorial-420782.html
https://www.cnblogs.com/iamspecialone/p/11172147.html
https://blog.csdn.net/LuLiangJun001/article/details/105868012