Html+Css
大家都知道Web网页是有结构标准（HTML标准） 样式标准（CSS标准） 行为标准(JS标准)三部分组成。本篇文章讲的是HTML和CSS，HTML（英文Hyper Text Markup Language的缩写）中文译为 “超文本标记语言” ，通过标签对网页中的文本、图片、声音等元素进行描述。CSS 样式表 或 层叠样式表，用于 设置 页面中的文本（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
如果你想从零基础学习Web那就跟着我一起学习吧！
案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss
其它Web文章
CSS基础学习之第二章
CSS浮动的使用和解决浮动的五种方法
CSS定位relative、absolute、fixed使用总结
原生开发WebApi知识点总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
ES6常用知识总结
Vue学习知识总结
开发环境到生产环境配置webpack
待续......
本编文章会讲到的知识点
- 表格table
- 表单标签
- CSS字体样式属性
- 选择器
- CSS外观属性
表格table
1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table 标签中，几对 tr 就有几行。
3.td 用于定义表格中的单元格，必须嵌套在 tr 标签中，一对 tr 中几对 td，就表示该行中有多少列
表格属性：
- 表格边框： border
- 单元格 与 单元格 间隙： cellspacing
- 单元格内 内容 与 边框的 间距： cellpadding
- 表格宽度高度： width height
- 表格对齐方式align： left right center
使用表格，可划分 表格头部、主体部分，使用表格结构更具语义，结构更清晰：
- <thead></thead>：用于定义表格的头部。必须位于table标签中
- <tbody></tbody>：用于定义表格的主体。必须位于table标签中
- caption 用于 表格标题，必须写在 table 标签内，用于概括表格内容。
合并单元格（难点）：
- 跨行合并：rowspan ，留住合并的单元格中，最上面的，删除其他
- 跨列合并：colspan，留住合并的单元格中，最左边的，删除其他
案例：
<table width="500" height="500" border="1" cellspacing="0" cellpadding="10" align="center">
<caption>2017年 摩托罗拉 销售记录表</caption>
<thead>
<tr>
<th>业务员</th>
<th>销售额</th>
<th>部门总计</th>
</tr>
</thead>
<tbody>
<tr>
<td>霉超疯</td>
<td>100</td>
<td rowspan="3">600</td>
</tr>
<tr>
<td>锅尽</td>
<td>200</td>
</tr>
<tr>
<td>黄蓉</td>
<td>300</td>
</tr>
<tr>
<td>评语：</td>
<td colspan="2">恩！干的不错！周末吃火锅！</td>
</tr>
</tbody>
</table>
表单标签（掌握）
也叫表单元素。指 文本输入框、密码输入框、复选框、提交按钮、重置按钮等 控件。一个完整的表单，应该由 表单控件 提示信息，表单域 三部分组成
input 控件(重点)：
type类型分别有哪些？
- 文本输入框： text
- 密码输入框： password
- 单选框： radio
- 复选框： checkbox
- 普通按钮： button
- 提交按钮： submit
- 重置按钮： reset
- 图像形式的提交按钮：image
- 文件上传控件：file
input属性有哪些？
- placeholder 提示文本
- value 属性规定输入字段的初始值
- readonly 属性规定输入字段为只读（不能修改）
- disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。
- maxlength 属性规定输入字段允许的最大长度
- size 属性规定输入字段的尺寸（以字符计）
- ......
代码案例：
<form action="#">
<!-- type 值为 text 表示 文本输入框 -->
<!-- name 属性用于表单提交 -->
<!-- placeholder 提示文本 -->
用户名:<input type="text" name="username" placeholder="请输入用户名">
用户名:<input type="text" name="username" placeholder="请输入用户名" value="123" maxlength="6"> <br>
<!-- type:password 密码框 -->
<!-- maxlength 最大输入字符数 -->
密 码:<input type="password" name="password" value="123456" maxlength="6"> <br>
<!-- radio 表示 单选框 -->
<!-- name属性 可以给 单选框 分组 -->
性别：
<!-- checked 只关心有没有，不关心是什么 -->
<input type="radio" name="gender" checked > 男
<input type="radio" name="gender"> 女
<input type="radio"> 未知 <br>
兴趣爱好：
<input type="checkbox" name='hobby' checked> 篮球
<input type="checkbox" name='hobby' checked> 排球
<input type="checkbox" name='hobby' checked> 羽毛球 <br><br>
<!-- button 表示 按钮 -->
<input type="button" value="你好，我是按钮">
<!-- submit 提交按钮 -->
<input type="submit" value="我要提交">
<!-- reset 重置按钮 -->
<input type="reset" value="重置按钮"> <br><br><br>
<!-- image 图片提交按钮 -->
<input type="image" src="im.jpg"> <br>
<!-- 文件上传 -->
<input type="file" >
</form>
textarea控件(文本域-了解)
extarea用于创建多行文本输入框,他的属性 cols 和 rows 可以调整宽高，但是兼容性很差，且不准确，可以设置CSS，通过 width height控制宽高。
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
<textarea cols="10" rows="5" placeholder="请输入内容"></textarea>
下拉菜单
使用select控件定义下拉菜单
- <select</select>中至少应包含一对<option></option>
- 在option 中定义selected属性时，当前项默认选中
<select>
<option value="1">你好</option>
<option value="2">你好1</option>
<option value="3">你好2</option>
<option value="4">你好3</option>
<option value="5">你好4</option>
</select>
fieldset（了解）
fieldset 可将表单内的相关元素分组,<legend> 标签可以为 fieldset 元素定义标题。
<form>
<fieldset>
<legend>人员信息</legend>
姓名：<input type="text" />
年龄：<input type="text" />
</fieldset>
<fieldset>
<legend>身体信息</legend>
身高: <input type="text" />
体重: <input type="text" />
</fieldset>
</form>
HTML5新增语义标签
- header：定义文档的头部
- nav：定义导航链接的部分
- footer：定义文档的底部
- article：定义文章内容
- section：定义文档中的区块
-
aside：一般用作侧栏
h5新标签.png
datalist(了解)
datalist 定义选项列表，表示数据源，页面中不可见。配合 input 使用。input 通过在 list 属性中写datalist的 id 进行关联
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="BYD">
<option value="SL">
</datalist>
HTML5新增的type属性值（了解）
<form action="13_html5语义化标签.html">
<!-- type=email 会对输入的内容进行 邮箱格式验证 -->
邮箱: <input type="email" > <br>
<!-- type=number 限制输入内容必须是 数字 -->
数字: <input type="number" > <br>
<!-- type=url 限制提交内容必须是 网址 -->
网址: <input type="url" > <br>
<!-- type=search 具有搜索框的语义 有可以清空内容的效果 -->
搜索: <input type="search" ><br>
<!-- type=range 小滑块 一般用于 音量调整，视频进度条 -->
滑块: <input type="range" ><br>
时间: <input type="time" ><br>
年月日： <input type="date"><br>
<!-- type month 选月份 -->
月份: <input type="month" ><br>
星期: <input type="week" ><br>
<!-- type color 取色板 -->
颜色: <input type="color" > <br>
<input type="submit" value="提交"><br>
</form>
HTML5新增表单新属性（理解）
dy>
<form action="13_html5语义化标签.html">
<!-- placeholder 提示文本 -->
<!-- autofocus 自动聚焦 -->
姓名：<input type="text" placeholder="请输入姓名" autofocus>
<!-- multiple 多文件上传 -->
<input type="file" multiple>
<!-- autocomplete 默认是开启的 -->
用户名：<input type="text" autocomplete="on" name="username"> <br>
<!-- required 必填项 -->
email:<input type="email" required>
<input type="submit">
</form>
CSS字体样式属性
注意点：
- 选择器 指定作用对象，花括号内 设样式。
- 属性和属性值 是 键值对。
- 属性和属性值 用英文 : 连接。
- 多个 键值对 用英文 ; 区分。
font-size:字号大小
font-size属性用于设置字号，推荐使用像素单位px。
常见单位如下：
- px 像素，最常用
- em （了解） 相对于当前对象内文本的字体尺寸，最终转换成px
- rem（了解）相对于根字体大小，最终转换成px
p {
/*font-size: 20px;*/
/* 如果当前字体大小是 16 1em = 16px*/
font-size: 2em;
}
span {
font-size: 0.5rem;
}
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
- 网页中普遍使用14px+。
- 尽量用偶数字号。ie6奇数有bug。
- 字体之间英文逗号隔开。
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文单引号或双引号，例如font-family: "Times New Roman";。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现,ont-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。数字 400 等价于 normal，而 700 等价于 bold。
span {
font-size: 50px;
font-weight: bold;
}
font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style 用于 定义字体风格:normal：标准字体（默认）、italic：斜体。
font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置
选择器 {font: font-style font-weight font-size/line-height font-family;}
p{
font: italic bold 30px/50px "黑体";
}
注意：
- 顺序不能更换，各个属性空格隔开。
- 必须保留 font-size 和 font-family 属性，否则font属性将不起作用
- 其他不需要设置的属性可以省略（取默认值）
选择器（重点）
标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面一类标签指定统一样式。
/* 标签名 {
属性名1：属性值1;
属性2: 属性值2;
.....
}
*/
p {
color: red;
font-size: 20px;
}
- 优点：快速为同类型的标签统一样式。
- 缺点：不能差异化样式。
类选择器
用 “.” 标识，紧跟类名,可以给标签指定多个类名，达到选择目的
.zs {
color: deeppink;
}
``````
<p class="zs">郑爽</p>
- 类选择器优势：可定义 单独的样式，也可定义可复用的样式。
- 注意：不要纯数字、中文等命名，不要以数字开头，尽量使用英文字母来表示。
id 选择器
id选择器使用“#”进行标识，后面紧跟id名。id名即为 HTML元素 的 id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
.ss {
font-size: 50px;
font-weight: bold;
}
``````
<p class="ss" id="ss">id选择器</p>
id选择器和类选择器区别
- 同一个页面，id唯一，class可以多次使用。
- 类选择器（class）：人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
- id选择器：身份证号码， 全中国是指 id 唯一的， id 名不得重复
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的。
作用：匹配页面中所有的元素。
/*
* 通配符选择器 可以选中页面中 所有的标签
1. 通配符一般用于 全局统一样式，进行样式初始化
2. 还可以清除默认 外边距 和 内边距
*/
* {
margin: 0;
padding: 0;
}
* {
color: red;
font-family: "黑体";
border: 1px solid blue;
}
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
为了和类选择器相区别，选择器是一个点 比如 .demo {} ,伪类 用冒号 比如 :link{}
链接伪类选择器：
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标悬停起作用 */
- :active /* 鼠标点击时作用 */
/* 还没访问过的链接 */
a:link{
color: pink;
font-size: 40px;
}
/* 访问过的链接 */
/*
1. visited 只能设 颜色, 其他一般不生效
2. background-color 设置给 visited 必须首先有背景颜色
*/
a:visited {
color: yellow;
background-color: red;
font-size: 60px; /* 无效的 */
}
/* :hover 表示鼠标悬停起作用 */
a:hover {
color: green;
font-size: 60px;
}
/* :active 表示鼠标点击时作用 */
a:active {
color: white;
font-size: 80px;
}
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 lv 包 ha 哈哈
结构伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式 - nth-child(even) nth-child(odd) nth-child()
/* :first-child
判断自己是不是 父容器中的 第一个孩子
是就起作用
*/
li:first-child {
color: red;
}
/*
:last-child
判断自己 是不是 父容器中的 最后一个孩子
是就起作用
*/
li:last-child {
color: pink;
}
/*
:nth-child(n)
判断自己 是不是 父容器中的 第 n 个孩子
是就起作用
*/
li:nth-child(3) {
color: blue;
}
li:nth-child(4) {
color: green;
}
/*
:nth-last-child(n)
判断自己 是不是 父容器中的 倒数第 n 个孩子
是就起作用
*/
li:nth-last-child(2) {
color: yellow;
}
/*
:nth-child(even) even 偶数
如果自己是 父容器中 第偶数个
就生效
*/
li:nth-child(even) {
color: green;
}
/*
:nth-child(odd) odd 奇数
如果自己是 父容器中 第奇数个
就生效
*/
li:nth-child(odd){
color: pink;
}
``````
<ul>
<li class="one">第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
<li>第八个孩子</li>
</ul>
目标伪类选择器
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素 ，#id 被选中,下面这个案例就是当点击a链接跳到h1时颜色变红。
#big-bam-boom:target {
color: red;
}
``````
<h1 id="big-bam-boom">Kaplow!</h1>
<a href="#big-bam-boom">点击我</a>
CSS外观属性
color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)。
line-height:行间距
ne-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。当height和line-height的值相同时，内容就会垂直居中
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用 em 作为设置单位。1em 就是一个字的宽度
letter-spacing:字间距
letter-spacing 用于定义 字间距，就是 字符 与 字符 之间的空白。
属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing:单词间距
word-spacing 属性用于定义 单词之间的间距 ，可为不同单位的数值，允许使用负值，默认为normal。
颜色半透明
文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：
color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)
文字阴影
可以给我们的文字添加阴影效果了 Shadow 影子
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
案例
下面这个案例用到了上面介绍的属性,然后在浏览器中按F12可以查看代码结构和css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.news {
width: 800px;
margin: 0 auto;
}
.header {
height: 90px;
}
.title {
font-size: 25px;
height: 60px;
line-height: 60px;
text-align: center;
font-weight: bold;
font-style: italic;
font-family: "微软雅黑";
text-shadow: 0 0 5px #fff,
0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e,
5px 5px 0px #747272;
}
.info {
font-size: 14px;
height: 30px;
line-height: 30px;
text-align: center;
text-indent: 0;
}
.info_date {
color: #AABBCC;
}
.info_person {
color: #990000;
letter-spacing: 3px;
word-spacing: 10px;
}
.content {
font-size: 14px;
line-height: 23px;
margin-top: 15px;
}
p {
text-indent: 2em;
}
.content_link {
color: #3399CF;
}
</style>
</head>
<body>
<div class="news">
<div class="header">
<h1 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<p class="info">
<span class="info_date">2014年07月16日20:11</span>
<span class="info_person">I Love you</span>
<span><a href="#">收藏本文</a></span>
</p>
</div>
<hr>
<div class="content">
<p>新浪体育讯 7月16日是燕京啤酒<a href="#" class="content_link">[微博]</a>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
<p>据记者多方了解的情况，李虎<a href="#" class="content_link">[微博]</a>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
<p>这样的情况并没有影响到丽江嘉云昊队<a href="#" class="content_link">[微博]</a>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
</div>
</div>
</body>
</html>
