web前段学习第二部分

HTML的基本使用
- 嵌套列表
- 表格标签
- 表格属性
- 表单标签
- 表单相关标签
- 表格表单组合
- `<div>`与`<span>`
css基础语法
- 内联样式与内部样式
- css中的颜色表示法
- 背景样式
- 背景实现视觉差效果
- css边框样式
- css边框实现三角形
- css文字样式
- css段落样式
- css复合样式
- css选择器

HTML的基本使用

嵌套列表

列表之间可以互相嵌套形成层级列表

 <h2>美味食物</h2>
<ul><li>小吃类</li><ul type="circle"><li>炒饭</li><li>面筋</li><li>烤鸭</li><li>蜜饯</li></ul><li>小孩子</li><ul type="circle"><li>游乐园</li><li>动物园</li><li>水上乐园</li></ul></li>
</ul>
<em>暑假快和小孩一起来玩吧</em>

<dl><dt>中国</dt><dd><dl><dt>辽宁省</dt><dd>沈阳</dd><dd>大连</dd></dl><dl><dt>四川省</dt><dd>成都</dd><dd>南充</dd></dl></dd>
</dl>

表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>定义表格单元
<caption>:定义表格标题

注：之前是有嵌套关系的，要符合嵌套规范
语义化标签：tHead,tBody,tFood
注：在一个table中，tBody可出现多次，但其他两个只能出现一次，如果有多个table,tHead可出现多次

