前端学习日记01

最新推荐文章于 2024-07-12 16:31:27 发布

水诗涵月

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量189

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_44476095/article/details/110818886

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、网页组成

1、结构层：HTML（超文本标记语言）-Hyper Text Markup Language
2、表现层：CSS (层叠样式表) - Cascading style sheet
3、行为层：JS（脚本语言） - Javascript

二、五大浏览器及其内核

1、谷歌（chrome） - Blink
2、火狐（mozilla） - Gecko
3、IE - Trident
4、欧朋（opera） - Blink
5、苹果（Safari） - webkit

三、HTML定义

1、 HTML就是超文本标记语言
2、 HTML是用来描述页面的一种标记语言(不是编程语言 C,C++ ,java,python)
3、 HTML是一套标记标签，用标记标签来描述页面

四、HTML结构

	<!DOCTYPE html>
	<html lang="en">
	 <head>
			<meta charset="utf-8">
	        <title>网页标题</title>
	    </head>`
	    <body>
	        <!-- 网页主体 -->
	        
	    </body>
	</html>
	
	1、<!DOCTYPE html>
			即：document type 文档类型
			HTML5的文档声明：告诉浏览器以什么标准解析此文档
	2、<html lang="en"></html>
			一个页面只可以有一个html标签， 一般也称为：根标签
     		属性：lang：语言   值：  en  英文  zh  中文
    3、<head></head>
     		head标签定义网页头部内容（不会显示在页面上）， 一般用来设置标题，元信息，网页描述，关键词，链接其他文档
    4、<meta charset="utf-8">
     		定义字符编码：
        			值：utf-8  万国码
            				gb2312   中文简体
            				GBK     中文（简体，繁体） 
            				ASCII   
	5、<title>网页标题</title>

五、HTML常用标签

1、块级标签：
1、 div 划分区块，一般结合css用来布局
2、 p 段落标签
3、 h1-h6 标题标签 1级-6级：定义标题，不可以因为样式效果去选择使用标题，一般定义文章标题或者网站logo
4、 ul li 无序列表 ul定义列表区域， li定义每一个列表项
注意： ul的直接子元素只可以是li 不能够嵌套其他标签，li中可以嵌套其他行内元素以及块级元素

特点：
（1）块级标签独占一行，每次都是从新的一行开始
（2）块级标签可以嵌套其他标签
（3）p标签不可以嵌套块级标签，h1-h6同理

2、行内标签：
（1）span 没有具体意义，主要用给某些特殊的内容添加样式（配合css使用）
（2） strong 粗体显示，有强调语意
（3） b 粗体显示，没有任何语意，只是有加粗效果
（4） em 斜体显示，有强调语意
（5） i 斜体显示
（6） del 删除
（7） s 删除（基本被淘汰
特点： 可以和行内标签在一行排列，不可以嵌套块元素

3、特殊标签：
空格不会显示在页面上
（1） br 换行标签
（2） hr 水平分割线

4、链接标签：
链接标签： <a href="#"> </a>
属性：
href：定义链接跳转地址
target：定义链接跳转打开的方式
值：1、_blank ：新窗口打开2、_self 默认值：在当前窗口打开
锚点链接：跳转到页面的具体位置，配合id使用
#id名

<a href="#box">跳转到p标签位置</a>
<p id="box">锚点链接</p>

4、图片标签：
img
自带属性：
src: 图片文件路径
alt：图片提示文字（当前图片路径错误或者加载不出来时显示）
title: 图片标题（当鼠标放入图片上时显示）
width: 设置图片的宽(标签自带属性)
height: 设置图片的高（标签自带属性）
绝对地址：
可以在任意地方访问该资源的地址，必须以http开头
相对地址：
相对于某个位置的地址，默认是相对当前网页位置（../代表当前网页上一级，可以级联，即（../../../），（./）代表同级）

6、列表标签

（1）无序列表：ul li （默认列表符号：实心圆点）
（2）有序列表：ol li（默认列表符号：阿拉伯数字）
（3）自定义列表：dl dt dd
dl：定义列表区域
dt：定义列表标题，即列表项
dd：定义列表内容，即对列表项的注释
【注】：dt和dd是同级关系，不能相互嵌套

7、表格标签：table

table：表格标签（表格默认没有边框）
tr：定义表格的行
td：定义表格的列（单元格）
表格分为表头、主体及表尾部分

表头：thead->tr->th（表头中的单元格），th标签字体默认加粗，且在单元格中居中显示
主体：tbody -> tr -> td
表尾：tfoot ->tr ->td
【注】：要保证每个tr中的td个数是相等的

8、表格属性
（1）border 边框值：边框大小
（2）cellspacing 设置单元格和单元格之间的间距
（3） cellpadding 设置单元格和内容之间的间距
（4） width 设置宽度
（5） height 设置高度
（6） align 设置单元格内容水平对齐方式值： left / center / right
（7） valign 设置单元格内容垂直对齐方式值： top / middle / bottom
（8） rowspan 行合并
（9） colspan 列合并注意：被合并的单元格一定要删除
【注】表格标题标签：caption ——放置在table标签内部