2020前端学习笔记_页头标签-优快云博客

本文链接：https://blog.youkuaiyun.com/djxhc/article/details/104250234

这篇博客详细记录了前端学习的过程，涵盖了HTML基础，如字符集编码、标题、样式设置；深入讲解了文本标签，包括em、strong、del、ins等；介绍了CSS的样式表类型和选择符；并触及了JavaScript的基础概念和函数用法。此外，还提到了表格的使用，包括caption、th、合并单元格等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端学习笔记

第一HTML基础
CSS基础
javascript基础
HTML5新特性基础
响应型布局
jQuery基础
jQuery UI基础
jQuery mobile基础
createJS基础

其它全套项目
JS基础
前端基础功
jquery部分高级
HTML5全面
CSS3
ajax
移动WEB开发
面向对象
canvas
框架
移动混合WEB开发
主流框架
NODE

第一部分 HTML基础

1、页头标签 （head 、meta 、link、title、style、script 、base）
2、关于字符集编码
常见的字符集编码有：
UTF-8:万国码
GB2312:中国的国标编码
*GBK:*微软中文版集成
BIG5：繁体中文（港澳台）
3、设置页面字符编码如下：

<meta charset="utf-8" />
也有写成
<meta charset="utf8" />

4、设置页面描述信息、关键字、及作者和设置页面自动刷新或跳转如下：

<meta name='description' content="本站主要是研究和学习用，解决生产中遇到的各种问题，提供教程、软件下载等信息" />
<meta name="keywords" 
	content="视频教程、软件下载、旅馆业报修、维护、驱动下载"/>
<meta name="author" content="gxlb120" />
<meta http-equiv="Refresh"
	content="5;url=http://www.qq.com" />

5、title标签的使用
TITLE标签的作用：

定议浏览器工具栏中的标题
提供页面被收藏到收藏夹的标题名称
显示在搜索引擎结果中的页面标题
例：<title>系统指南使用系统<title>双标签

6、页头中style标签的使用
在本页面加入CSS样式而不是单独文件使用，所以style这个标签要写到head标签内。
如下：

<head>
<style type="text/css">
	body{background-color:red; 
	         }
</style>
</head>

7、link标签的使用
常用用于链接引用外部文件，如引用外部CSS文件等。
例如：

<head>
	<link rel="stylesheet"
		type="text/css" href="css/web.css" />

DAY2 文本标签

1. **<p> 和<hr/>******
2. 空白与注释 在HTML下想多个空格就使用空格：  注释就用,页面没必要用太多注释，大型网站影响速度
3. 强制换行和软件换 行<br/>和,软件换行是在页面框架大小改变时，变小了，到设定的位置就开始换行。
4. HTML中常用的字符实体 空格：  小于号:< 大于号:> 和号：& 引号：" 版本：© 注册商标:®&reg
商标：™&trade
乘号：×&times
除号:÷&divide

5、短语标签：
em:把文本定义为强调的内容。
strong:把文本定义为更强调的内容。
dfn:定义一个定义的项目。
code：定义计算机代码文本。
samp：定义样本文本。
kdb：定义键盘文本。
var：定义计算机代码中的变量。
cite：定义引用。

6、文本修饰标签：

强调标签： strong、em 都是双标签
两者区别：1、写法和展示效果是有区别的，一个是加粗，一个是斜体，2、strong的强调性硬强，em的强调性稍弱。
上标：sup 是双标签
下标：sub 是双标签
del：删除线，一般情况下，删除文本是和插入文本ins配合使用的。
ins:插入文本,下画线效果例：促销原价del300del，现价ins100ins

7、图片标签与图片属性
标签：img:图片为单标签。
属性：

src：引入图片的地址。
alt：当图片出现问题不显示时，显示友好提示文字
title：提示信息，当光标滑过上面时的提示信息
width：设置图片宽
height：设置图片的高，单位为像素

8、引入文件的地址路径：
相对路径：

.在路径当前路径下如 img src=’./dog.jpg’ alt=""
…上一级路径 src="…/images/dog.jpg" HTML文件上一级目录
绝对路径：
http://www.qq.com/web/img/2020/1.jpg
e:/img/2018/2.jpg

