锐单电子商城 , 一站式电子元器件采购平台!
  • 电话:400-990-0325

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

相关文章