html基础学习一
结构
<html>
<head>
</head>
<body>
</body>
</html>
1.head元素
重要的有title和meta
title标签中内容显示在浏览器的标题栏中
meta分为两大类:一类是对页面进行设置,一类是对搜索引擎进行设置
2.文本元素
2.1标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.2文本修饰标签
<font>字体</font> <!--用于设置文本的字体样式-->
<b>加粗</b> <!--加粗-->
<i>斜体</i> <!--斜体-->
<s>删除线</s> <!--删除线-->
<u>下划线</u> <!--下划线-->
<sup>上标</sup> <!--上标-->
<sub>下标</sub> <!--下标-->
<strong>用加粗的方式表示强调</strong>
<big>比周围的字大一个尺寸</big>
<small>比周围的字小一个尺寸</small>
2.3特殊字符
特殊字符 | 实体引用 |
---|---|
双引号(") | "; |
&号 | &; |
空格 |  ; |
小于号 | <; |
大于号 | >; |
小于等于 | &le; |
大于等于 | &ge; |
版权号© | ©; |
商标注册号TM | &tarde; |
注册商标® | ®; |
分数(1/4) | ¼; |
左箭头 | &larr; |
左双箭头 | &lArr; |
交集 | &cap; |
并集 | &cup; |
3文档结构元素
3.1段落标签
<p>里面放一大段话</p>
<p>里面放第二大段话</p>
<!--两段话之间会有间距-->
3.2换行标签
<br/>
<!--换行标签之后的行与行之间不存在间隙-->
3.3水平线标签
<hr/>
<!--可以通过size,color,wide,noshade,align对高度、颜色、宽度、阴影、对齐方式进行设定-->
4.列表元素
4.1有序列表
<ol type="A" start="3">
<li></li>
<li></li>
</ol>
<!--序号是大写的ABCD,并且从C开始往下-->
4.2无序列表
<ul type="disc">
<li></li>
<li></li>
</ol>
<!--type是前缀,disc是点,circle 圆,square 方块,none 等类型-->
4.3定义列表
<dl>
<dt>标题一</dt>
<dd>描述一</dd>
<dt>标题二</dt>
<dd>描述二</dd>
</dl>
5.div与span标签
div是块级元素,span是行内元素
<div class=" ">
内容
</div>
<span class="">内容</span>
6.图像标签
<img src="url" alt="文字描述"/>
<!--url是图片的位置,alt是图片显示不出来的时候显示的文字描述-->
7.超链接标签
<a href="url">要点击的内容</a>
<!--url是图片的位置,alt是图片显示不出来的时候显示的文字描述-->
7.1文本链接和锚点链接
1.文本链接
<a href="www.baidu.com">百度</a>
2.锚点链接
解释:就是一个页面很大的时候,可以直接跳转到整个页面的某一个部分,常见于百度百科
<a id="myAnchor">这是我创建锚点的位置</a>
<a href="#myAnchor">跳转到锚点链接的位置</a>
<a href="/chapter01/asdads.html#myAnchor">跳转到某页面的锚点链接的位置</a>
7.2图片链接和图片热区链接
1.图片链接
<a href="www.baidu.com">
<img src="url" />
</a>
2.图片热区链接
<map name="myMap">
<area shape="circle" coords="32,35,31"href="www.baidu.com"/>
<area shape="rect" coords="62,8,103,66"href="www.baidu.com"/>
</map>
<img src="url" usemap="#myMap" border="0"/>
7.3其他超链接
1.空连接
<a href="#">空连接</a>
2.email链接
<a href="mailto:1234567@123.com">联系我们</a>
3.javascript链接
<a href="Javascript:alert(“你好”)"javascript链接</a>