文章目录
- 引入-什么是HTML
- HTML基础
- html标签
- html元素
- html开发工具
- html文件基本结构/网页结构
- HTML常见标签
- 注释标签
- 标题标签
- 段落标签
- 换行标签
- 格式化标签
- 图片标签
- 超链接标签
引入-什么是HTML
HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML不是编程语言,而是一门标记语言
- 标记语言是一套标记标签(markup tag)
- HTML使用标记标签来描述网页
- HTML文档包含了HTML标签及文本内容
- HTML文档也叫做web页面。
HTML基础
html标签
HTML代码由"标签"构成。
形如:
<body> hello</body>
- <>中写入标签名(body)
- 大部分标签成对出现.为开始标签,为结束标签
- 少数的标签是只有开始标签,称为 单标签.
- 开始标签和结束标签之间,写的是标签的内容(hello)
- 开始标签中,可以写入一些属性.
在html中,不同的标签可能会支持不同的属性,这是html本身有这样的规定。但是所有的标签,都支持id这样的属性。id属性的含义就表示这个标签的唯一身份标识(在同一个html里面不能有两个id相同的标签)
<body id="myID">hello</body>
html元素
"html标签(tag)"和"html元素(element)"通常情况下指的是一个意思。
但是严格来讲,一个html元素通常包含了开始标签和结束标签。
如以下实例:
HTML元素:
<p>举个栗子</p>
html开发工具
我们可以使用记事本来写html代码,但文件后缀名需要更改成**.html**。
一般情况下,idea也是支持HTML代码的。但CSS和JS语言,只有专业版的idea才支持,而普通的社区版不支持。不支持意味着没有代码高亮、缩进、补全等功能。
一些常见的web浏览器如谷歌、IE、Firefox、Safari、Microsoft Edge等是用来读取html文件,并将其作为网页显示。浏览器并不是之间显示的HTML标签,但可以使用标签来决定展现HTML页面的内容给用户:
在浏览器中,我们使用浏览器的“开发者工具”就可以看到这个页面的详细内容~开发者工具是程序员在写前端代码时非常重要的东西。打开方式:右键->检查 或者F12.
在检查中,切换到元素页面,我们就可以看到每个html标签对应的页面内容~
在idea或者vs code中,通过!+tab键可以快速生成一个网页的基本标签,避免了每次都需要重复的写很多代码。
html文件基本结构/网页结构
以下是一个完整 的HTML结构:
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello word
</body>
</html>
最外层的是html标签。一个HTML文件的顶层标签就应该是这个标签.
在html标签里面,包含一个head标签和body标签. 其中 head标签里面放的是这个html中的一些属性。body标签里面放的是这个html要展示的内容。
这样的结构就类似于一个“树形结构”
html标签就是根节点.
head和body就是html的子节点.head和body是兄弟节点的关系。
title又是head的子节点.所以title又是html的孙子节点.
通常我们把这个由标签(元素)构成的树称为DOM树(Document Object Model).这里的D指的是html本身,而O指每个标签其实又可以视为一个对象.
这些对象也包含了一些属性和方法,然后我们就可以在JS(JavaScript)中来访问或者修改这里的属性,或者调用其中 的方法了。
下面是一个可视化的HTML网页结构:
在该页面结构中,只有白色部分,标签内的内容展现在网页上。
HTML常见标签
html中大部分标签是有“语义”的。不同的标签有不同的 含义和用途。
注释标签
<!-- 这里是注释标签-->
注释标签要注意和代码上下逻辑一致,尽量用中文,不要传递负能量.
由于js的源代码在网页上就能被看到,为了放止代码泄露,JS采取了“代码混淆”的方式,在不改变源代码的逻辑基础上,把代码的可读性尽可能的破坏掉,方法包括但不限于:把缩进、空格、换行都去掉,把变量名替换成a,b,c…
标题标签
标题标签有h1到h6,共六个。数字越大,字体越小。此处的标题并非网页的标题title,而是内容的标题。(html最开始是为了实现“报纸”这样类似的功能…在网页上)
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
段落标签
标签
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
- p 标签之间存在一个空隙
- 当前的 p 标签描述的段落, 前面还没有缩进. (CSS中涉及 )
- 自动根据浏览器宽度来决定排版.
- html 内容首尾处的换行, 空格均无效.
- 在 html 中文字之间输入的多个空格只相当于一个空格.
- html 中直接输入换行不会真的换行, 而是相当于一个空格.
换行标签
< br> br是break的缩写,表示换行
- br 是一个单标签(不需要结束标签)
- br 标签不像 p 标签那样带有一个很大的空隙.
- < br/> 是规范写法. 不建议写成 < br>
格式化标签
- 加粗:strong标签和b标签
- 倾斜:em标签和i标签
- 删除线:del标签和s标签
- 下划线:ins标签 和u标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
这些标签实现的功能CSS也可以实现,一般以CSS为主
图片标签
img=>image. img标签
<img src="" alt="">
img标签非常依赖src属性,通过这个属性来制定一个具体的图片资源。src属性要写一个具体的图片路径,可以是本地路径,也可以是网络路径。
img本身也是一个单标签。
网络路径:就是一个形如http://或者http://这样的url
下面是通过网络路径演示在网页上添加图片:
这个图片上面的路径就是网络路径,复制该路径,然后,加入到img的src中…
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="https://img02.sogoucdn/app/a/200541/size170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="">
</body>
</html>
效果如下:
img标签中的alt属性的作用是:如果图片无法显示,会显示一些文字或者符号,表示这个图片曾经存在。
如下:
修改src图片的网络路径后,图片无法显示。
<img src="https://img02.sogoucdn/apze170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="这是一个符号">
img还有其他属性,如title属性,当光标放到图片上时,会有一个消息提示框。
<img src="https://img02.sogoucdn/apze170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="这是一个符号" title="这是我的壁纸">
还可以修改图片的大小,用width和height属性
<img src="https://img02.sogoucdn/app/a/200541/size170*140_8cb616d6-15e6-461a-a7db-5117850aa464.jpg" alt="这是一个符号" title="这是我的壁纸"
width="500px"
height="500px">
<!--px是像素单位-->
超链接标签
a标签就是超链接标签。
点击之后就会跳到另外的网页。
<a href="http://www.baidu">这是一个超链接</a>
href属性表示链接地址。
更多推荐
前端~html~HTML零基础(一) ~HTML常见标签/如何开发一个html文件/在网页查看源码
发布评论