我的前端自学之路2020/12/16

一. 列表标签
无序列表 ul>li
有序列表 ol>li
自定义列表 ol>dt+dd

---

二. 表单 input、label、textarea 一个完整的表单通常由三部分组成，表单控件（元素）、提示信息和表单域form input:

<input type="text" value="" name="" />

name属性：提交后台时，用于区分表单
value 属性：默认文本值，一般用placeholder
type属性： text 文本
password 密码
radio 单选 （同个表单域多个单选框的name属性值相同时，用户只能选择一个）
checkbox 复选（同个表单域的复选框的name属性值相同）
button 普通按钮（也可以直接用button标签）
submit 提交按钮
reset 重置按钮（submit和reset按钮必须在表单域中才有效果）
image 图像形式的提交按钮
file 文件域（可选择文件上传）
checked属性： checked 默认被选中（单选、复选框）
maxlength属性： N 表单可输入的最大字符长度

---

label标签，和input表单搭配使用，目的仅用于提高用户体验 label标签直接包裹input表单，当用户点击标签里的文字时，会获得焦点

<label> 用户名 <input type="text" name="username" placeholder="请输入用户名"/></label>

或者使用for属性绑定input表单

<label for="username">请输入用户名</label>
<input type="text" id="username" />

文本域 textarea
防止拖拽： resize: none;

---

三.下拉列表 select selected="selected"设置默认选中项

地区：
<select>
	<option selected="selected">中国</option>
	<option>海外</option>
</select>

select控件在不同浏览器中显示的样式是不尽相同的，实际开发中常用无序列表来模拟下拉菜单

四.表单域form

<form action="url" name="表单名" method="post">
</form>

属性：
action: 用于指定接收并处理提交数据的主机程序地址
method: 提交方式，表单一般为post
name: 表单名，用来区分同个页面多个表单

作业：table表格搭建世纪佳缘注册页

CSS部分

作用：设置HTML页面的版面布局和外观样式
css写法：行内、内嵌、外链
一.css选择器
基础选择器：
1.标签选择器（元素选择器）
2.类选择器
3.id选择器
4.通配符选择器

标签常用类名：（标签允许多类名，类名之间用空格隔开）
头部 header（h5有新增标签）
内容 content
尾 footer（新增标签）
导航 nav （新增标签）
侧边栏 sidebar （aside标签）
栏目 column
版心 wrapper
水平方位 left、center、right
登陆条 loginbar
标志 logo
广告 banner
页面主体 main
热点 hot
新闻 news
下载 download
子导航 subnav
菜单 menu
子菜单 submenu
搜索 search
友情连接 friendlink
版权 copyright
滚动条 scroll
标签页 tab
文章列表 list
提示信息 mes
小技巧 tips
标题 title

二.字体 font
字体大小： font-size
字体样式： font-family
字体粗细： font- weight ：normal 正常字体 相当于number 400（常用来让粗体恢复正常）
-----------------------------------bold 粗体 相当于number 700
-----------------------------------bolder 特粗体
-----------------------------------lighter 细体
-----------------------------------100/200/300…900（不跟单位）
字体风格：font-style：normal 正常（常用来让斜体恢复正常）
------------------------------italic 斜体（常用em或i标签来实现斜体效果）
------------------------------oblique 倾斜的字体
字体综合样式：
font ：font-style    font-weight    font-size/line-height    font-family
注意：属性的顺序是固定的，其中style和weight可以省略

---

文本颜色： color: 预定义颜色/RGB/16进制
行高： line-height（可以使文字垂直居中）行高的测量方式：上一行的文字基线到下一行文字基线的高度就是行高
文本水平对齐方式： text-align： left/center/right
首行缩进： text-indent：值：正整数 ，单位：em（1em等于一个汉字的宽度）
文本装饰（去除链接标签默认的下划线）： text-decoration：none/underline（底部下划线）/overline（顶部下划线）/line-through（删除线）

---

三. CSS复合选择器
1.后代选择器：父元素  子元素{属性：属性值；属性：属性值}
后代选择器选择指定的父元素下所有指定子元素
2.子元素选择器：父元素>子元素{属性：属性值；属性：属性值}
子元素选择器选择指定父元素的第一层指定子元素，指定子元素中的同名（同类）子元素则不被选中
3.交集选择器：并且，即，又的关系，如：div.demo{} 指带有demo类的div标签
4.并集选择器：用于拥有同样样式的元素集体声明，元素之间用逗号隔开：p,div,a,ul{}
5.伪类选择器：链接伪类选择器：重点，鼠标经过 a:hover
6.结构伪类选择器：重点，元素:nth-child(n) {} 数字n表示要选则第几个
除此之外还有第一个:元素:first-child {}，最后一个:元素：last-child {}，倒数第n个：元素:nth-last-child(n) {}

---

四.标签的显示模式
1.块级元素（block），有宽高，自占一行，常见的块元素有h1~h6,p,div,ul,ol,li等等
2.行内元素（inline），无宽高，多个行内元素一行显示，大小由内容撑开，常见的行内元素有a，strong，b，em，i，del，ins，s，u，span等，行内元素只能放其他行内元素或文本
3.行内块元素（inline-block），有宽高，多个元素一行显示，如img， input ，td
元素类型的相互转换：display：block/inline/inline-block

---

五.背景background
背景颜色：background-color：red；默认为trancparent，透明
背景图片：background-image：url（路径）；
背景图片是否平铺：background-repeat：no-repeat；（基本都不平铺）
背景缩放：background-size：百分比/具体数值/预定义 cover（等比例铺满），contain（图片完整的前提下拉伸）；
背景位置：background-position：方位名词/具体坐标

第二天结束，时长7小时