html表单和css的简单学习
用户投稿 学习笔记 7阅读
查看器 用于查看或修改HTML元素的属性、CSS属性、监听事件 控制台 控制台一般用于执行一次性代码，查看JavaScript对象 网络 查看网络页面连接的相关信息 存储 存储Cookie信息
【HTML 表单】表单：与服务器进行交互的框架，表单里有很多控件
<form> </form> action 将数据提交到服务器的url如果为空则提交到当前界面，也可以采用绝对路径和相对路径 method 提交方法 get 默认为getpost 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