HTML5+CSS3基础
时间:2023-01-27 02:00:00
前端
- 基础知识
-
- HTML5首先知道
-
- 1.标签成对
- 2.必有代码
- HTML5知识
-
- 1.标题
- 2.水平线
- 3.设置按钮
- 4.输入框
- 5.图像标签
- 6.插入音频
- 7.超链接
- 8.特殊字符
- 9.内联框架
- 10.表格框架
- 11.表格属性
- 12.合并单元格
- 13.列表标签
- 14.表单
- 15.`label`标签
- 16.select下拉表单元素
- 17.文本域
- CSS3知识
-
- 1.css格式:
-
- ① 类选择器(最常用)
- ② id选择器(只能调用一次)
- ③ 通配符选择器(页面上的所有标签)
- ④ 后代选择器
- ⑤ 子选择器
- ⑥ 并集选择器
- 2.字体
- 3.文本
- 四、三种样式表
- 5.Emmet句子(方便句)
- 6.格式化文档
- 7.伪选择器(添加特殊效果)
- 8.focus 伪类选择器
- 9.元素显示模式
-
- 一、块元素(常见:`h1、p、div、ul、ol、li`等)
- 二、行内元素
- 三、行内块元素(例)`img、input、td`)
- 四、元素显示模式转换
- 10.背景属性
- 11.cursor(设置光标形状)
- 12.取消列表前的点
- 13.CSS三个特性
- 盒子框架
-
- 框架相关知识
-
- 1.网页布局的本质
- 2.由盒子模型组成(Box Model)
- 3.边距(border)
- 4.内边距(padding)
- 5.外边距(margin)
- 6.清除内外边距(网页会默认添加内外边距)
- 7.盒子水平垂直
- 8.布局思想
- 9.圆角边框
- 10.盒子阴影
- 11.文字阴影
- 十二.三种布局方式:
-
- 1.标准流
- 2.浮动
- 3.定位(position)
- 13.清除浮动
- 14.定位叠放次序
- 15.绝对定位居中算法
- 16.定位注意
- 17.圆边长条框 / 圆点制作
- 18.元素显示隐藏
- 未解决的事情
基础知识
HTML5首先知道
1.标签成对
<head> <title> title> <body>body> head>
2.必有代码
DOCTYPE html>申请类型标签 <html lang="en"> 语言为英语 <html lang="zh-CN"> 语言为中文 <html lang="fr"> 语言为法语
<meta charset="UTF-8">保存文字类型(简、繁体)
<meta name="keywords" content="关键字">
<meta http-equiv="refresh" content="3;http://www.baidu.com" />
<meta name="description" content="详情页" />
<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" type="image/x-icon" />
HTML5知识
1.标题
<h1>h1> ~ <h6>h6>
2.水平线
<hr>
# 修改水平线颜色
<style> border: none; //去掉边框遮掩 height: 1px; //一定要设置水平线的大小 background-color: #ccc; //再设置颜色 style>
3.设置按钮
<button>搜索button>
4.输入框
<input type="text" value="请输入..." class="...">
5.图像标签
<img src="(指定图像的路径与文件名,必须与网页文件夹放在一起)" alt="(当src无效时,显示alt)" title="(鼠标放在图像上时,提示的文字)" width="500" height="500" width 与 height任意选择一个设置,则保持比例缩放,都更改容易改变比例 />
① 相对路径
相对于网页文件夹,图片与网页同文件夹:
<img src="img.jpg"/>
相对于网页文件夹,图片在下级文件夹:
<img src="...(图像文件夹名)/img.jpg"/>
相对于网页文件夹,图片在上级文件夹:
<img src="../img.jpg"/>
② 绝对路径
<img src="D:\...\..."/>(不同电脑路径不同,跨电脑一般不建议使用)
6.插入音频
<audio controls,autoplay,loop>
无法播放:
浏览器检测到<audio>标签,则播放,如果检测不到,则浮现这里的文字
<source src="xxx.mp3">
audio>
7.超链接
<a href="跳转目标" target="目标弹出方式">
超链接对象
a>
① 这里的 href
链接的
- 若是网页,与图片的连接方式相似(文件夹方式)
- 若是 # 则代表空链接
- 若是文件,则链接的是一个下载链接,点击则下载文件(文件夹方式)
②
target="-self" 当前页面打开(默认)
"-blank" 开新页
③ 锚点链接(定位至页面中的某位置)
<h3 id="this"> 标题 h3>
<a href="# this"> 文本 a>
8.特殊字符
① 空格
和
② < <
小于号
> >
大于号
③ & &
④ ¥ ¥
⑤ © ©
,版权
⑥ ® ®
,商标
⑦ ° °
,摄氏度
⑧ ± ±
,正负号
⑨ ××
,乘号
⑩ ÷÷
,除号
⑩① ²²
,2次方
⑩②³ ³
,3次方
9.内联框架
<iframe src="网址" width="500" height="500" frameborder="边框粗细">
10.表格框架
<table>
<tr>每一行,有几个<tr>标签对就有几行
<th>表头单元格th>
<td>
1.行中的每一格,有几个<th>标签对,就有几格
2.中间插入图片与链接,正常嵌入即可
td>
tr>
table>
11.表格属性
<table align="center">
<table border="1" 有 border="0" 无>
<table cellpadding="2">
<table cellspacing="2">
<table width="600" height="400">
12.合并单元格
① 跨列 . colspan (左右) 然后删除第三个 ② 跨列 . rowspan (上下) 然后删除第三个 各种列表之间可以互相嵌套 ② 有序列表 收集信息:表单域、表单控件和提示信息组成 ② 表单控件(元素) 用于把其他区域与选项关联起来 1、注意不用特定标签名做名字 一、空格隔开 eg.ol>li,ul>li,ul>li三组并存,找到最后一个 ul>li 设置。 一、就近原则 可以不同标签同时改 ① 内部样式表(嵌入式引入) ② 行内样式表(行内式引入) ③ 外部样式表(开发最常用) ① 多标签
eg.首行2,3列合并,则在第2个上改成 <td clospan="2"> td>
即可
eg.某列的第2,3行合并,则在第2个上改成 <td rowspan="2"> td>
即可
13.列表标签
① 无序列表<ul>
<li>任意li>
<li>任意li>
ul>
<ol>
<li> 1 li>
<li> 2 li>
<li> 3 li>
ol>
<dl>
<dt>首行dt>
<dd>下拉选项dd>
<dd>下拉选项dd>
dl>
14.表单
① 表单域(保存数据)<form action="url地址" method="提交方式" name="名称">
各控件
form>
xxx<input type="属性值">
name:名字 value:默认值
1.
<input type="text" maxlength="最长输入x字符" placeholder="表单默认内容,但并不记录">
2.
<input type="password" maxlength="最长输入x字符">
3.
xxx<input type="radio" name="名字要相同,才变成单选" value="返送值,该选项代表的值">
4.
xxx<input type="checkbox" value="返送值,该选项代表的值">
5.
<input type="submit" value="无值默认显示提交">
6.
<input type="reset" value="无值默认显示重置">
7.
<input type="button" value="无值默认不显示">
8.
<input type="file" value=无值默认显示“选择文件”>
9.
hidden
10.
image
15.
label
标签<label for="名字">...label>
<input type="属性" id="名字">
<input type="radio" name="sex" id="nan">
<label for="nan">
<img src=光莲.jpg width="20">男label>
16.select下拉表单元素
<select>
<option selected="selected"加上后默认选择>...option>
<option>...option>
select>
17.文本域
<textarea cols="每行中字符数" rows="显示行数">
......
textarea>
CSS3知识
1.css格式:
<head>
...
<style> (区域名){
规则1;规则2;......} style>
head>
① 类选择器(最常用)
2、尽量使用英文命名
3、多选择器之间,使用空格隔开.name1{
...}
.name2{
...}
<div class="name1">...div>
<div class="name1 name2">...div>
② id选择器(只能被调用一次)
#name1{
...}
<div id="name1">...div>
③ 通配符选择器(应用于页面内的所有标签)
*{
...}
④ 后代选择器
二、可以多级定位,从大到小排列<style> .nav li a{
...} style>
<ol> ... ol>
<ul><li><a> ...a>li>ul>
<ul class="nav">
<li><a> ... a>li>
<ul>
⑤ 子选择器
二、只选择最近的一个选择器
三、必须用“>”隔开<div class="nav">
<a href="#" class="nav2">测试文字1(影响了这一行)a>
<p>
<a href="#">测试文字2a>
p>
div>
.nav > a{
text-decoration: none;
}
⑥ 并集选择器
div,p,pig li{
...}
<div> 被影响 div>
<p> 被影响 p>
<ul class="pig">
<li> 被影响 li>
<ul>
2.字体
.name{
字体样式 font-family:"微软雅黑";
字体大小 font-size:12px;
字体粗细 font-weight:normal; 正常
bold; 粗体
bolder; 特粗
lighter; 细体
800; 数字自定义大小
行高 line-height:24px; 带单位的是高度
1.5; 不带单位的是倍速
斜体 font-style:italic;
综合复写顺序:斜体 粗体 字体大小写/行高 [字体样式(务必要有)]
eg.font: italic 700 16px/20px "微软雅黑";
}
3.文本
.name{
颜色 color:red;/#FF0000;/rgh(200,0,0);
水平对齐 text-align:center; 居中
left; 靠左
right; 靠右
垂直居中:使文字行高等于盒子高度
若行高<盒子高度 = 文字偏上
若行高>盒子高度 = 文字偏下
line-height:12px;
height:12px;
文本装饰 text-decoration:underline; 下划线
overline; 上划线
line-through; 删除线
none; 取消装饰
文本缩进 text-indent:20px 20像素
2em 2文字(常用)
行间距 line-height:20px;
}
4.三种样式表
所有CSS代码放在中,置于
里面
用于局部或特殊修改,则直接元素修改(用于简单修改)<p style="color:pink;"> ... p>
用于样式特别多的情况,单独写CSS文件,在引入
一、首先建立一个CSS文件,专门直接写CSS样式代码
二、引入文件
<link rel="stylesheet" href="文件路径">
5.Emmet语句(便捷语句)
xxx*2 => <xxx元器件数据手册
、IC替代型号,打造电子元器件IC百科大全!
相关文章