HTML语言
1、HTML语言是什么:
HTML语言——超文本语言,用于对浏览器中的代码进行渲染(一句话总结:用来将代码变为非程序员可视可读的特殊语言)。
2、HTML标记:
<!DOCTYPE HTML>
</DOCTYPE>
对文档进行声明,声明其为HTML5标准。1
<html>
</html>
HTML页面的根元素,向浏览器声明自身是一个HTML语言编写而成的文档。(结尾处要用反斜杠包裹回去,以下同理)
<head>
</head>
向浏览器标注HTML文档的头部,且包含了文档的元数据,可以定义多种网页格式^ 元数据
<title>
</title>
该元素向浏览器标注了文档的标题
<body>
</body>
该元素中包含了可见的页面内容,(类似于C语言中的主函数部分)
<h1>
</h1>
定义文档中的一个大标题。(可以通过对h后面数字的修改,产生不同的段落)
<p>
</p>
定义文档中的一个段落。
特别注意,如果要在浏览器中使用中文,要先在中建立一个(或是GBK),以正常使用中文
HTML语言对于大小写不敏感
HTML元素:
HTML元素语法:
1、HTML开始标签起始,以结束标签终止。
2、某些HTML元素中具有空内容,且需要在开始标签之中进行关闭(空元素)^ 对空元素进行关闭 。
3、在开始标签与结束标签之间是元素内容,即是需要表达出的东西。
4、HTML元素可以进行相互嵌套。
即使没有结束标签,大多数浏览器也可正确读取出HTML元素,但是容易报错
注意!!!
HTML元素属性:
1、HTML元素可以设置属性。
2、属性可以在元素之中添加附加信息,且一般描述于开始标签之中。
3、属性总是以名称/值对的形式出现(可以类似理解为C语言中的赋值)。
HTML元素属性要求:
属性值应当始终被包裹在引号内。(既可以是双引号,又可以是单引号)
特别的
如果文本本身存在双引号,那就必须使用单引号对其进行包裹。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3mk8OoHO-1613890632947)(C:\Users\X\Pictures\Screenshots\屏幕截图(12)].png)
常见的,适用于大多数HTML元素的属性。
特别笔记:
class属性可以:
class=''
在其中一次性对多个HTML元素定义类名,我将它与C语言中的:
int a,b,c……
相类比。
而相对的,id属性只能一次性单独设置一个值:
id=''
我将它与C语言中的赋值语句:
a=……
相类比。
HTML标题:
在HTML中,标题通过:
<h1>
</h1>
来表示。
可以通过改变数字的大小来改变标题的大小。
数字由小到大的同时,标题也由大到小。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CGgssrRw-1613890632949)(C:\Users\X\Pictures\Screenshots\屏幕截图(14)].png)
特别注意
不要使用标题来加粗字体,可能会导致浏览器编制的索引出现问题。
添加:
查看源代码的方式:右键,或者是F12键(+Fn).
HTML段落:
1、用
来标记段落,以
来结束段落。(浏览器会自动的在段落前后添加空行)
2、用
表是的是生成一个新段落的硬换行,如果只是想要在同一个段落之内换行的话,可以使用
进行软换行。
3、在HTML语言之中,所有多余的空格或者是空行都会被自动省略为一个,因此只能通过HTML语言来实现换行或者是空格。
(除非使用
标签,将其中的格式预定义出来)HTML文本格式:
1、[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AarXKBlM-1613890632951)(C:\Users\X\Pictures\Screenshots\屏幕截图(18)].png)
其中
和所表现出来的效果是一样的。
和所表现出来的效果也是一样的,可以混用。
表示在文字上添加删去符。
是将所包裹的文字定义为下标。
同理。
2、[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cA2qnXST-1613890632952)(C:\Users\X\Pictures\Screenshots\屏幕截图(20)].png)
全部解释一下:
可以将包裹的元素以计算机代码的字体显示。
可以将包裹的文本以固定宽度的字体显示。(已废弃,可以用CSS替代)
用于定义计算机代码的文本样本
用于标记变量。(其实就是做个标记,使得相对应的字体变为斜体,提高可读性的)。
用于定义预格式化的文本(预格式化的文本,可以保留其中的空格和空行)。 3、[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-trKZj9d2-1613890632955)(C:\Users\X\Pictures\Screenshots\屏幕截图(21)].png) 可以将包裹部分的文本作为简写,将目标替换。 将包裹部分的文本变为斜体,提高可读性。 对于bdo来说,有两种写法《bdo dir="rtl"/"ltr"》,其中“rtl"表示说从右到左,"ltr"表示从左到右。 几乎全是定义文字,提高可读性的。 ## HTML链接: 1、HTML设立超文本链接方法: ```html 链接文本 ``` 其中"url"就是需要链接网站的网址,而链接文本则是将链接以何种文本形式表示出来,我自己做了一个尝试。 尝试如下: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XV5PXe8C-1613890632957)(C:\Users\X\Pictures\Screenshots\屏幕截图(26)].png) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7rctPVq-1613890632958)(C:\Users\X\Pictures\Screenshots\屏幕截图(23)].png) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DiEq4fjb-1613890632958)(C:\Users\X\Pictures\Screenshots\屏幕截图(24)].png) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rw458mAu-1613890632959)(C:\Users\X\Pictures\Screenshots\屏幕截图(25)].png) **很成功。** 其中链接文本既可以是文字,也可以是任何植入其中的图片。(我猜GIF格式的文件应该也行)。 同时,可以用命令在同一页面之中的链接。 ```html 链接文本 任何文本 ``` 此时,只要点击相应的链接就可以在统一页面之中直接访问到需要的部分。 ***特别注意*** 在将链接设置为邮箱时,要使用一个叫做mailto:的关键字,以及有两种抄送方式:普通抄送(cc); 密送:(bcc) ## HTML头部: 1、可以添加在头部的元素标签有:**、
### 5、<meta>元素:
该元素主要用于描述元数据,可以有多种用途:
定义网页刷新时间,定义网页关键词,定义网页作者,为网页描述内容。
### 6、<script>、<noscript>元素:
用于加载/不加载脚本文件。
rget="_blank">
3、元素:
定义了文档与外部资源之间的关系,通常用于链接到样式表。
<link rel="stylesheet"type="text/css" href="mystyle.css">
4、
定义了HTML文档的样式文件引用地址。
<style type="text/css"></style>
5、元素:
该元素主要用于描述元数据,可以有多种用途:
定义网页刷新时间,定义网页关键词,定义网页作者,为网页描述内容。
6、
用于加载/不加载脚本文件。
(HTML5标准,一种对网页进行规范化的标准,如果不按照标准可能会导致不同的浏览器对同一代码的解析方式改变,使得读取渲染出的界面出现问题) ↩︎