HTML+CSS系列教程之导学
一、HTML+CSS系列教程之拨云见日
1.1 HTML CSS 切图流程 PC企业站布局 PC游戏站布局
二、HTML+CSS系列教程之溯本求源
2.1 扩展HTML 扩展CSS HTML5新语法 CSS3新语法 兼容与Hack
三、HTML+CSS系列教程之风生水起
3.1 弹性布局 网格布局 移动端布局 响应式布局 Bootstrap
四、HTML+CSS系列教程之巧夺天工
4.1 预编译CSS Postcss CSS架构 高级功能 CSS与JS交互
第一章 HTML+CSS系列教程之拨云见日
第一节 什么是HTML、CSS?
-
什么是HTML,CSS？
是做网站的编程语言.
浏览器将代码解析后就是我们所看到的网站,而我们可以通过鼠标右键选择查看网页源代码进行查看网站原始代码. -
如何去写代码?代码又该写到哪里?
如果写网站,那么我们可以将网站拆分成多个网页,每一个网页都是由一个.html文件组成.
类比于电视剧,一部电视剧由多个视频组成,每一个视频都有一个.mp4文件组成. -
什么是HTML？
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML作为一种标记语言可以将分散的网络资源链接成为一个逻辑整体。
HTML中可以包括文字，图形，动画，声音，表格，链接等等
什么是CSS？
CSS的英文全称是 Cascading Style Sheets，即层叠样式表。CSS是一种表现HTML的一种计算机语言，它可以修饰静态的网页，也可以配合JS脚本语言动态修饰网页.
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
第二节 工具的介绍 安装 使用.
-
VS Code 全称 Microsoft Visual Studio（简称VS）是美国微软公司的开发工具包系列产品.VS是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等.
安装中文语言包 open in browser view in browser.
常见快捷键的使用 Ctrl+Y=前进 Shift+end/home=从头/尾部选中一行 Shift+alt+↑/↓=快速移动一行 Tab+shift=向前缩进 Ctrl+d=选中相同元素的下一个搜索功能.
-
Chorme浏览器 Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面.
-
常见的浏览器?
Chrome浏览器 Edge浏览器 360安全浏览器 QQ浏览器 火狐Firefox 搜狗浏览器 UC浏览器 Safari IE浏览器 Opera浏览器
五大浏览器?
Chrome浏览器、Edge浏览器、safari、火狐Firefox、IE浏览器
第三节 深入了解网站开发
1.网站开发的职位?
UI设计师:设计稿
Web前端开发工程师(H5开发):通过HTML(结构)+CSS(样式)把开发稿转换为代码和数据库的数据显示到页面 [结构与样式不可或缺]
Web后端开发工程师
2.JaveScript与Html和CSS之间的关系?
JaveScript是一种脚本语言用来交互、HTML是一种超文本标记语言、CSS是修饰内容样式的.
三者可以互相搭配使用,但不是绝对的,可以互相独立.
HTML一般需要CSS和JaveScript配合使用.
CSS不能脱离HTML与XML使用.
JaveScript可以脱离HTML和CSS而独立存在.
第四节 Web前端三大技术
<style>
div{ color: red; font-style: italic; } <!--颜色为红色 字为斜体-->
</style>
<div> HTML+CSS系列教程</div>
<script>
let div = document.querySelector('div');
let timer = null;
let flag = true;
div.onmouseover = function(){
timer = setInterval(() => {
if(flag){
div.style.color = 'blue';
div.style.fontStyle = 'normal';
}
else{
div.style.color = 'red';
div.style.fontStyle = 'italic';
}
flag = !flag;
},500);
};
div.onmouseout = function(){
clearInterval(timer);
};
</script>
网页运行如下：
第五节 HTML的基本结构与属性
HTML:超文本(文本内容与非文本内容(图片,视频,音频等)) 标记(<单词>) 语言(编程语言)
标记也叫做标签:<header> <footer>
标签分为两种:单标签(<header>)和双标签(<header> </header>)
标签创建的快捷键:单词+TAB=<单词>
标签可以上下排列也可以左右排列
<header>Hello World</header>
<footer>Hi HTML</footer>
<input type="text">
运行如下:
| HTML常见标签名称 | 具体内容 |
|---|---|
| 根元素 | html(网页总标签) |
| META元素 | 1.head(文档头部标签，base，meta，style等标签需要放在其中) 2.title(网页标题标签，指明后网站左上方标题改变) 3.base(为文本中未指明href的a标签,默认制定url) 4.link(css导入外部样式标签) 5.meta(设备及字体编码声明标签) 6.style(样式标签) |
| 部件元素 | boby(内容标签，文本中可视区域代码需要放在body标签内) section(文章标签，使用后h1标签字体变化)、 |
| 分组内容元素 | p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、figcaption、div |
| 文本层次语义元素 | a、em、strong、small、cite、q、dfn、abbr、time、code、var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、bdo、span |
| 编辑元素 | ins、del |
| 嵌入内容元素 | img、iframe、embed、object、param、video、audio、source、canvas、map、area |
| 表格元素 | table、caption、colgroup、col、tbody、thread、tfoot、tr、td、th |
| 表单元素 | form、fieldset、legend、label、button、select、datalist、optgroup、option、textarea、keygen、output、progress、meter |
| 互动元素 | details、summary、command、menu |
| 脚本元素 | script、noscript |
标签的属性:用来修饰标签的,设置标签的一些功能. <标签 属性=“值” 属性2=“值2”> 一个标签可加多个属性
<header title="hello">hello World</header>
<footer title="HI">Hi HTML </footer>
title作用给文字加上一个标签
网页运行如下：
第六节 HTML初始代码
每一个html文件都需要添加初始代码,初始代码就是无论你写什么样的网页,都有的,这就是初始代码。
有初始代码HTML才算规范
初始代码:VS中使用!+TAB
<!DOCTYPE html> 文档声明:告诉浏览器只是一个Html文件
<html lang="en"> Html文件的最外层标签:包裹所有Html的标签 lang="en"表示为一个英文网页lang="ZH-CN"表示为一个中文网站
<head> head表示输入地址栏的一层 body表示网页主体部分
<meta charset="UTF-8"> 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> title设置网页的标题
</head>
<body>
Hello world 表示网页内容的区域
</body>
</html>
第七节 HTML注释
注释:<!--注释的内容-->
意义: 1.将暂时不用的代码注释起来,方便后续使用. 2.给代码注释方便后续理解.
快捷添加注释与删除的方式: 1.ctrl+/ 2.alt+shift+a
第八节 HTML语义化
HTML语义化:针对不同的内容使用不同的标签(段落,标题,正文)
好处: 1.在没有CSS的情况下,页面也能呈现出很好的内容结构. 2.有利于SEO ,让搜索引擎爬虫更好的理解网页. 3.方便其他设备解析(如屏幕阅读器、盲人阅读器等).4.便于团队开发与维护.
第九节 标题与段落
此标题与title不一样 title表示网页的整个标题.
标题分为六个等级(双标签): <h1></h1> ... <h6></h6>
网页中h1标题最重要,在一个Html文件中只能存在一个h1标签.
h5,h6标签在网页中不经常使用.
段落(双标签): <p>内容</p>
<!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>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>这是一个段落</p>
</body>
</html>
网页运行如下:
<!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>
</head>
<body>
<h1>蔡徐坤简介</h1>
<h2>基本信息</h2>
<p>蔡徐坤(KUN,1998年8月2日),出生于浙江省温州市,中国内地男歌手、原创音乐制作人、MV导演、演员。</p>
<p>2012年4月,因参加综艺节目《向上吧！少年》而进入娱乐圈;8月,首次参演电视剧《童话二分之一》。2016年10月,加入男子组合SWIN正式出道。2018年,参加偶像男团竞演养成类真人秀《偶像练习生》,以总票数第一C位出道,[1]并担任限定男团“NINE PERCENT”队长;8月2日,发行个人首张EP《1》。[2]2019年,为北京台春晚创作歌曲《那年春天》;3月,获得第26届《东方风云榜》音乐盛典最受欢迎男歌手奖;[3]8月,获得2019华人歌曲音乐盛典年度最佳舞台演绎男歌手及2019华人杰出青年歌手。2020年5月24日,发布单曲《情人》,并随即登顶15项音乐榜单;7月,获第27届《东方风云榜》音乐盛典最佳男歌手奖和网络影响力大奖。2021年,获得2020腾讯娱乐白皮书男明星商业价值榜TOP1[4]、TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手等多项荣誉。</p>
<h2>早年经历</h2>
<p>蔡徐坤出生于浙江温州,爸爸是浙江温州人,妈妈是湖南人,童年时代，在湖南怀化生活就学。</p>
<p>蔡徐坤的小学就读于怀化市鹤翔学校,中学就读于深圳市南山区第二实验学校,之后他选择了出国留学。</p>
<p>13岁时,与央视主持人鞠萍姐姐同台主持"红领巾之歌"全国少儿优秀合唱歌曲征集展播活动启动仪式。</p>
</body>
</html>
网页运行如下:
第十节 文本修饰标签
强调(双标签): <strong></strong> <em></em>
strong:加粗 强调性较强
em:斜体 强调性较弱
下标(双标签): <sub></sub>
上标(双标签): <sup></sup>
删除文本(双标签): <del></del>
插入文本(双标签): <ins></ins>
·一般情况下,删除文本后插入文本配合使用.
<!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>
</head>
<body>
<p>
这是一段正常的文本
</p>
<p>
<strong>这是一段需要强调的文本</strong>
</p>
<p>
<em>这是一段需要强调的文本</em>
</p>
<p>
a <sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</p>
<p>
H<sub>2</sub>O
</p>
<p>
特价电视原价<del>3600</del>元,现价清仓<ins>1600</ins>元
</p>
</body>
</html>
网页运行如下:
第十一节 图片的标签与属性
img(单标签): <img src="" alt="" title="" width="" height=""> src:引入图片的地址 alt:当图像出现问题时,出现提示文字. title:给图片加入提示信息 width,height:图片的大小
·快捷使用img+TAB
<!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>
</head>
<body>
<h1>蔡徐坤简介</h1>
<h2>基本信息</h2>
<p>蔡徐坤(KUN,1998年8月2日),出生于浙江省温州市,中国内地男歌手、原创音乐制作人、MV导演、演员。</p>
<p>2012年4月,因参加综艺节目《向上吧！少年》而进入娱乐圈;8月,首次参演电视剧《童话二分之一》。2016年10月,加入男子组合SWIN正式出道。2018年,参加偶像男团竞演养成类真人秀《偶像练习生》,以总票数第一C位出道.
<img src="https://gitee.com/YHX2016/blogimage/raw/master/img/202210192356978.webp" alt="很抱歉图片丢失" title="你是小黑子" width="888" height="868">
<h2>早年经历</h2>
<p>蔡徐坤出生于浙江温州,爸爸是浙江温州人,妈妈是湖南人,童年时代，在湖南怀化生活就学。</p>
<p>蔡徐坤的小学就读于怀化市鹤翔学校,中学就读于深圳市南山区第二实验学校,之后他选择了出国留学。</p>
</body>
</html>
网页运行如下:
第十二节 引入文件的地址路径
相对路径:相对路径是指以当前文件资源所在的目录为参照基础，链接到目标文件资源(或文件夹)的路径.
以“./”开头，代表当前目录和文件目录在同一个目录里，“./”也可以省略不写！
以"…/"开头：向上走一级，代表目标文件在当前文件所在的上一级目录.
以"…/…/"开头：向上走两级，代表父级的父级目录，也就是上上级目录，再说明白点，就是上一级目录的上一级目录.
以"/”开头，代表根目录.
绝对路径:从根目录开始,是一个完整的路径.
“D:/abc/”：代表根目录,绝对路径.
·在windows中路径斜线/与反斜线\都可表示,在网络路径中必须/ 尽量避免写反斜线\
第十三节 跳转链接
a(双标签): <a></a>
href:链接地址
<a href="链接"> 链接网址的标题 </a>
target:可以改变链接打开的方式,默认为当前页面打开(self) 新窗口打开(_blank)
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com" target="_blank">访问百度</a>
base(单标签):改变链接默认行为 一般在<head></head>中
<head>
<base target="_blank">
</head>
第十四节 跳转锚点
跳转锚点:这种跳转方式实现的是从某个位置跳转到同页面的另一个位置 制作方法分为两种步骤,分别是设置锚点,添加链接
两种方式
<a href="#id"> 页面内跳转文件的纯文本 </a>
<h2 id= "自定义">目标位置</h2>
id为自定义
<a name= "自定义"> </a>
第十五节 特殊符号
特殊符号:在编写文本是,会遇到输入法无法输入的字符,如®(注册商标),©(版权符)等,还要在一段文字中加入多个空格时,页面无法解析出多个空格.这些无法输入和空格字符都是特殊字符,HTML中有专门的代码.
| 特殊字符 | 含义 | 特殊字符代码 |
|---|---|---|
| 空格符 |   ; | |
| © | 版权 | © ; |
| ® | 注册商标 | ® ; |
| < | 小于 | < ; |
| > | 大于 | > ; |
| & | 和号 | & ; |
| ¥ | 人民币 | ¥ ; |
| ° | 摄氏度 | ° ; |
第十六节 无序列表
<ul> 与 <li> :列表的最外层容器,列表项(ul与li必须组合出现,中间是不能有其他标签的)
type属性:改变前面标记的样式(一般通过CSS去控制) <ul type="value">
disc 实心圆 circle 空心圆 square 实心方块
正确:
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
错误
<ul>
<p>
<li>第一项</li>
</p>
</ul>
第十七节 有序列表
<ol> 与 <li> :列表的最外层容器,列表项(ol与li必须组合出现,中间是不能有其他标签的)
type属性:改变前面标记的样式(一般通过CSS去控制) <ul type="value">
1数字有序列表 a小写字母顺序列表 A大写字母顺序列表 i小写罗马字母列表 I大写罗马字母列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
第十八节 定义列表
<dl> : 定义列表
<dt> : 定义专业术语或名词
<dd> : 对名词进行解释和描述
<dl>
<dt>内容</dt>
<dd>内容</dd>
</dl>
第十九节 嵌套列表
列表之间可以互相嵌套形成多层级列表
<!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>
</head>
<body>
<ul>
<li>
四川省
<ul>
<li>成都</li>
<li>达州</li>
<li>绵阳</li>
</ul>
</li>
<li>江苏省
<ul>
<li>扬州</li>
<li>高邮</li>
</ul>
</li>
</ul>
</body>
</html>
<!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>
</head>
<body>
<ul type="disc">
<h1>巨好吃餐厅</h1>
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
<li>
套餐类
<ul>
<li>卤面筋饭</li>
<li>猪耳朵饭</li>
<li>猪肉饭</li>
<li>卤猪脚饭</li>
<li>红烧牛肉饭</li>
</ul>
</li>
<li>
炖爆类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心</li>
<li>牛肉</li>
<li>羊肉</li>
</ul>
</li>
<em>亲,20元以上可免费送餐哦!!!</em>
</body>
</html>
第二十节 表格标签
<table>:表格的最外层容器
<tr>:定义表格行
th:定义表头
td:定义表格单元
<caption>:定义表格标题
表格标签之间有嵌套关系,需要符合嵌套规范
语义化标签：<tHead>、<tBody>、<tFood>（tHead与tFood只能出现一次，tBody可以出现很多次）
<!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>
</head>
<body>
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>2019年1月1日</td>
<td><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/202210261943899.png" alt="加载不出" ></td>
<td>天气晴朗,适合出行!</td>
</tr>
<tr>
<td>2019年1月2日</td>
<td><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/202210261942393.png" alt="呜呜呜"></td>
<td>天气糟糕,不宜出行!</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
第二十一节 表格属性
border：表格边框 <table border="1">
cellpadding：单元格内的空间 <table cellpadding="40">
cellspacing：单元格之间的空间 <table >
rowspan：合并行 <th colspan="行数">内容</th>
colspan:合并列 <td rowspan="列数">内容</td>
align：左右对齐方式(left,center,right) <tr align="right"> </tr>
valign：上下对齐方式(top,middle,bottom) <tr valign="top"> </tr>
<!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>
</head>
<body>
<table border="1" cellpadding="20" cellspacing="15" >
<caption>天气预报</caption>
<thead>
<tr align="right" valign="top">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">2019年1月1日</td>
<td>白天</td>
<td><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/202210261943899.png" alt="加载不出" width="40" height="40"></td>
<td>天气晴朗,适合出行!</td>
</tr>
<tr>
<td rowspan="2">黑夜</td>
<td><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/202210261943899.png" alt="加载不出" width="40" height="40"></td>
<td>天气晴朗,适合出行!</td>
</tr>
<tr>
<td rowspan="2">2019年1月2日</td>
<td><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/202210261942393.png" alt="呜呜呜" width="40" height="40"></td>
<td rowspan="2">天气糟糕,不宜出行!</td>
</tr>
<tr>
<td>白天</td>
<td><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/202210261942393.png" alt="呜呜呜" width="40" height="40"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
<!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>
</head>
<body>
<table border="5" cellpadding="20">
<thead>
<tr>
<th>班次名称</th>
<th>科目</th>
<th>授课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
<th>试听</th>
<th>购买</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">真题基础班</th>
<th>行测与申论</th>
<th>全科历年真题精解</th>
<th rowspan="3">课后赠2套模拟卷<br/>24小时以内答疑</th>
<th>48</th>
<th><span style="color:red">1280元</span></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/erji.png" alt="失败了" width="20" height="20"></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/gouwuche.png" alt="失败了" width="20" height="20"></th>
</tr>
<tr>
<th>行测</th>
<th>行测历年真题精解</th>
<th>32</th>
<th>980元</th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/erji.png" alt="失败了" width="20" height="20"></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/gouwuche.png" alt="失败了" width="20" height="20"></th>
</tr>
<tr>
<th>申论</th>
<th>申论历年真题精解</th>
<th>16</th>
<th>580元</th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/erji.png" alt="失败了" width="20" height="20"></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/gouwuche.png" alt="失败了" width="20" height="20"></th>
</tr>
<tr>
<th rowspan="3">高分技巧班</th>
<th>行测与申论</th>
<th>全科技巧强化</th>
<th rowspan="3">入学试卷测评<br/>24小时内答疑</th>
<th>32</th>
<th><span style="color:red">980元</span></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/erji.png" alt="失败了" width="20" height="20"></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/gouwuche.png" alt="失败了" width="20" height="20"></th>
</tr>
<tr>
<th>行测</th>
<th>行测速解技巧强化</th>
<th>18</th>
<th>680元</th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/erji.png" alt="失败了" width="20" height="20"></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/gouwuche.png" alt="失败了" width="20" height="20"></th>
</tr>
<tr>
<th>申论</th>
<th>申论速解技巧强化</th>
<th>14</th>
<th>580元</th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/erji.png" alt="失败了" width="20" height="20"></th>
<th><img src="https://gitee.com/YHX2016/blogimage/raw/master/img/gouwuche.png" alt="失败了" width="20" height="20"></th>
</tr>
</tbody>
</table>
</body>
</html>
第二十二节 表单标签(上)
<form>:表单的最外层容器
<input>(单标签):标签用于搜索用户信息,根据不同的type属性值,展示不同的控件,如输入框,密码框,复选框等
| type属性 | 含义 |
|---|---|
| text | 普通的文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框 |
| radio | 单选框 |
| file | 上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| placeholder | 可描述输入字段预期值的提示信息 |
| disabled | 规定当页面加载时是否禁用该 input 元素 |
| name | 规定 input 元素的名称 |
<!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>
</head>
<body>
<form action="http://www.baidu.com">
<h2>输入框:</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框:</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>apple
<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>
</html>
第二十二节 表单标签(下)
<textarea>:多行文本框
<select>,<option>:下拉菜单
<label>:辅助标签
<!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>
</head>
<body>
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>达州</option>
<option>成都</option>
<option>绵阳</option>
</select>
<select size="3">
<option>达州</option>
<option>成都</option>
<option>绵阳</option>
</select>
<select multiple="2">
<option>达州</option>
<option>成都</option>
<option>绵阳</option>
</select>
<input type="file" multiple>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</body>
</html>
第二十三节 表格表单组合实例
<!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>
</head>
<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">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
第二十四节 div与span标签
div (块) :div全称为division,“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素.即HTML中大
多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局.
span(内联):用来修饰文字的，div 与span都是没有任何默认样式的，需要配合CSS才行.
第二十五节 CSS基础语法
格式：选择器 { 属性1:值1;属性2:值2}
基本样式：width：宽 height：高 background：背景色
长度单位：1、px——>像素 2、%——>百分比
外容器——>600px , 当前容器50%——>300px
CSS注释： /* CSS注释的内容 */
第二十六节 内联样式&内部样式&外部样式
内联样式:style属性(在html标签添加style属性来实现)
<div style="width: 100px; height:100px;background-color: red">这是一个块</div>
内部属性:style标签(在<style标签内添加代码实现)
<style>
div {width: 100px; height:100px;background-color: red}
</style>
区别:内部样式的代码可以复用,复合W3C的规范标准,进行让结构和样式分开处理.
外部样式:引入一个单独的CSS文件
<link>标签 rel href 通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址
<link rel="stylesheet" href="引入地址">
| 值 | 描述 |
|---|---|
| alternate | 文档的替代版本（比如打印页、翻译或镜像） |
| stylesheet | 文档的外部样式表 |
| start | 集合中的第一个文档 |
| next | 集合中的下一个文档 |
| prev | 集合中的上一个文档 |
| contents | 文档的目录 |
| index | 文档的索引 |
| glossary | 在文档中使用的词汇术语表（解释） |
| copyright | 包含版权信息的文档 |
| chapter | 文档的章 |
| section | 文档的节 |
| subsection | 文档的小节 |
| appendix | 文档的附录 |
| help | 帮助文档 |
| bookmark | 相关文档 |
@ipmort不建议使用
<style>@import url(地址);</style>
link和@import的区别 - my~sunshine - 博客园 (cnblogs.com)
第二十七节 CSS颜色表达法
单词表示法:red green blue black
十六进制表示法:#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
div{ background-color:#000000; background-color:#ffffff}
RGB三原色表示法:rgb(x,x,x) 取色范围0~255
div{ background-color:rgb(x,x,x)}
第二十八节 CSS背景样式&实现视觉差
background-color:背景颜色
background-image:背景图片 url(背景地址) 默认:会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式 repeat-x(x轴平铺) repeat-y(y轴平铺) repeat(x,y都进行平铺,默认值) no-repeat (都不平铺)
background-position:背景图片的位置 (x与y 正向右和向下 负向左和向上) x与y:number|单词 x:left、center、right y：top、center、bottom
background-attachment:背景图随滚动条的移动方式 scroll：默认值（背景位置是按照当前元素进行偏移的） fixed（背景位置是按照浏览器进行偏移的）
第二十九节 边框样式&三角形
border-style :边框样式 solid:实线 dashed:虚线 dotted:点线 width:边框大小（px）color:边框颜色
边框也可以针对某一天边进行单独设置:例 border-left-style :方向是 left、right、top、bottom
透明颜色：transparent
<!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>
body{background-color:blue;}
div{width: 0px;height: 0px;
border-top-color:azure ;
border-top-style:solid ;
border-top-width:20px ;
border-right-color:transparent ;
border-right-style:solid ;
border-right-width:20px ;
border-bottom-color:transparent ;
border-bottom-style:solid ;
border-bottom-width:20px ;
border-left-color:transparent;
border-left-style:solid ;
border-left-width:20px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
第三十节 Family字体类型
font-family :字体类型 英文字体:Arial ,‘Times New Roman’ 中文字体∶微软雅黑，宋体
中文字体的英文名称 微软雅黑:‘Microsoft YaHei’ 宋体:SimSun
注意：多个字体类型的设置：在系统字体中可以找到多种 引号的添加：有空格的字体必须加’’
第三十一节 字体大小&粗细样式
font-size :字体大小 默认:16px 写法: number(px)|单词( small large …不推荐使用)
| 属性取值 | 字体大小 |
|---|---|
| xx-small | 最小 |
| x-small | 较小 |
| small | 小 |
| medium | 正常 |
| large | 大 |
| x-large | 较大 |
| xx-large | 最大 |
字体大小一般是偶数
font-weight :字体粗细 模式:正常(normal )加粗（ bold ) 写法:单词(normal、bold) | number ( 100 200 … 900 ;100到5oo都是正常的，60o都900都是加粗的)
font-style :字体样式 模式:正常（normal )斜体（ italic ) 写法:单词(normal 、 italic )
注: oblique也是表示斜体，用的比较少，一般了解即可
区别:italic带有倾斜属性的字体的才可以设置倾斜操作 oblique没有倾斜属性的字体也可以设置倾斜操作 color:字体颜色
<!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{font-family: 'Times New Roman'; font-size: 30px;
font: weight 900px; font-style: oblique ; color: red;}
</style>
</head>
<body>
<div>这是一段我喜欢文字</div>
<div>this is a text</div>
</body>
</html>
第三十二节 文本修饰&文本大小写
text-decoration:文本装饰
下划线: underline
删除线: line-through
上划线: overline
不添加任何装饰: none
注:添加多个文本修饰: line-through underline overline
text-transform:文本大小写(针对英文段落)
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
第三十三节 文本缩进&文本对齐
text-indent :文本缩进
首行缩进
em单位:相对单位，1em永远都是跟字体大小相同
text-align :文本对齐方式
对齐方式: left 、right、center、 justify（两端点对齐）
第三十四节 文本的行高
line-height:定义行高 什么是行高，一行文字的高度，上边距和下边距的等价关系。 默认行高:不是固定值，而是变化的。根据当前字体的大小再不断的变化。 取值: number( px ) scale(比例值，跟文字大小成比例的)
第三十五节 文本的间距&英文拆行
letter-spacing:字之间的间距
word-spacing :词之间的间距(针对英文段落的）
英文和数字不自动折行的问题: word -break : break-all;(非常强烈的折行) word-wrap : break-word;(不是那么强烈的折行)
第三十六节 CSS复合样式
复合的写法：是通过空格的方式实现的，复合的写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font
当一个CSS属性只控制一种样式，叫做单一样式
当一个CSS属性控制多种样式，叫做复合样式
复合样式：
background : red url() repeat 0 0;
border : 1px red solid;
font：
weight style size family
style weight size family
weight style size/line-height family
（注:最少要有两个值size family）
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样样式才不会被覆盖掉。
第三十七节 ID选择器&注意事项
ID选择器
css : #elem{}
html : id= "elem”
注∶在一个页面中，ID值是唯一的 命名规范，字母_-数字(命名的第一位不能是数字）命名方式，驼峰式、下划线式、短线式。
驼峰写法:searchButton(小驼峰) SearchButton(大驼峰) searchSmallButton
短线写法: search-small-button 下划线写法:search_small_button
第三十八节 CLASS选择器&注意事项
CLASS选择器
.elem{}
class=“elem”
注:class选择器是可以复用的 可以添加多个class样式 多个样式的时候,样式的优先级根据CSS决定，而不是class属性中的顺序 标签+类的写法11
class与id属性的区别：class能够引用多个样式 id只能引用一个样式
2166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