如`<table><caption>天气预报</caption><tHead><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr></tHead>    <tHbody><tr><td>2019年1月13日</td><td>天气晴</td><td>适合出行</td></tr></tHbody><tFood></tFood>
</table>

表格属性

border:表格边框
cellpadding：单元格内的空间
cellspacing；单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式

<table border="1" cellpadding="35" cellspacing="35"><caption>天气预报</caption><tHead><tr align="rignt"><th>日期</th><th>天气情况</th><th>出行情况</th></tr></tHead>    <tHbody><tr valign="bottom"><td rowspan="2">2019年1月13日</td><td>白天</td><td>天气晴</td><td colspan="2">适合出行</td></tr><tr><td>夜晚</td><td>天气晴</td></tr></tHbody><tFood></tFood>

表单标签

<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等
type属性如

input(单表签）有一个type属性，决定是什么控件

<body><form action="http://www.baidu.com"><h2>输入框：</h2><input type="text"><h2>密码框：</h2><input type="password"><h2>复选框</h2><input type="checkbox" checked>苹果<input type="checkbox" disabled>猫咪<input type="checkbox">花花<h2>单选框</h2><input type="radio"name="gender">男<input type="radio"name="gender">女<h2>上传文件</h2><input type="file"><h2>提交按钮和重置按钮</h2><input type="submit"><input type="reset"></form>
</body>

在复选框，那三行中的type="checkbox"后加checked则该选项就默认被选中，在后面加disabled则该选项不能被选中。在输入框或密码框中的type="text"或type="password"后面加placeholder="请输入"则输入框会出现请输入字样

在单选框中的input type="radio"后加name=" "属性则两选项中只能选一项 " "中的值自己定义

表单相关标签

多行文本框：<textarea>
下拉标签：<select>,<option>

如：<h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜单</h2><select><option selected disabled>请选择</option><option>美食</option><option>游戏</option></select><select><option size="3">请选择</option><option>美食</option><option>游戏</option></select><select multiple><option >请选择</option><option>美食</option><option>游戏</option></select><input type="file" multiple>

辅助标签：<label>

<input type="radio"name="gender" id="man"><lable for="man">男</lable><input type="radio"name="gender" id="woman"><lable for="woman">女</lable>

上面的一些常见属性如**checked,disabled（加上后该项不能被选择）,name,for与id（相对应，扩大了选择时点的范围）,multiple(加在标签后则那一选项可多选）,size（显示的选项数）,cols
和rows（设置多行文本框的大小分别控制列数和行数）**要注意

表格表单组合

如

<body><form action=""><table border="1" cellpadding="30"><tbody><tr align="center"><td rowspan="4">整体信息</td><td colspan="2">用户信息</td></tr><tr align="right"><td>用户名：</td><td><input type="text"placeholder="请输入" ></td></tr><tr align="right"><td>密码：</td><td><input type="password" placeholder="请输入"></td></tr><tr align="center"><td colspan="2"><input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"></td></tr></tbody></table></form>
</body>

加入的**    可使的两个选择间隔开些**action=“”**可添加提交的网址

`<div>`与`<span>`

div:做一个区域划分的块
span:对文字进行修饰的内联
注：他们默认都是没有样式的，如果要进行一些修饰就要用样式来配合

边框框选的是由div进行区域划分的，标题部分的红色HTML是由span进行修饰的

css基础语法

格式:选择器｛属性1；值1；属性2；值2｝
属性：width：宽
height:高
background-color:背景色
长度单位：
1.px像素
2.%百分比
外容器1–600px 当前容器50%–300px
外容器2–400px 当前容器50%–200px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width:100px;height:100px;background-color:red}</style>
</head>
<body><div>这是忙碌的一天</div>
</body>
</html>

在head部分加一个<style>标签中间加一个div｛｝表示选择器，与后面body部分的div对应｛｝之中添加相应属性，反应到<div>这是忙碌的一天</div>的运行结果中

内联样式与内部样式

1.内联(行内，行间）样式
在html标签上添加style属性来实现
2.内部样式
在<style>标签内添加的样式
注:内部样式的优点，可以复用代码

css样式的引入方式

内联样式（如<div style="width:100px;height:100px;background-color:red">正式</div>）
style属性
内部样式
style标签
区别：内部样式符合w3c的规范标准，进行让结构和样式分开处理
外部样式
引入一个单独的css文件，name.css
用 <link>标签，有以下两属性
1.rel引入资源跟页面的关系
2.herf引入的外部资源的地址
用@import引入（不建议）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href=".\common.css"><title>Document</title>
</head>
<body><div>二级分行</div>
</body>
</html>

如上面的代码，创建一个common.css其中写下一些样式，在title标签上面添加一个link标签。其中rel后的值有很多种
如

这里
是引用

href后面的链接就会映射到body部分去，给它添加上样式

css中的颜色表示法

1.单词表示法：red blue green yellow…
2.十六进制表示法：#000000（最小） #ffffff（最大白）
在0123456789abcdef中选择字符来表示
3.rgb三原色表示法：rgb(255,255,255);
取值范围0-255
获取颜色的工具
提取颜色的下载地址：https://www.baidufe.com/fehelper
photoshop工具

背景样式

background-color背景色
background-image背景图
url(背景图地址)
默认：会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 都不平铺
background-position：背景图片的位置
x,y number（如%50%50)/单词
x:left,center,right
y:top,center,bottom
background-attachment：背景图片随滚动条的移动方式
scroll:默认值（背景位置是按当前元素进行偏移的）
fixed:(背景位置是按阅览器进行偏移的）

背景实现视觉差效果

在head部分style标签中加#div1#div2#div3用来和body部分的三个div相对应从而添加不同的样式

css边框样式

border-style:边框样式
border-color：边框颜色
border-width:边框大小
边框可以针对某一个边进行单独设置：border-left-style：中间是方向有left right top bottom

css边框实现三角形

在head部分的style标签中的div中通过设置边框颜色和背景颜色来实现（边框颜色设置成透明色：transparent)

css文字样式

font-family:字体类型
英文字体：Arial,‘Times New Roman’（字体类型中出现空格则要加引号）
中文字体：微软雅黑，宋体
常设置有多种字体类型，防止电脑无法识别
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSum
衬线体与非衬线体
font-size:字体大小
默认：16px
写法：（）px，单词（small,large…不推荐）
font-weight:字体粗细
两种模式：正常(normal)，加粗（bold)
写法：单词/numder(100,200…900 ，100-500是正常的之后是加粗的)
font-style:字体样式
模式：正常（normal）斜体（italic）
写法：单词(normal,italic)
oblique也表示斜体，将没有斜体属性的字体设置倾斜操作。用的较少

color：字体颜色

css段落样式

text-decoration:文本装饰
下划线：underline
删除线:line-through
上划线:overline
不添加任何修饰：none
注：添加多个文本修饰写法：line-through underline overline
text-transform:文字大小写(针对英文段落）
小写：lowercase
大写:uppercase
只针对首字母：capitalize
文本缩进（text-indent)
首行缩进(首行第一个字对齐于二行第三个字的表达样式如：text-indent：36px；font-size：18px）
em单位：相对单位，1em永远与字体大小相同（例如上面可以表示为text-indent：2em；font-size：18px）
注意：若文段中有英文则无法对齐到指定位置
文本对齐（text-align)
对齐方式：left，right，center，justify(两端点对齐）
文本的行高
line-height:定义行高
定义：一行文字的高度加文字的上边距，下边距
默认值：是变化的根据字体的大小在不断变化
取值：number）px/scale（比例值（1,2…），跟文字大小成比例)
letter-spacing:字之间的间距
word-spacing:定义词间距（针对英文)
英文和数字折行问题
word-break：break-all；（强烈的折行）
word-warp：break-word；（不太强烈，会产生一些空白区域）
如

css复合样式

复合的写法：通过空格的方式实现，复合写法有的是不需要关心顺序(但那要是个整体则要挨在一起）的。如background,border;有的要。如font
background：red url() repeat 0 0;
border:1px red solid;
font：
注：最少两个值 size family
weight style size family
style weight size family
weight style size/line-height family
注：复合单一尽量不混写，非要的话也先写复合形

css选择器

ID选择器
注：id是唯一值，一个页面不能多次出现同个ID
命名规范由字母，下划线，中划线，且第一个字母不是数字
1.驼峰写法（根据目的采用相关单词组合命名）如searchButton（小驼峰，第一个单词首字母小写，第二个单词首字母大写），SearchButton(大驼峰）
2.短线写法：search-small-button
3.下划线写法：search_small_button
CLASS选择器
1.class可以复用
2.可添加多个class样式
写法：

 <style>.doc{background:rebeccapurple} .cont{width:300px;height:300}</style>
</head>
<body><div class="doc cont">开开心心</div><div class="doc cont">高高兴兴</div>
</body>

3.多个class样式优先级由css决定（head部分中的style标签中添加的css属性的先后），而不是class属性中的顺序
4.标签+类的写法

<style>p.box{background:rebeccapurple}</style>
</head>
<body><div class="doc cont">开开心心</div><p class="doc">十二点半</p>

其中box中的属性就加到了p中