小花带你一周入门html+css（一）html入门基础丨【WEB前端大作战】
相信大家应该都听过说：Java、Asp.net、Php、Python、C、C++、C#、网站前端，网页设计等这些技术，但是可能你不知道，这些技术都需要掌握两个基础的技术—html+css。
接下来我将带领大家一起，在一周的时间内，轻松搞定这两个技术。下面来看一下一周的详细内容。
（一）html入门基础
认识什么是HTML、 标记的语法、 常用的HTML标记的应用、网页基本骨架标记、meta元标记、列表标记、表格的应用、超链接标记等
（二）初识CSS
什么是CSS、CSS如何使用与书写、文字三属性、实体化属性、新标签、显示模式、选择器、选择器权重等
（三）CSS进阶之常用属性
复合选择器、注释、border、css属性层叠与继承、background、文字修饰属性与行高、伪类等
（四）CSS进阶之盒子模型与文档流
盒子模型、盒子准备、属性整理、标准流文档流、浮动、布局、定位等
（五）CSS进阶之切图
切图、滑动门、图片精灵、banner图制作、导航等
（六）CSS进阶之兼容性与滤镜
常见兼容性问题及解决、滤镜效果等
（七）常见布局及定位使用
等高布局、圣杯布局、固定定位、右下角的弹窗广告、对联广告、导航跟随、返回顶部等
下面我们开始第一天的学习，~follow me~
1.基础知识介绍
前端工具（vscode/sublime/EditPlus/Dreamweaver/Photoshop/Fireworks等）
目前的话小花喜欢用下面这些，仅供参考哦：
编码的话用EditPlus和HBuilder，vscode
切图当然要ps啦,其他协作工具如蓝湖也是很赞的
最最头痛的ie兼容性测试就IETester+install-debugbar哦
浏览器 谷歌 火狐 ie 360 Opera safari
代码的作用：
将之前设计过的图片用代码实现出一个具有实际功能的页面（html页面），供所有互联网用户正常访问
浏览网页过程机制：
本地浏览器向远程服务器发送请求数据，服务器返回数据给浏览器的过程
打开浏览器菜单栏 --工具 --Internet选项
找到常规–浏览历史记录–设置–查看文件夹–弹出的文件夹即为浏览器的缓存文件夹
web前端技术：
Web前端技术指的并不是某一项技术，是一系列技术的集合，主要包括：
1、结构标准 – html – 作用：页面结构的搭建（骨骼的搭建）
2、样式标准 – css – 作用：页面样式的搭建，外观、美化作用
3、行为标准 – JavaScript – 作用：负责页面的行为、动作
可以理解为做前端好比盖房子~ html充当了房子结构是房子的基础。 css呢，就好比房子的装修，给房子改变风格，样式的就是css。 javascript呢，好比房子功能性需求
总结：web前端标准作用：制作网页
html定义
超文本标记语言 html不是编程语言，是一种描述性标记语言 eg: color,size，学习html学习的是标签
2. html标记语法基础
①双标记<开始标记>内容</结束标记>
有属性值：<font></font>
无属性值：<title></title>
②单标记：<标记 />
换行<br />
分隔符<hr />
③标记的属性：<标记 属性1=“参数1” 属性2=“参数2”>内容</标记>
标签的属性书写遵循html键值对k=”v”的格式，k是属性名称，v是属性值。例如：bgcolor=”red”
说明:
A．标记与属性、属性之间以空格分隔
B．属性不分先后顺序，且属性不是必须的
C．建议所有标记采用小写
Html的文档结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>文档结构</title>
</head>
<body>
正文
</body>
</html>
meta标签，标记用于定义文件信息
Meta标签用于定义文件信息，放置于<head></head>
设置关键字 <meta name=”keywords” content=”value” />
设置描述 <meta name=”description” content=”value” />
设置作者名 <meta name=”author” content=”作者名” />
设置字符集 <meta http-equiv=”content-type” content=”text/html;charset=”gb2312”或者”UTF-8”>（UTF-8 3字节 gb2312 2字节）
设置页面定时跳转：<meta http-equiv=”refresh” content=”2;URL=”https://bbs.huaweicloud.com/”>
例子：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>华为云论坛_云计算论坛_开发者论坛_技术论坛-华为云</title>
<meta name="keywords" content="论坛,开发者,技术,云计算,云原生,AI,物联网,软件开发,鲲鹏,数据库,视频,安全,华为云论坛,华为云">
<meta name="description" content="华为云论坛是开发者和华为云产品交流主阵地，邀你共享云计算使用和开发经验，汇聚云上智慧，共赢智慧未来。 ">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<title>文档结构</title>
</head>
<body>
正文
</body>
</html>
body详解
body属性：
<body bgcolor="背景颜色" background="背景图像" test="文本颜色" link="链接文本颜色" vlink="访问过的文本颜色" alink="激活的链接文本颜色" margin-left="左边界" margin-right="右边界" margin-top="上边界" margin-bottom="下边界">
正文
</body>
tips:
背景色和背景图允许同时存在，当同时存在的时候，永远都是背景图在上，背景色在下
标题详解
<hx></hx> 标题 (其中x可取值1~6，表示标题标签有1~6个级别):
X取值1~6 hX内的文本会自动加粗显示（h1最大）
hX针对对象是段落，而font针对对象是任意文本
常用属性：
①color ="" 颜色
②size="" 字体大小
③align="" 对齐方式，属性值有：left/center/right
注意:<h1>标题文本</h1>比<strong>权限高
段落详解
文本段落 <p></p>
Html标记之间嵌套使用，一层套一层，若出现交叉嵌套会出现问题
常用属性：
①color ="" 颜色
②size="" 字体大小
③align="" 对齐方式，属性值有：left/center/right
代码示例：
我是h1标题
我是h2标题
我是h3标题
我是h4标题
我是h5标题
我是h6标题
我是p段落文字
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
<p>我是p段落文字</p>
字体详解
规定文本的字体、字体尺寸、字体颜色 <font></font>
常用属性：
①color ="" 颜色
②size="" 字体大小
注意：网页的文本字体一般通过CSS修饰
字符格式
注意：< del>文字有删除线(有强调的语义)</del>
特殊字符
1.字符”<”用字符串”<”表示；
2.字符”>”用字符串”>”表示；
3.字符”&”用字符串”&”表示；
4.字符” ” ”用字符串”"”表示；
5.空格字符用字符串” ”表示；
6.© 版权用字符串©表示;
7.® 注册商标用字符串®表示;
8.×乘号用字符串×表示;
9.÷除号用字符串÷表示。
回车换行
< br />
水平分割线
< hr />
常用属性：
①color ="" 颜色
②size="" 分割线的粗细
③width="" 宽度
④align="" 对齐方式，属性值有：left/center/right
⑤noshade="noshade"实体线
插入图片
< img /> 插入图片 （必须配合它的原则性属性src使用,例如：<img src="图片路径" />）
常用属性：
①src ="“图片的路径
②title=”" 提示文本内容
③alt="" 替换图片（当图片因为某些原因加载不出来，那么alt的值就会显示出来）
④border="" 边框
⑤height="" 高度
⑥width="" 宽度
网页支持的图片:
① GIF 256种颜色，支持透明，动画
② JPEG（高度压缩）1670万种颜色，不支持透明，不支持动画
③ PNG（网络可移植格式）无损压缩，支持透明，不支持动画，颜色从几种到1670万种
tips:
想要做拉伸效果做法：同时设计图片的宽度和高度，并且保证比例和原始比例不同；想要做等比缩放，只需要给出一个宽度或者高度，另外一个尺寸浏览器自动按照图片的原始比例缩放
注意：
img插入图像是真实存在的，占位置的，而背景图是不占位的
路径
①绝对路径：提供目标文档的完整主机名称、路径信息及文档全称
②相对路径：从当前文档开始的路径
③使用:
（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；
（2）如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称
（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为…/目标文档全称
例如： …/返回上一级文件夹
…/…/返回上两级文件夹
（4）根相对路径：从站点根目录开始的路径，以“/”开始
列表
列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容
① 无序列表<ul>…</ul>
语法：
<ul type="项目符号类型">
<li type="项目符号类型">内容</li>
<li>内容</li>
</ul>
其中：<li>…</li>表示一个项目
无序列表
- 无序列表项01
- 无序列表项01
- 无序列表项03
- 二级无序列表项01
- 二级无序列表项02
- 三级无序列表项01
- 三级无序列表项02
<h4>无序列表</h4>
<ul>
<li>无序列表项01</li>
<li>无序列表项01</li>
<li>
无序列表项03
<ul>
<li>二级无序列表项01</li>
<li>
二级无序列表项02
<ul>
<li>三级无序列表项01</li>
<li>三级无序列表项02</li>
</ul>
</li>
</ul>
</li>
</ul>
② 有序列表<ol>…</ol>
无序列表与有序列表的元素标签（子标签）<li></li>
例如：
<ul>
<li>内容1</li>
</ul>
语法：
<ol start="列表起点" type="项目符号类型">
<li>内容1</li>
<li>内容2</li>
</ol>
一般情况下，ol里面的li不需要单独设置tupe属性
有序列表
- 有序列表项01
- 有序列表项01
- 有序列表项03
- 二级有序列表项01
- 二级有序列表项02
- 三级有序列表项01
- 三级有序列表项02
<h4>有序列表</h4>
<ol>
<li>有序列表项01</li>
<li>有序列表项01</li>
<li>
有序列表项03
<ol>
<li>二级有序列表项01</li>
<li>
二级有序列表项02
<ol>
<li>三级有序列表项01</li>
<li>三级有序列表项02</li>
</ol>
</li>
</ol>
</li>
</ol>
③ 定义列表<dl>…</dl>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
</dl>
注意：
可以直接输入标记，查看标记默认状态
语法：
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
<dl></dl>定义列表
<dt></dt>表示一个项目
<dd></dd>表示一个项目下更详细的内容的解释
定义列表
- 我是定义列表的标题
- 我是定义列表的描述……
- 我是定义列表的描述……
<h4>定义列表</h4>
<dl>
<dt>我是定义列表的标题</dt>
<dd>我是定义列表的描述……</dd>
<dd>我是定义列表的描述……</dd>
</dl>
注意：
1、图文混排效果都用dl制作最简单；
2、dl中只允许出现dt和dd，dt和dd中可以存放任何内容、任何标签
超链接
创建超级链接<a></a>实现页面之间的跳转
href取值写法：http：//www…
http – 超文本传输协议（html）
https – 安全版的http
（配合它的原则性属性href使用：<a href="页面跳转的地址"></a>）
属性：
①href ="" 页面跳转的地址
例如：华为云论坛
语法：
<a href="链接目标" title="注释" target="打开链接窗口的形式">…</a>
Target：
①_blank 在新窗口中打开
②_self 在自身窗口中打开（默认）
③_parent在上一级窗口中打开，框架会经常使用
④_top 在浏览器的整个窗口中打开，忽略任何框架
链接类型:
①内部链接：当前网页与网页在同一个站点 <a href="文件名"></a>
②外部链接：当前网页与网页在不同一个站点<a href="URL"></a>
③E-mail链接：允许访问者向指定的地址发邮件（一般指要付费的企业邮箱）<a href="mailto:电子邮件地址"></a>
④局部链接：锚点：跳转到同一页面的某个位置or其他文档中的指定位置
1)相同文档：
①创建锚点：<a name="锚点名称">…</a>
②链接锚点：<a href="锚点名称">…</a>
2)不同文档：
<a name="网页名称#锚点名称">…</a>
⑤空链接<a href="#">…</a>（无目标，用于特效）
例如 以ie浏览器为例：
设为首页
设为首页
添加收藏
加入收藏夹
href地址取值为#，代表当前页面跳转。
将来如果不希望干扰到js，还可以将href取值书写为javascript：；或者javascript：void（0）；代表的含义是点击之后的功能由js控制，如果js不做任何设置，代表超链接点击之后不做任何事情
<a href="#">假链接</a>
<a href="javascript:;">假链接</a>
<a href="javascript:void(0);">假链接</a>
⑥脚本链接：一种特殊的链接，当单击设置脚本链接的文本or图像时，可以运行相应的javaScript语句。
常用脚本链接：
<a href=javascript:window.open(“https://bbs.huaweicloud.com/’,'华为云论坛”)>华为云论坛
关闭窗口：输入 javascript:window.close()
打开窗口：输入javascript:window.open('文件名')
tips:
增加网页长度，可以采用空字段
<p> </p>
……
<p> </p>
表格
在2005年之前，国内网站都是使用表格布局，缺点就是加载速度慢，用户等待时间长（当表格代码别浏览器全部读写以后才渲染页面）；现有阶段运用表格制作数据统计分区或页面
①表格基本结构
<table>
<tr>
<td></td>
</tr>
</table>
基本结构：
<table>...</table>-----定义表格
<tr>...</tr>----定义表行
<td>...</td>—定义表列（单元格）
<th>...</th>----文字标题栏（加粗）会默认自动居中
②表格标题：
<table>
<caption></caption>
</table>
③表格结构化:
作用：代码乱序时结构得到保持
结构化格式（加了无效果，浏览器看）
<thead>...</thead>----表示表头区
<tbody>...</tbody>----表体区
<tfoot>....</tfoot>------表尾区
直列化格式
<colgroup>...</colgroup>用于统一控制某一列的格式，取代重复的工作
（例如：用于某一列标红，或者某一列居中）
默认表格样式
| 姓名 | 性别 | 电话号码 |
|---|---|---|
| coco | 男 | 12345678888 |
| coco | 男 | 12345678888 |
| coco | 男 | 12345678888 |
<h4>默认表格样式</h4>
<table cellspacing="0" table-striped table-bordered>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话号码</th>
</tr>
</thead>
<tbody>
<tr>
<td>coco</td>
<td>男</td>
<td>12345678888</td>
</tr>
<tr>
<td>coco</td>
<td>男</td>
<td>12345678888</td>
</tr>
<tr>
<td>coco</td>
<td>男</td>
<td>12345678888</td>
</tr>
</tbody>
</table>
④特殊表格技巧:
制作凹凸表格：改变table的 bordercolorlight、bordercolordark属性
bordercolorlight 设置边框亮时的颜色（boder="1"时才有用）
bordercolordark 设置边框暗时的颜色（boder="1"时才有用）
隐藏表格某部分边框线：改变table下的frame属性和rules属性
细线表格效果公式:
①表格自身的border==“0”
②给表格设置背景颜色==细线颜色
③给表格设置、单元格之间距离cellspacing==细线粗细
④设置表格内部背景色
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table</title>
<style>
.table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.table thead tr th,
.table tbody tr td {
padding: 10px 12px;
text-align: center;
color: #333;
border: 1px solid #ddd;
border-collapse: collapse;
background-color: #fff;
}
</style>
</head>
<body>
<h3>css制作table细线表格</h3>
<table cellspacing="0" cellpadding="0" class="table">
<thead>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>电话号码</th>
<th>生日</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>coco</td>
<td>男</td>
<td>12345678888</td>
<td>2021-04-25 10:00:00</td>
</tr>
<tr>
<td>2</td>
<td>cici</td>
<td>男</td>
<td>13688889999</td>
<td>2021-04-25 10:00:00</td>
</tr>
<tr>
<td>3</td>
<td>tom</td>
<td>女</td>
<td>13656565656</td>
<td>2021-04-25 10:00:00</td>
</tr>
</tbody>
</table>
</body>
</html>
`
表单基础与应用
<form action="URL" method="表单的提交方式post/get">…</form>
Post方法可以传递大量信息（主流）
Get方法将值附加到请求该页的URL中，适合传递少量信息（默认）
①表单的元素 input标签必须含有name 属性和type属性
input标签通过变换不同的type属性取值，从而实现显示样式和功能的变化
文本框： <input type="text" />可以设置value默认值
密码框：<input type="password" />
单选框: <input type="radio" name="" value=""/>
通过设置name属性将所有的radio归为一类
<input type="radio" name="sex" id="nan"/>
扩大触发区域
在文字身上添加label标签，并且标签身上添加一个for=""，在想要触发的radio身上添加id属性，保证id属性取值等于for属性取值
<input type="radio" name="sex" id="nan" /><label for="nan">男</label>
多选框：默认选中 checked=“checked”
<input type="checkbox" name="" value=""/>
上传文件：<input type="file" name="pic" />
下拉列表：默认选中：目标option身上添加属性：selected=“selected”
<select name="">
<option value=""></option>
</select>
分组的下拉列表：
<select name="">
<optgroup label="分组名称"></optgroup>
<option value=""></option>
<option value=""></option>
</select>
多行文本：<textarea rows="" cols=""></textarea>
按钮:可以设置value默认值
提交按钮<input type="submit" value="" />
重置按钮 <input type="reset" value="" />
普通按钮<input type="button" value="" />
图片按钮 <input type="image" src="" />
配合原则性属性src去查找图片文件
注意：图片按钮的功能相当于提交按钮
文本域：<textarea></textarea>
cols – 水平方向显示的列数；
rows – 垂直方向显示的行数
表单域：<form></form>
一个html页面只能有一个form
action=“提交数据的地址”，前台工作人员不知道这个地址，直接留空即可
method – 提交的方式，get – 明文发送；post – 密文发送
设置领域标签:<fieldset></fieldset>
领域标签知识在外观的显示样式上多了一个边框线，没有任何的提交或者收集数据的功能
领域名称 – legend设置
<fieldset>
<legend>注册信息</legend>
</fieldset>
<form action="" method="get" >
<fieldset>
<legend>注册表单</legend>
<p>
<label>姓名 <small>字符在3~9位</small></label>
<input name="" type="text" placeholder="请填写真实的姓名">
<input name="" type="text" placeholder="请填写真实的姓名" class="text radius">
</p>
<p>
<label>自我介绍：</label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="checkbox" id="checkbox"> 做饭
<input type="checkbox" name="checkbox" id="checkbox"> 上网
<input type="checkbox" name="checkbox" id="checkbox"> 看小说 </p>
<p>
<label>性别：</label>
<input type="radio" name="radio" id="radio" value="radio"> 男
<input type="radio" name="radio" id="radio" value="radio"> 女 </p>
<p>
<label>学历：</label>
<select name="select" id="select">
<option value="1">大学</option>
<option value="2">高中</option>
<option>小学</option>
</select>
</p>
<p>
<label>文件域：</label>
<input type="file" name="fileField" id="fileField">
</p>
<p>
<label></label>
<input name="" type="submit" class="button blue" value="提交">
<input name="重置" type="reset" class="button" value="重置">
</p>
</fieldset>
</form>
tips:网页制作小技巧
①结构分析图
②可以通过标签嵌套实现一些复杂布局
③代码尽可能精简，（网站优化）减少网页内存，提高运行速率
④刚开始学习Html，记事本或者Notepad++即可。
⑤标题标签一般都是用<h3></h3>。随着数字的增大字体会变小。
⑥高级记事本可以撤销多次，而记事本只能撤销到前一次；高级记事本还能高亮显示。
⑦注释不能嵌套，千万不能嵌套！！！！！！！！
好了，到这里html入门基础就学完了，相信通过今天的学习，大家对html已经有了一些初步的认知了。坚持手写HTML，这个在学习初期非常关键哦，大家可以尝试手写一些html加深一下学习印象哦，加油！资历有限，错误难免，欢迎大力指正。
【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890
- 点赞
- 收藏
- 关注作者
评论（0）