一、单标签和双标签:
在HTML基础中,单标签就是由一个标签组成的。例如<br>、<hr>、<img>、<input>、<param>、<meta>、<link>。
而双标签则是由“开始标签”和“结束标签”两部分构成(这两部分是相同的)。
例如<html>、<head>、<title>、<body>、<table>、<tr>、<td>、<span>、<p>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<object>、<style>、<b>、<u>、<strong>、<i>、<div>、<a>、<script>、<center>(双标签的一部分)。
二、行内元素和块级元素:
行内元素:不可以设施宽高,不会换行<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>
块级元素:可以设置宽高,会换行
<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
三、标签
1、段落标签: (单词缩写:paragraph 段落)
格式:<p>我是一个段落</p>
默认情况下,一个段落中的文字会依据浏览器的大小自动换行,会有段前与段后。
2、水平线标签:(单词缩写:horizontal 横线 )
格式:<hr /> 或者 <hr> 单标签,不是块级标签
3、换行标签: (单词缩写:break 打断,换行)
格式:<br /> 或者 <br> 单标签,不是块级标签
4、div(单词缩写:division 分区)
作用与特点:网页布局的盒子,不会修饰文本,会进行换行(块元素)
格式:<div>这是div</div>
5、span标签
作用与特点:网页布局的盒子,不会修饰文本,一般用来放文本,不会进行换行(行内元素)
格式:<span>这是span</span>
6、文本修饰标签
b i s u没有强调的意思,strong、em、del、ins语义更强烈,有强调的意思
<!-- 标签的嵌套:加粗且倾斜 --><strong><em>加粗且倾斜</em></strong>(strong为父元素或者父标签)
效果为:
嵌套规范:
1、内联(行内元素)不能嵌套块级,块级可以嵌套内联元素
2、有几个特殊的块级元素只能嵌套内联元素:h1-h6、p、dt
p标签只能嵌套行内元素,不能嵌套块级元素,也不能嵌套自己,不然就不会表现块级元素的特点
<p><div>wode hehhhvdgwh</div></p>后台检查里面显示的是:<p> </p><div> wode hehhh vdgwh</div><p></p>
3、<li> <dd> 标签可以嵌套任何元素<li><ul><li><./li></ul></li>
4、<a>标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套<a>和<input>之类的标签
5、ul和ol的子元素只能是li,不能是别的元素
6、button里面不要嵌套a标签,不然在js里面会有两个事件,还有就是button里面放img要记得给图片添加alt属性
7、图片标签 (image图片)
格式: <img src=" 这里放图片的路径 " >
src是img的必须要的属性,还有其它属性:
alt=" 这是一张为加载出来的图片” 提示作用:当图片不能显示的时候,就显示此文字
border=“10” 边框,值为数字
width="100" 宽度,值为数字
height="20" 高度,值为数字
(如果只写width或者height属性,对应的另一个属性都会等比例缩放)
<img>标签是行内元素,但是它可以设置宽高,也不会换行,这种特性称为行内块级标签
8、pre标签
<pre>内容</pre>
此标签出现原因有两种:第一个是换行,就是格式方面可以保持html所写的格式。第二种就是空格会保留。一般不用这个标签,因为很多字体等他会自己改变。
Tips:
1、当不能请求一张网页上的图片的时候,写上meta,就可以了
<metaname="referrer"content="no-referrer">
2、把title注释掉,网页的名字就会显示html的文件名
3、空格:
4、路径:
绝对路径
网络路径:
磁盘路径:D:\h5\day.html
相对路径
./能访问与当前文件同层级的文件或文件夹
../ 能访问同层级和上一级的文件或文件夹
../../ 能访问同层和上两层的文件或文件夹 (一般不超过4层)