前端学习日记（二）html的知识框架及简单应用

最新推荐文章于 2022-09-07 22:03:45 发布

夬月十三

最新推荐文章于 2022-09-07 22:03:45 发布

阅读量193

点赞数 2

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_45060861/article/details/112462455

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是html？
Hyper Text Markup Language超文本标记语言，一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一。
超文本：超越普通文本；能够在文本内插入图片、音频、视频、超链接等等。
标记语言：
（1）编译语言：C、java
hello.java->hello.class->解析
system.out.print(1+1);//2
特点：编译语言需要编译后才能运行 ；本身具有逻辑能力和行为能力。
（2）脚本语言：javascript(JS)
console.log(1+1);//2
特点：被解析器解析运行 ；本身具有逻辑能力和行为能力。
（3）标记语言：html、xml
特点：<div>1+1</div> //1+1
本身不具有逻辑能力和行为能力 ；只能被浏览器所读取。
绝对路径与相对路径：
举两个最为常见的绝对路径的例子：
（1）完整的URI地址：
http://www.sofedewhy.com/anzone.jpg
DNS服务器能够将网址解析到服务器硬盘上anzone.jpg图片文件。
（2）完整盘符：
D:\mayi\web\images\anzone.jpg
图片存贮位置得到了完整的描述，非常明确。
相对路径：./ …/
2.html特点
（1）从上到下依次解析
（2）容错性/宽松性：对书写出的标记将不指出其错误，且不停止解释执行过程
（3）对大小写不敏感（不区分大小写）
3.文档结构
创建html文档：.html、.htm为后缀名的文件。
默认文档结构：快捷键生成：html:4t；html:5
4.元素
（1）元素的组成
开始标签、元素组成、结束标签
<标签名称> hello<> </标签名称>
有一部分标签没有结束标签：单标签/空元素
标签不能交叉嵌套：如<div> <span> </div> </span>
（2）元素的分类
块级元素：div
特点：独占一行空间；不与其他元素共享一行空间；宽度占满整个父级元素，高度由自己元素搭配。
行内元素：span
特点：可以与其他元素共享一行空间；宽度由子级元素撑起，不能直接设置宽高；不能直接设置上下的内外边距。（行内元素一般被嵌套在块级元素中）
空元素：meta 通常用于在文档中插入部分内容

（**面试题！！！**）行内元素与块级元素的区别：
1.块级独占一行，行内可以与其它元素共享一行
2.块级元素可以包含块级元素与行内元素，行内元素只能包含文本或者其他行内元素。
3.块级元素可以设置宽高，行内元素不能设置宽高。

5.属性
（1）属性的设置
属性写在开始标签内部
属性名与属性值之间使用等号连接
多对属性之间使用空格隔开
（2）属性的分类
—按照公有性分类
公有属性：所有标签都能设置的属性
id:元素的唯一标识
class:按类标识元素；多个属性值之间使用空格隔开
style:设置行内样式；按照CSS语法设置
title:设置提示
私有属性：为当前标签设置

—按照属性特性分类
基本属性：属性值使用字符串类型 “ ”；‘ ’
布尔值属性：属性值只有true、false
key=vlaue;键值对
key=‘key’; //如redonly=‘redonly’
key=‘true’; //redonly=‘true’;
key=true; //redonly=true;
key; //redonly;
key代指所有布尔值属性
6.语法
（1）空白语法
在文档中无论出现多少个空格或者换行，浏览器中只解析为1个空格。
pre标签：段落标签，保留用户所输入格式。
（2）字符实体
使用&开头，使用；结尾
中间写实体名称

&nbsp; ->空格
&quot; ->*
&lt;   -><
&gt;   ->>
&copy; ->©
&reg;  ->®
&times; ->//

(3)注释
注释的作用：
用来提升代码的可设性，便于代码的维护和管理
注释的表现形式：

<!- - 注释内容- ->

被注释掉的内容不会被浏览器所解析
7.标签
html标签不区分大小写
html跟标签里面有head元素和body元素

<html>开始标签 <html lang="en">后面language是属性名 "en"是属性值 </html>结束标签
<meta/>单标签 <meta charset="utf-8">设置文档的文字编码格式
<title></titile>是选项卡名字
<body></body>里的内容是展示在视图区的
<div></div>是最常用的标签

p:段落标签
pre:段落标签，保留用户所输入的格式
div:块级元素
span:行内元素
布局：div+span
html中无意义的元素：div、span
img:引入图片 特殊的行内元素（替代元素）
   art:替换图片内容
   src:引入图片地址
   width;设置图片宽度
   height:设置图片高度
**强调元素**：
em  //斜体 被搜索引擎识别
i  //斜体 只作样式改变
strong //加粗 搜索引擎识别
b //加粗 样式改变
del //删除线 
u //下划线