HTML基础知识

ゝ一世哀愁。 2022-05-17 03:19 288阅读 0赞

QQ:275487025  
QQ群：854312770  
欢迎各种大牛指点，和小白一起学习。

前端开发技术三要素：

1。HTML:是网页内容的载体结构  
内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等  
2。CSS:是网页外在表现  
就像网页的外衣。比如，标题字体、颜色变化，或加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现  
3。Javascript:是用来实现网页上的特效与交互等行为  
如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

超文本标记语言HTML（Hypertext Marked Language):

HTML 是用来描述网页的一种语言  
HTML不是一种编程语言，而是一种标记语言 (markup language)  
HTML文件的后缀名.html 或 .htm  
HTML 使用标记标签来描述网页  
HTML由浏览器解释执行  
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

HTML标签:

HTML 标签是由尖括号包围的关键词，比如 `<html>`  
HTML 标签通常是成对出现的，比如`<b> 和 </b>`  
HTML标签对中的第一个标签是开始标签，第二个标签是结束标签  
开始和结束标签也被称为开放标签和闭合标签  
HTML也有单独呈现的标签，如：`<img src=“yhit.jpg" />`  
HTML标签不区分大小写，推荐使用小写  
HTML 标签可以嵌套 ，如：`<ul><li> <img src=“yhit.jpg" /> <li></ul>`

HTML元素:

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码  
HTML元素的内容是开始标签与结束标签之间的内容  
某些 HTML 元素具有空内容,空元素在开始标签中进行关闭（以开始标签的结束而结束）  
比如：`<br />`  
大多数 HTML 元素拥有属性，提供了有关 HTML 元素的更多的信息  
属性总是以名称/值对的形式出现，比如：name=”value”

HTML注释:
    两大用意：1提示程序猿里面写的功能，不管谁写的，都可以清楚里面的内容；
            2注释掉暂时不用的部分，等什么时候想用了方便快捷。

注释标签:  
``

HTML文档：

HTML文档也称网页，是记录HTML元素的文件,扩展名为html 或 htm  
HTML 文档编辑工具 BOM  
记事本、Dreamweaver 、Sublime Text 、Notepad++、Editplus ……

HTML文档命名规范  
应该只使用字母a-z，排序数字0-9，连字符（-），下划线（\_）和句点（.），任何其他字符可能给你带来麻烦，导致文件不能加载或页面加载不正确  
尽量以字母开头和使用小写字母  
名称要有一定含义  
不要忘记文件扩展名

HTML的结构：
     文档的声明：<!DOCTYPE html>
    1网页的开始和结束标签：<html></html>
    2头部标签：<head></head>
        里面有<title>网页标题</title>
            <meta charset="UTF-8">
    3网页主体：<body></body>
    注意：
    <head> 之间的文本是头信息不会显示在浏览器中，包括基本的描述，整个网页的公共属性
    <body> 之间是浏览器中可见的页面内容，是网页的主体
    
    文本标签：
    标题标签

`<h1~6 align="left|right|center> </h1~6>`

段落标签

`<p align="left|right|center></p>`

换行标签

`这里写代码片`

预格式化标签  （对空行和空格进行控制）

`<pre></pre>`

水平线标签

`<hr width="" size="" align="" color="" />`

无意义标签

`<span></span> <div></div>`

字体标签

`<font color="" face="" size="1~7" ></font>`

粗体标签

`<b></b>`

斜体标签

`<i></i>`

下划线标签

`<u></u>`

删除线标签

`<del></del>`

上标标签

`<sup></sup>`

下标标签

`<sub></sub>`

字符实体：
     字符实体由三部分组成：

以&开始  
中间为实体名或实体编号  
以 ; 结束  
实体名称便于记忆而实体编号的浏览器兼容性更好  
实体名称区分大小写  
![这里写图片描述][70]

列表标签：
    有序列表

无序列表

`自定义列表

超链接标签：  
空链接：  
1返回页面顶部 `<a href=“#”></a>`  
2保持原位置`<a href=“javascript:; ”></a>`

脚本链接 `<a href="javascript:js代码"></a>`

普通链接：  
1`<a href=“链接地址” target=“_blank | _self”title="描述">文本或图片</a>`为页面上的所有链接规定默认链接地址或默认跳转方式；  
2`<base target=“_blank | _self” href=“链接地址” />`标签必须嵌套于head标签内；

锚点链接：  
使用 name 属性创建 HTML 页面中的锚点  
当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了  
步骤：  
创建锚点  
`<a name="锚点名称"></a>`  
链接到锚点  
同一页面 : `<a href="#锚点名称"></a>`  
不同页面 :`<a herf="目标文档URL# 锚点名称"></a>`

图片标签：

src 图片所在URL  
alt 图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片  
width 图片宽度  
height 图片高度  
border 图片边框

设计网页时经常使用的图片有三种格式：  
GIF – 最多支持256色,支持透明,支持多帧动画显示效果.  
JPEG | JPG– 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.  
PNG – 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.

表格标签：  
基本结构：

table：  
![这里写图片描述][70 1]

tr：  
![这里写图片描述][70 2]

th和td：  
`<th></th>`表格标题单元格：字体加粗居中显示  
`<td></td>`表格数据单元格：字体偏左微细显示  
![这里写图片描述][70 3]

[70]: /images/20220517/35e3807fef2447c9a507060386871f2b.png
[70 1]: /images/20220517/930614cfd0a848469f54480da1f86f60.png
[70 2]: /images/20220517/48acc88c24c844798913ad80e1a8b571.png
[70 3]: /images/20220517/ab9ef1ef43d44a388709fde52b39370f.png