HTML标签（一）

目录

标题标签

段落标签

文本格式化标签

布局标签

图片标签

超链接  a标签

 html提供的特殊字符

表格（table）

列表

1.无序列表

2.有序列表

3.自定义列表

---

标题标签

HTML中提供从和-或六个级标题标签
h1级别最高 h6级别最低，通过这些标题标签可以定义网页
注：html标题只可以用来定义标题

<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>

段落标签

HTML中可以使用段落标签p来将网页内容分为若干个段落段落中的空白符
默认情况下，段落标签会对文中的空白符进行合并，将多个连续的空白符显示为一个空格的效果
        *多个连续的空格，浏览器会忽略这些空格，只保留一个
        *出个连续的换行,浏览器会将这些转换成一个空格
如果想实现段落中换行，需要专门使用特定的标签<br/>

<p>这是一段话1</p>
<p>这是一段话2</p>
<p>这是一段话3</p>
<p>这是一段话4</p>
<p>这是一段话5</br>这是另起一行的</p>

文本格式化标签

<q>标签，短文本引用

<blockquote>标签，长文本引用  语法：<blockquote>引用文本</blockquote>

<hr/>标签，添加水平横线.

 <address>标签，为 网页加入地址信息   语法：<address>联系地址信息</address>

使用<code>标签加入一行代码。语法：<code>代码语言</code>

使用<pre>标签为网页加入大段代码。  语法：<pre>语言代码段</pre>

        <strong>加粗——strong</strong> <br>
		<b>加粗-b</b><br>
		<em>倾斜-em</em><br>
		<i>倾斜-i</i><br>
		<del>删除线</del><br>
		<s>删除线</s><br>
		<ins>下划线</ins><br>
		<u>下划线</u><br>
		<hr/>
		<address>联系地址信息</address>
		<code>var i=i+300;</code>
		
		<pre>
		    var message="欢迎";
		    for(var i=1;i<=10;i++)
		    {
		        alert(message);
		    }
		</pre>

 

布局标签

<div>和<span>标签

• 双标签
• <div>和<span>是没有语义的，他们是一个盒子，用于布局、装内容
• <div>类似一个大盒子，单独占一行
• <span>类似一个小盒子，一行上可有多个<span>标签

       

图片标签

img标签加载图片

src 图片的路径

alt  图片的加载不成功 提升语

tittle 图片加载成功的时候，鼠标移上面会显示tittle语句，图片加载不成功，也是显示tittle

width 设置宽度

height 设置高度 

border 设置边框

注：一般样式都是通过css设置

文件本地路劲

        绝对路径  C:\learn\html_css|a.jpg

        相对路径 

                同一级  ./  

                上一级  ../

                下一级 ./文件夹名        ./可以省略

                

超链接  a标签

用例： <a href="http://www.baidu.com">百度搜一搜</a>

给空链接 

<a href ="#"> 空连接测试-无跳效果

<a href ="">  空连接测试-刷新

链接文件 浏览器会根据文件类型，能识别展示 ，不能下载

<a href ="test /test.jpg" target="_blank">测试图片</a>

<a href ="test /test.zip" target="_blank">测试zip</a>

<a href ="test /test.txt" target="_blank">测试txt</a>

href 跳转目标地址

        相对地址，绝对地址（项目内的文件）

        远程地址（外部链接）

target 打开窗口的方式 默认_self 

        _self    被点击的同时，在当前窗口打开

        _blank    在新的窗口打开

        _parent    在父框架打开

        _top     在出口主题在打开链接文档

 html提供的特殊字符

&nbsp   表示一个空格

&lt          表示  小于 <

&gt         表示  大于 >

 &yen      表示 ¥
 &copy;   表示©

&emsp;    表示4个空格

表格（table）

<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

<th>…</th>：表格的头部的一个单元格，表格表头。

boreder 边框

align 字体水平   center 居中，left 居左，right 居右

valign 字体垂直  middle 居中，top 上方，bottom 下方

width 宽；

height 高 ；

thead 表格的头部部分

tbody 表格的身体部分；

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

cellpadding 是边框与其内容的间隙大小；

cellspacing 是边框与边框之间的间隙大小；

        <table border="1"   width="500px" height="200px">
			<thead align="center">
				<tr>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			
			<tbody align="center">
				<tr>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>12</td>
				</tr>
			</tbody>	
    	</table>

列表

• 双标签
• 用于布局，列表最大的特点就是整齐、整洁、有序
• 根据使用场景的不同，列表可分为三大类：无序列表、有序列表和自定义列表

1.无序列表

• <ul>标签表示HTML页面中项目的无序列表，而列表项使用<li>标签定义
• 无序列表的基本语法格式：

  <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ···
  </ul>

• 注意：
• 无序列表的各个列表项之间没有顺序，是并列的
• <ul></ul>中只能嵌套<li></li>
• <li>与</li>之间相当于一个容器，可以嵌套所有元素
• 无序列表会带有自己的样式属性，但在实际使用时，使用CSS设置

2.有序列表

• <ol>标签用于定义有序列表，列表排序以数字来显示，使用<li>标签来定义列表项
• 有序列表的基本语法格式：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ···
</ol>

• 注意：

1. <ol></ol>中只能嵌套<li></li>
2. <li>与</li>之间相当于一个容器，可以嵌套所有元素
3. 有序列表会带有自己的样式属性，但在实际使用时，使用CSS设置

3.自定义列表

• 使用场景：用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
• <dl>标签用于定义列表，<dt>标签定义项目/名字，<dd>标签描述每一个项目/名字
• 基本语法格式：

  <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
      <dt>名词2</dt>
      <dd>名词2解释1</dd>
      <dd>名词2解释2</dd>
      ···
  </dl>

• 注意：

1. <dl></dl>中只能包含<dt>和<dd>
2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
3. <dt>与<dd>是并列关系