9、跳转链接：《a》
标签：a 为单标签。
属性：

href:链接地址，例：< a href=“http://www.qq.com”>访问腾讯
target：跳转打开窗口方式，默认在当前页面打开 -self, -blank新窗口打开
base标签：单标签
作用：改变链接的默认行为的
语法：写在head标签内
例：< base target="-blank ">

10、跳转锚点
作用：当前页面跳转，使用也多，返到首页，书目录等

实现方式-：# 和id
例 < a href="#html" >点我跳到html< /a>… < h2 id=“html”> html说明 < /h2>
实现二：
- #号和name属性

例：

例：<a href="#html"> 点击跳转到html</a>
<p>这是测试内容</p>
<p>这是测试内容</p>
<p>这是测试内容</p>
<p>这是测试内容</p>
<p>这是测试内容</p>
<a name="html">跳到这里来</a>
<a id='html'>html 这是第二种锚点使用方法</a>
<h2>html简介</h2>
<p>点上面链接跳到html简介上方</p>
<p>这是测试内容</p>

015.CSC样式表

CSS 样式有：内部样式表（最好放在head区）、外部引用式
外部样式表：要加@charset “utf-8”;
页面导入外部样式：`<link rel=“stylesheet” href="url type=“text/css”>

rel=“stylesheet” 这是建立关联性
href=‘URL’ 这是外部CSS相对地址
type=“text/ css” 定义文档类型
导入外部样式第二种方法：<style>@import url("css/web.css")
link 和import区别：1本质差别，link是html语言，@import是CSS提供的方法；2其次加载顺序：link导入CSS是结构同时加载，@import是等框架加载完后再加载CSS.3就是兼容性差别，link无，@import有
内联样式表《标签 style=“width:300px;height:100px;background:red;” 》《/标签》

016样式权重和作用域

内联样式表（行内样式）：权重最高
外部样式和内部样式和先后顺序有关，写在后面的会把前面的覆盖

017-18选择符、ID选择符

类型选择符（标签选择符）
- html中所有的标签都可以直接对元素进行选择。 P I a body div 等等
- 特点：对页面中所有当前类型的元素进行选择。
- 应用：清除某个元素默认样式的时候、统一某个元素样式的时候才这样用
- 如a{text-decoration:none} 统计去掉A的默认下划线。
ID选择器

语法：<标签 id=“id名字”>《/标签》
CSS: # id名字｛css语句｝
特点：ID名字在单一一个页面内是唯一的
应用：ID名划分网页外围结构的。

<body>
<div id=logo></div>
<div id=nav></div>
<div id=banner></div>
<div id=main></div>
<div id=link></div>
<div if=footer></div>
布局 先从上到下，然后再左右划分  ，总的外围框架遵循ID唯一性。
CSS命名规范：
+ 不能使用关键字命名
+ 英文字母开头，后面可以连接数字，连接符、下划线

3：类选择器（class选择符）
语法：《标签 class=“class名称”》《/标签》
CSS: .class名称｛CSS语句｝
特点：一个元素可以起多个CLASS名称如：class=box box1 box2

019选择符

4包含选择符
语法：父元素选择符子元素选择符｛CSS语句；｝
5群组选择符
语法：选择符1，选择符2，选择符3.。。｛CSS语句｝

了解函数的用途

了解函数
定义函数
函数调用
带参数的函数
带返回值的函数
1、什么是函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
如：实现十组数据的和。

//这是常用的1组数据相加之和
var a1=10;
var a2=20;
var sum=a1+a2;
alert(sum);
//这是定义函数 实现多组数据相加的和
function demo(a,b){
	var sum = a+b;
	return sum;
}
//这是定义变量调用方法,AB的值输入即可。
var v1 = demo(10.50);
var v2 = demo(10.20);
var v3 = demo(10.50);
alert(v1);//打印结果
alert(v2);//打印结果
alert(v3);//打印结果

2、定义函数：
语法： function 函数名() {
函数体；（代码块）
}

注意：javascript对大小写十分敏感，所以这里的function必须小写，在函数调用时，必须按照函数的相同名称来调用函数。
如：

function demo(){
	var a=10;
	var b=20;
	var sum=a+b;
	alert(sum);
}
function tell(){
	var n=10;
	var m=30;
	var vl=n*m;
	alert(vl);
}

3、函数的调用：

函数在定义好之后，不能自动执行，需要进行调用。
调用的方法有两种：
- 在script标签内调用；
- 在html文件中调用；

<script>
function demo(){
	var a=10;
	var b=20;
	var sum=a+b;
	alert(sum);
}
demo();//在脚本里调用函数
</script>
<form>
	<input type='butoon' value="按钮" onclick="demo()">
	//这是在html表单里调用函数，通过点击按钮 调用结果。
</form>
或者
<button onclick="demo()">按钮</button>

4、带参数的函数

函数参数：在函数调用中，也可以传递值，这些值被称之为参数，例： demo(arg1,arg2);
参数的个数可以任意多，每个参数通过，隔开。
注意：参数在传递时，其顺序必须一致。

<script>
function demo(a,b){
	var sum=a+b;
	alert(sum);
}
demo(10,30);//在调用方法时，要给参数传值
demo(100,200);
</script>

2020-09-16 最新WEB开发全套教程笔记

学习目标：

学习表格（会使用），一般用在注册页面、数据显示方面。
理解能说出表格用什么做什么的，表格的基本结构组成。能熟练写出N行N列的表格。能合并单元格。
表格的作用：显示或展示表格式数据，因为它可以让数据显示的非常规整，可读性非常好。
表单
列表

1、表格：

表格的主要目的是用于显示特殊数据的
一个完整的表格有表格标签table、行标签tr、单元格标签td组成。没有列标签。
标签中只能嵌套类的单元格
td标签，就像一个容器，可以容纳所有元素。
2、表格的属性：
表格有部分属性我们不常用，重点要掌握cellspacing、cellpadding

属性	含义	常用属性值	备注
border	设置表格的边框	单位为像素	默认border=‘0’ 无边框
cellspacing	设置单元格和单元格之间的空白间距	单位为像素	默认2PX
cellpadding	设置单元格内容与单元格边框之间的间距	单位为像素	默认1PX
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left\center\right	left

3、表头单元格标签th

作用：
- 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中。
语法：
- 只需用表头标签th替代相应的单元格标签td 即可。

<table border="1" width="780" height="300" 
	align="center" cellspacing="0" cellpadding="10">
	<caption>表格标题为：学生通讯录</caption>
	<tr>	
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>出生日期</th>
			<th>联系电话</th>
			<th>家庭地址</th>
			<th>联系方式</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>20</td>
			<td>男</td>
			<td>19900516</td>
			<td>15278856687</td>
			<td>广东省深圳市宝安区</td>
			<td>QQ407005536</td>
		</tr>
</table>

4、表格标题 caption

宝义和用法：

<table>
	<caption><h3>这里是表格的标题</h3></caption>
</table>

注意：
- caption元素定义表格标题，通常会居中显示表格之上。
- caption标签必须紧随table标签之后。

个人信息表caption

姓名	年龄	性别	生日	联系电话	家庭地址
徐秋白	20	男	1990-12-25	18518625815	广西来宾市兴宾区
徐秋白	20	男	1990-12-25	18518625815	广西来宾市兴宾区
徐秋白	20	男	1990-12-25	18518625815	广西来宾市兴宾区

5、合并单元格
合并单元格2种方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
要合并的单元格在同一个行上，跨了多个列，那么不用colspan;
要合差的单元格在多行上垂直竖着合并，跨了多行就用rowspan;
合并单元格的顺序：按照先上后下，先左后右的顺序。
合并单元格三步曲：
- 1.先确定是跨行还是跨列合并。
- 2.根据先上后下，先左后右的原则，找到目标单元格，然后写上合并方式，还有要合并的单元格数量，比如
- 3.删除多余的单元格，谁被合并了就删除谁。