本文是HTML和CSS的基础总结，涵盖了HTML的基本结构标签、进阶组件、Emmet快捷键、HTML5新特性，以及CSS的基础知识，包括文本、字体、背景、盒子模型、定位与浮动等。还详细介绍了CSS3的新特性，如渐变、阴影、动画和Flex布局。最后提到了响应式布局和移动端开发的相关技巧。
HTML&CSS Favorite
1.基础知识
1.HTML
1.1基本结构标签
1.骨架
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2.排版标签
标题标签 <h1> 标题文本 </h1>h1> h1~h6
段落标签 <p> 段落文本内容 </p>
水平线标签 <hr/> 水平线
换行标签 <br/> 换行
布局标签 <div> 这是一个区域 </div> division
<span> 今日价格 </span>
3.文本格式化标签
文字粗体 <b></b> <strong>粗体字</strong>
文字斜体 <i></i> <em>斜体字</em>
文字加删除线 <s></s> <del>加删除线</del>
文字加下划线 <u></u> <ins>加下划线</ins>
4.标签属性
<标签名 属性1=“属性值1” 属性2="属性值2">内容</标签名>
5.图像标签
<img src=" " alt=" " title=" " width=" " height=" " border=" " />
src="URL" 图形的路径，必填
alt="文本" 图像不能显示时的替换文本
title="文本" 鼠标悬停时显示的内容
width/height="数字" 设置图像的宽高
border="数字" 边框的厚度
6.链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href="外部链接/内部链接/空连接/超链接"
<a href="http://www.baidu.com"></a>
<a href="index.html"></a>
<a href="#"></a> <a href=""></a>
<a href="http://www.baidu.com"><img src="banner.jpg"/></a>
target="self/blank/" self为默认值，blank为新窗口打开
<base target="_blank" /> 把所有的连接都默认添加target,写在<head>里
text-decoration: none;
7.注释标签
<!-- 我是注释 -->
8.锚点
<h3 id="two">第二集</h3> 创建链接锚点
<a href="#two">跳转到第二集</a> 跳转接口
1.2进阶组件标签
1.表格 --多用来展示数据
<table></table>
tr - th
tr - td
tr - td
<table border="1" width="500" height="200" align="center"
cellspacing="0" cellpadding="1 0">
<caption>表格顶部大标题</caption>
<thead class="表格的头部">
<tr class="表格的标题行">
<th>标题行01</th>
<th>标题行02</th>
<th>标题行03</th>
</tr>
</thead>
<tbody class="表格的主体行">
<tr class="表格第一行">
<td>第一行单元格01</td>
<td>第一行单元格02</td>
<td rowspan="2">第一行单元格03,跨行合并下边一格</td>
</tr>
<tr class="表格第二行">
<td>第二行单元格01</td>
<td>第二行单元格02</td>
<td>第二行单元格03，被跨行合并应删除</td>
</tr>
<tr class="表格第三行">
<td>第三行单元格01</td>
<td>第三行单元格02</td>
<td>第三行单元格03</td>
</tr>
</tbody>
<tfoot class="表格的底部行">
<tr class="表格底部">
<td>底部单元格01</td>
<td>底部单元格02</td>
<td>底部单元格03</td>
</tr>
</tfoot>
</table>
border 设置表格的边框，默认border="0"无边框
align 设置表格在网页中的水平对齐方式，left center right
cellspacing 设置单元格与单元格边框之间的空白距离
cellpadding 设置单元格内容与单元格边框之间的空白距离
rowspan 跨行合并，合并上下 rowspan="合并单元格的个数"
colspan 跨列合并，合并左右 colspan="合并单元格的个数"
2.列表 --多用来布局
ul - li /无序列表
ol - li /顺序列表
dl - dt /标题列表
- dd
<ul class="无序列表">
<li>列表项01</li> * 无序列表列表项01
<li>列表项01</li> * 无序列表列表项01
<li>列表项01</li> * 无序列表列表项01
</ul>
<ol class="有序列表">
<li>列表项01</li> 1.有序列表列表行项01
<li>列表项01</li> 2.有序列表列表行项01
<li>列表项01</li> 3.有序列表列表行项01
</ol>
<dl class="自定义列表">
<dt>中国</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
</dl>
list-style:none; //取消列表样式
3.表单
<form action="URl地址" method="提交方式" name="表单名称">
</form>
action 用于指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式，其取值为get或post
name 用于指定表单的名称，以区分同一个页面中的多个表单
4.input控件
<input type="属性值" value="控件内显示的默认文本" />
<form action="URl地址" method="提交方式" name="表单名称">
<input type="属性值" value="控件内显示的默认文本" name="控件名称"
size="空间在页面内显示的宽度" checked="checked定义默认选中的项"
maxlength="允许输入最多的字符数" placeholder="First name"/>
</form>
男 <input type="radio" checked="checked" name="sex"/>
女 <input type="radio" name="sex" />
type="text/password/radio/checkbox/button/submit/reset/image/file"
5.label标签
作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
-用法一，label直接包含表单
<label> 用户名：<input type="text" /> </label>
-用法二，通过for 和 id来控制
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
6.textares文本域控件
<textares cols="每行中的字符数" rows="显示的行数">
文本内容
</textares>
7.下拉菜单列表
请选择：
<select>
<option selected="selected默认选中">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
1.3 HTML用例
//字体布局
<p>
JavaScript,CSS, <em class="加效果">HTML</em>,Java,C##,<strong>Android</strong>,
</p>
<p>
<del class="删除线">￥5800</del> <strong>￥4900</strong>
</p>
1.4 Emmet快捷键语法
1. div+tab键
2. div*3
3. ul>li
4. div+p
5. .className
6. #idName
7. .className$*3 //生成有顺序的自增的类名
1.5 HTML5新增
1. 新增语义化标签
<header>头部</header>
<nav>导航</nav>
<article>内容标签</article>
<section>块级标签</section>
<aside>侧边栏标签</aside>
<footer>底部</footer>
2. 新增多媒体标签
<audio/video controls loop >
<source src="" type="video/mp4" >
<source src="" type="audio/ogg" >
</audio>
-src:播放文件的路径
-controls:音频播放器的控制器面板
-autoplay:自动播放
-loop:循环播放
-poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面
-width:视频的宽度
3. 新增input表单属性
<input type="text" list="subjects" placeholder="提示文字" autofocus="autofocus"
required="required" accesskey="" multiple="multiple" autocomplete="on/off">
<datalist id="subjects">
<option value="前端与移动开发" label="javascript"/>
</datalist>
<output>总金额：￥100.00</output>
4. 新增type属性
- type= text/password/email/tel/url/number/range/color/time/date/
datetime-local/month/week
-常用 type= 'email/url/date/time/number/tel/search/color'
5. 进度条
<progress max="100" value="100"></progress>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>
6. 内嵌入边框线的文字
<fieldset>
<legend>内嵌入边框线的文字</legend>
</fieldset>
2.CSS
2.1 CSS基础
2.1.0 CSS基础
-
建议书写顺序：定位/盒子/文本
-
文本：(颜色，水平位置，垂直位置，首行缩进，下划线)
-
字体：(大小，字体，粗细，倾斜)
-
背景：(背景颜色，背景图片，背景透明，背景平铺，背景位置，背景滚动)
-
盒子模型：(宽高，边框线，外边距，内边距)
-
定位与浮动
-
显示与隐藏
1.文本：(颜色，水平位置，垂直位置，首行缩进，下划线)
color: black //前景色（文字颜色）
text-align:center;/left;right;center;justify; //设置文本内容水平对齐方式height: 50px; //搭配使用,行高等于高度，垂直居中
line-height: 50px/24px;//行高，设置文本的最小行高,元素中每一行文字所占据的高度,两行文字基线（baseline）之间的间距vertical-align: middle;//设置元素的垂直对齐方式,只针对行内元素或行内块元素(img)
baseline;bottom;text-bottom;top;text-indent: 2em; //首行缩进，设置第一行内容的缩进，1em就是一个汉字的宽度
text-decoration:none;underline;overline;line-through //设置文字的装饰线text-shadow: //给文字添加阴影效果
direction:
letter-spacing
word-spacing:
text-transform:
white-space:2.字体：(大小，字体，粗细，倾斜)
font: font-style font-variant font-weight font-size/line-height font-familyfont-size: 16px;2em(200%) //文字大小，16px为默认
font-family: “宋体”;/Arial,“Microsoft YaHei”,“黑体”; // 设置字体，多个字体
font-weight:normal(400);bold(700) //用于设置文字的粗细（重量）
font-style: normal;italic;oblique //设置文字的常规、斜体显示
font-variant: normal;small-caps; //影响小写字母的显示形式.small-caps将小写字母替换为缩小过的大写字母3.背景：(背景颜色，背景图片，背景透明，背景平铺，背景位置，背景滚动)
background: url(“images/beer.png”) center center/150px 250px no-repeat #f00
image position/size repeat attachment color
background: rgba(0,0,0,0.3) //背景半透明，最后一个参数Alpha透明度，取值0~1之间
background-color: #000000;transparent;//透明色
background-image: url(“bg001.png”);
background-repeat: repeat;no-repeat;repeat-x;repeat-y; //设置背景图片是否要平铺
background-size: auto;cover;contain;150px 180px; //设置背景图片的大小
background-attachment: scroll;fixed; //背景图片跟随元素关系，滚动/固定
background-position: 60px 80px; //设置背景图片在水平、垂直方向上的具体位置
: left;center;right;
: top;center;bottom;
: center top; //常用定位background: linear-gradient(起始方向，颜色1，颜色2, …);
background: linear-gradient(left,red,blue); //背景颜色线性渐变
background: -webkit-linear-gradient(left,red,blue);cursor:auto;default;pointer;text;none; //设置鼠标指针（光标）在元素上面时的显示样式
opacity: 0.2; /盒子半透明/4.盒子模型：(宽高，边框线，外边距，内边距)
width: min-width;max-width;
height: min-height;max-height;border: 1px solid #f00;1px solid transparent; //透明边框
border-width：1px;
border-style：none;dotted;dashed;soild;double;groove;ridge;inset;outset;
border-color: #fff;border-radius: 50%; // 缩写属性,50%一个圆
border-radius: 15px 0 0 15px; //左上角 右上角 右下角 左下角
border-top-left-radius: 20px; //上左
border-top-right-radius: 20px; //上右
border-bottom-right-radius: 20px; //底右
border-bottom-left-radius: 20px; //底左border-collapse:collapse; //相邻边框合并在一起
margin: //外边距, margin一般是用来设置兄弟元素之间的间距，左右外边距
padding: //内边距, padding一般是用来设置父子元素之间的间距margin: 0 auto; //块级盒子水平居中，盒子须有宽度
text-align: center; //文字，行内元素，行内块水平居中box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset //可以设置一个或者多个阴影
box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);-
box-sizing: //用来设置盒子模型中宽高的行为
- content-box; //padding、border都布置在width、heig
最低0.47元/天 解锁文章
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
