HTML5+CSS3基础

时间：2023-01-27 02:00:00 5w200kr碳膜电阻

前端

基础知识
- 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 (左右)
eg.首行2,3列合并，则在第2个上改成

<td clospan="2"> td>

然后删除第三个即可

② 跨列 . rowspan (上下)
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>

① 类选择器（最常用）

   1、注意不用特定标签名做名字
   2、尽量使用英文命名
   3、多选择器之间，使用空格隔开

.name1{ 
        ...}
.name2{ 
        ...}

<div class="name1">...div>
<div class="name1 name2">...div>

② id选择器（只能被调用一次）

#name1{ 
        ...}

<div id="name1">...div>

③ 通配符选择器（应用于页面内的所有标签）

*{ 
        ...}

④ 后代选择器

一、空格隔开
二、可以多级定位，从大到小排列

eg.ol>li，ul>li，ul>li三组并存，找到最后一个 ul>li 设置。

<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百科大全！

HTML5+CSS3基础

前端

相关文章