学习前端的第一天8.14

原创于 2019-08-15 08:30:29 发布 · 205 阅读

CC 4.0 BY-SA版权

学习前端的第一天8.14

一、HTML简介：
HTML：Hyper Text Markup Langage（超文本标记语言）
HTML5 狭义： HTML5就是HTML的第五个版本，广义上来说，所有的新一代的web前端开发技术统称为HTML5，HTML5,CSS3(层叠样式表),ES6以及新的WebApI(websoeck,webWorker…)

HTML ：用于显示网页内容
CSS ：用于美化网页样式
JavaScript （JS）：用于添加网页动态功能

二、HTML基础模板

在这里插入代码片
<!-- 注释，Ctrl + ?/ 快速注释一行-->
<!-- 注释：对代码的解释，注释部分的信息不会被浏览器解析渲染 -->
<!-- 使用!表示比较重要的信息 -->
<!-- DOCTYPE DOC document文档 type类型-->
<!-- !DOCTYPE html 表示声明当前文档类型为HTML类型，这种声明是HTML5之后出现的一种新的声明方式，让浏览在进行解析代码的时候，按照HTML5的标准进行解析渲染 -->
<!DOCTYPE html>
<!-- <标签名> 标签包裹的内容 </标签名> 标签对的结构 -->
<!-- html是html文档中的根标签，一个页面中只能有一个html根标签 -->
<html>
	<!-- head 表示网页中的头部信息，包含了声明、引入、编写css等操作-->
	<head>
		<!-- 单标签(只有开始标签，没有结束标签) 单标签一般用于引入或声明内容 -->
		<!-- 单标签末尾在html5之前需要添加/ <meta /> html5之后就不用加了-->
		<!-- <标签名 属性名=属性值 属性2名=属性2值 > -->
		<!-- charset 设置当前网页的字符集 utf-8国际通用字符编码-->
		<!-- 一定要写在head下的第一个标签，为了防止闪现乱码的情况-->
		<meta charset="utf-8">
		<!-- title 标题 -->
		<!-- Ctrl + s 保存代码 -->
		<title>百度一下，你就知道</title>
	</head>
	<!-- body 标记网页中的主体部分内容，一般在浏览中看到的内容都是写在body标签中的 -->
	<body>
	</body>
</html>
	</body>
</html>

三、HTML基本标签（html 所有的标签都是预定义标签）
h1：标题标签用于标记网页中的大标题
（除了h1之外还有h2~h6标签，都用于显示标题属于块元素）
p：用于标记网页中的段落性文字
（块元素在网页中独自占领一块区域(默认占满横向区域)的元素）
img标签：(单标签)，用于标记网页中的图像行内块元素
（src source来源图片资源路径、alt alert 提示信息当图片加载失败时，以指定文本的形式代替图片显示）
a标签：标记网页中的超链接，点击可以打开或者跳转另外一个网页，也可链接到一个要下载的文件行内元素
（href 属性要连接到的资源地址、默认情况下a标签链接地址在当前页面打开，覆盖原来的页面、target 打开链接的方式值_blank表示新开一个窗口打开目标地址）
例子：<a href=“http://www.baidu.com” target=“blank” …

四、HTML转义字符
（在html中，如果需要展示< 或 > & 等特殊符号时，不要直接用，否则会被浏览误认为是一个标签，需要使用html中的转译字符）
常用的转义字符
1.显示< 可以使用 < (less that)
2.显示> 可以使用 > (great that)
3. 表示非换行空格(英文空格)
4. 表示中文全角空格
5.& 表示 &符号
© 表示 @

五、css行内样式、样式
style标签用于标记网页中的内联样式表
style标签用于标记网页中的内联样式表
每条样式规则由样式选择和样式表两部分组成
css选择器，查找指定的标签，编写标签的css样式

常用的css选择器

标签选择器，直接通过标签名称找到所有指定的标签
id选择器；格式 #id值，选中页面中id值为first的标签元素
（标签添加id属性整个网页文档中标签id值必须是唯一的）
class选择器；格式 .class值选中页面中class值为xxx的标签元素
（标签添加class属性网页文档中可以使用同一个class值，标记多个标签、class属性中可以同时包含多个值）
选择器可以混写（例：p#first.bold）
备注：
1.有些预定义标签已经定义好了以基础样式
2.style 在标签内书写css样式的方式叫做行内样式，行内样式优先级最高
<标签名 style=“样式名: 样式值; 样式2: 样式值2;…”>
3.标签可以互相嵌套
4.行内标签无法设置宽度，对齐方式始终是相对于自身标签大小对齐

常见CSS属性
1.text-indent 文本首行缩进
2.rgb(红, 绿, 蓝) 表示三原色红绿蓝范围0~255
3.RGB 16进制表示 #FF
4.font-family 设置文本字体类型
设置文本装饰器：text-decration
5.underline 下划线
5. line-through 删除线
6. none 去除所有文本装饰
7. overline 上划线
例：text-decoration: overline;
8. text-align 文本对齐方式 left(默认) center(居中) right(右对齐)
9. background-color 设置标签背景颜色
10. 设置标签行高为标签高度，可以让文本垂直方向居中