本文共 4480 字,大约阅读时间需要 14 分钟。
目录
HTML 是用来描述网页的一种语言,指的是超文本标记语言。HTML 不是一种编程语言,而是一种标记语言
正常的baihtml标记分为4层
第一:<html>,这是最外的一层 第二:<head>网页头部 第三:<title>网页标题,在<head>中包含 第四:<body>网页内容这是标题
所以一般在写代码时主要在body中,至于使用的编译器因人而异,拿记事本都可以写,如果使用记事本一定要改后缀名,将.txt改为.html,我主要使用的是WebStorm
Title
可以看到。当我们新建一个html文件时,webstorm会自动帮我们生成结构
<!DOCTYPE html> !:表申明的意思。这一行代码的意思是:下面的文档标签将以html5规范去解析
<html lang="en"> 表示语言为英语
<meta charset="utf-8"> 表示汉字编码 meta:元,主要用来完成对应设置的,当然还有一些其他的属性,比如
<meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
<meta name="description" content=""><!--网站的描述内容-->
注意,如果新建一个html文件后没有生成结构,自己又不想写可以选择以下两种方式,都可以自动生成文档结构
1、!+tab
2、html:5+tab
暂时不用在意生成后出现的meta下的那些属性,因为是移动端的开发设置
可以随便写一些东西进行测试,比如在body中写一个Test
注意,我们可以看到标题的位置,这里是可以修改的
首先我们要知道什么是块级元素和行级元素
块级元素:独占一行,宽度和高度是可控的,如果没有设置其宽度,将默认铺满整行,其内可以包含块级和行级元素
行级元素:不会独占一行,与相邻的行级元素占同一行,直到行占满,会自动掉到下一行,宽度和高度是不可控的,其内只能包含行级元素
相互转化的实现
块级标签转为行级标签:display:inline;(直接在标签里面添加即可)
行级标签转为块级标签:display:block;
div:用来布局的,没有具体含义。如果一定要给个定义,那就可以理解为是层
span:作用与div一样,都是用来布局的,不同的是div会单独占一行,而span不会;span用于行内布局
我们一般写代码时都将各个部分写在不同的div中,方便添加样式以及更有层次性。
通过<h1>——<h6>来进行定义
Test
Test
Test
Test
Test
Test
经过测试可以看到字体的大小是不一样的,<h1>是最大<h6>是最小。
还要注意的是,html的容错率是很高的,也就是说即使有些部分写错了,他也不会报错,比如说
Test
它同样会显示,显示的结果只是普通的字体,和只写一个Test的结果是一样的
如果嫌写起来麻烦,可以通过快捷键,比如你想写<h1></h1>,可以直接写h1然后摁下tab键即可自动生成,后面都是一样的
通过<p></p>进行定义
特点在于添加段落标签后都会另起一行显示里面的内容
TestTest1
Test2
Test1
TestTest2
Test1
Test2
Test
不管是上面哪种写法,显示的结果都只是
通过<br/>进行定义
<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。
所以在 HTML 中,把结束标签放在开始标签中,也就是 <br />。
要注意的是,在html里面写代码,他是不认你键盘敲进去回车的
TestTestTestTestTestTestTestTest
所以你不管在body里面敲多少个回车,都不会起作用,显示的结果都是
所以为了避免这一情况,添加了换行标签<br/>
TestTestTestTestTestTestTestTest
不管怎么写,只要遇到<br/>后就会换行
如果你想写多个换行
1、<br/>后选择这一行然后ctrl+D
2、或者直接写br*5然后tab,则会自动生成5个
这样就不用ctrl+c、ctrl+v那么麻烦了
通过<hr/>进行定义
Test
显示结果就是多了条水平线
可以看到<hr/>自身就有可以换行的属性,所以不管Test写在哪里水平线都会换行显示,即使写的文字在<hr/>后面跟着,也会被换行显示
通过<b></b>或者<strong></strong>进行表示
需要注意的是,两者虽然在网页中显示效果一样,但实际目的不同。
<b>这个标签对应 bold,即文本加粗,其目的仅仅是为了加粗显示文本,是一种样式/风格需求;
<strong>这个标签意思是加强,表示该文本比较重要,提醒读者/终端注意。为了达到这个目的,浏览器等终端将其加粗显示;
总的来说就是,<b>为了加粗而加粗,<strong>为了标明重点而加粗,所以使用<strong>好些
Test
Test
通过<i></i><em></em>
和<b><strong>一样,两者虽然在网页中显示效果一样,但实际目的不同。
<i>标签表示对所包含内容显示斜体文本效果。
<em>标签表示对所包含文本内容的强调。
Test
Test
通过<!-- -->进行表示,注意这是在html中的注释,css里面是不一样的
这个就不多说了,注释的代码在网页中就不会显示了,因为浏览器不会解析注释的内容
注意:不要在注释中使用“--”
快捷键为ctrl+/这样就可以选择整行或是整段
如果你要在一行中指定一些字符进行注释,比如<p>abcde</p>,你只想注释掉de时。可以选中de然后ctrl+shift+/即可
通过<pre></pre>进行表示,在文本中会保留空格和换行符, 包括宽度等,但文字的字号会小一号,使用较少
预格式文本标签。 在文本中会保留空格和换行符, 包括宽度等。
利用<big></big><small></small>进行表示
TestTestTestTest
注意<big>标签已经被html5所淘汰,但并没有删除,尽量不要使用
利用<sup></sup><sub></sub>进行表示,调整文本正常显示的基线,且字号会小一号(不常用)
x 2 + y 2 = z x 2 + y 2 = z
利用<q></q>进行表示
hello
主要功能是会为我们自动加上引号
注意,在html中有些特殊符号是无法直接显示的,比如空格,小于号
Test TestTest Test
他只会识别一个空格,其余的空格全部就自动忽略了,至于小于号,如果小于号后面跟了其余内容,则会直接报错,因为我们在写标签时都用<>括起来,所以当单独写“<”时,它会去寻找与之匹配的">",找不到就会报错,但之前说过html的容错率很高,即使一句代码有问题,其余的代码还是可以显示的。
所以想要这些符号有作用时需要一些特殊的符号表示,用&开头;结尾
< 是小于号
> 是大于号
空格
" 引号
© 版权符号
× 乘号
÷ 除号
<<<是小于号>>>是大于号 空格""""引号©版权符号×乘号÷除号
注意,这里的使用其实最多的在于介绍一些标签,比如说在网页上显示<p></p>,如果你单纯的把这句代码写进body中,肯定就换行了,此时就可以用特殊符号来写
<p></p>
其实如果不是这样子的形式,“<”,”>“,“ " ”都可以直接写,也可以显示,要注意如果<后面要跟其他内容则一定要用特殊符号代替,但尽量不要这么写,如果想写这些符号尽量使用特殊符号来代替,至于引号的话主要是在后面人,比如你写一些name=“内容”时,想在里面表示引号时,则可以使用特殊符号。
通过<img>进行表示
主要的是<img src="" />src:路径可以写的是:title:鼠标悬浮时的文字 alt:图片不存在时替换的文字
如果图片地址有误时
这里注意的是src里面的路径,如果你写的html和图片在同一级目录下,则不用添加../,如果不在一级,则需要使用../跳出html当前所在的目录中,再去寻找你写的imgs目录,找到图片。
通过<a href=""></a>来显示
通过此标签跳转页面,提前写好另一个html文件,将文件名添加到href中,添加提示文字“点击我”
点击我
和图片一样,如果想跳转到同级目录,这不用写../,如果不是同级目录,则先跳出使用../,然后在找到你想要的文件
href中可以写你编辑过得html文件,也可以写一些其他网站,比如百度网易什么的,只需要把网站地址加进去即可
当然里面还可以添加一些属性 target=" " title=" "
title=" " 表示鼠标悬浮的提示文字
target=" " 表示跳转的目标形式
_blank(另起一个新的窗口) _self(在自己的窗口下也就是自身跳转,不会新开窗口) _parent(返回父一级) _top(返回最顶层)
a :hove 悬浮
a:link 未访问
a:visited 已经访问过了
a:active 点击鼠标时
设置的顺序: link -> visitied > hover > active
一般建议: 只写 hover 即可
和超链接一样,只不过它可以跳转到你指定的地方
步骤:
如果要从a跳到b里面指定的位置
1、首先在b里面任选一行起名(用id命名也可以) <a name="my2mao">222b页面</a> 2、跳转要加#name <a href="hellob.html#my2mao"></a>
具体实现:
第一步:命名
第二步:查找
点击我
比如发邮件:<a href="mailto:...">点我发邮件</a>
都有一些固定的写法,以后遇到了会进行纪录
此次介绍了一些html中常用的基础标签,当然html中的标签还是很多的,而且都可以嵌套使用,主要看个人设计,所以等以后在实践中遇到了其他的新的标签,还会在里面进行添加。
转载地址:http://ayvrn.baihongyu.com/