列表
无序列表
|
<!--无序列表--> <ul> <li>长征脚步，从未停歇</li> <li>传承红色基因</li> <li>"小"降准"大"意义 支持实体经济向好。效力显著</li> </ul> |
有序列表
|
<!--有序列表--> <ol> <li>中国的长征脚步，从未停歇</li> <li>传承红色基因 </li> <li>"小"降准"大"意义 支持实体经济向好。效力显著</li> </ol> |
之所以有区别，是因为浏览器给到了不一样的默认样式
表单标签
form表单标签
action:将表单数据提交给什么服务器（服务器的地址）
method:get/post
get和post区别：get会将表单提交的内容直接放在请求的URL地址里，效率高，不安全。post不会将表单数据显示到url上，会放置在请求的body上。
搜索/正常的请求就会使用get
登陆/注册等比较隐私和安全的内容时候，就需要用到POST,上传文件的时候也会用到post
input标签有多种类型
type=》
text（文本输入）
password(密码)
radio:单选框，注意单选框如果选择的内容是同一项内容，那么多个输入input标签的name值必须一致。
checkbox:复选框，选择的内容是同一项内容，那么多个输入input标签的name值必须一致
color:输入颜色（少用）
date:时间标签（少用）
select>option
textarea：长文本输入标签
|
案例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> 用户名： <input type="text" name="user" id="" value="" /> <hr /> 密码： <input type="password" name="passwd" id="" value="" /> <hr /> <h3>性别选择</h3> 男 <input type="radio" name="gender" id="" value="boy" /> 女 <input type="radio" name="gender" id="" value="girl" /> <hr /> <h3>请输入你们喜欢的明星</h3> 郭敬明 <input type="checkbox" name="stars" id="" value="gjm" /> 蔡徐坤 <input type="checkbox" name="stars" id="" value="cxk" /> 吴亦凡 <input type="checkbox" name="stars" id="" value="wyf" /> <hr /> <h3>请输入你喜欢的颜色</h3> <input type="color" name="color" id="" value="" /> <hr /> <h3>请输入你的生日</h3> <input type="date" name="birthday" id="birthday" value="" /> <hr /> <h1>请自我介绍一下</h1> <textarea name="brief" rows="20" cols="100"></textarea> <hr /> <h3>选择你喜欢的城市</h3> <select name="city"> <option value="shenzhen">深圳</option> <option value="guangzhou">广州</option> <option value="shanghai">上海</option> <option value="beijing">北京</option> </select> <input type="submit" value="注册"/> </form> </body> </html> |
css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS使用
1、style属性上直接使用
|
<h1 style="color:purple;">今晚吃什么？</h1> <h1 style="color: greenyellow;">吃鸡</h1> |
2、Style标签上使用
语法：
|
<style type="text/css"> 选择器{样式的内容} </style> |
CSS常用选择选择器：
元素选择器：元素名称
Class选择器：.+类名
ID选择器：#+id名称
3、Link标签引入css文件使用
|
<link rel="stylesheet" type="text/css" href="css/style.css"/> |
优先级情况
元素内style属性的优先级>id>class>元素>默认的浏览器样式>继承的样式
越复杂的选择器优先级越高
备注：!Important,将样式的优先级提高到最高
文字
Color:文字颜色
Font-size:文字的大小
font-family:文字字体，尽量使用黑体，微软雅黑，宋体，普通用户都有的字体
Font-weight:字体粗细,100-900,具体的粗细根据字体文件本身有什么粗细的字体来决定
Text-align:文字的排版，left,center,right
Line-height:行高，行与行之间的高度
Text-shadow:文字阴影
|
text-shadow: 0 0 10px orange,0 0 20px yellow; Text-shadow:水平偏移值 垂直偏移值 阴影的模糊度 阴影的颜色，设置多个阴影用逗号隔开 |
容器盒子
Box-size:设置盒子模型
Width:宽度
Height:高度
Padding:内边距
Margin:外边距
Border:边框
Box-shadow:盒子阴影
Display:设置盒子是块级元素还是行级元素还是弹性元素
Background:设置元素的背景，背景图片，背景颜色