HTML基本常用标签

HTML基本常用标签

标签元素和其属性都使用小写字母

常用的文本的元素

标题标签元素 <h1>~<h6></h1>~</h6>
段落标签元素<p></p>
水平线元素<hr/>
换行元素<br/>为行内换行

强调元素<em></em>（变斜）和<strong></strong>（变粗），更注重语义强调。
文本变化元素<i></i>（变斜）和<b></b>（变粗）

<em>会变斜吗</em>
<i>会变斜吗</i>
<b>会变粗吗</b>
<strong>会变粗吗</strong>

效果如下：
会变斜吗
会变斜吗
会变粗吗
会变粗吗

图片元素<img> 即插入图片。
<img src="images/testpicture.jpg" alt="测试图片" width="50" height="50">
src属性为图片地址路径，有分相对路径和绝对路径。
相对路径就如上述代码一样，以当前文件夹为基准，进行查找文件地址，如果文件在上一级的文件夹中可以使用在前面加../，上面有几级文件夹就用几个../。
<img src="../images/testpicture.jpg" alt="测试图片">
绝对路径就使用从根目录来开始查找路径。
<img src="f:/server/images/textpicture.jpg" alt="测试图片">
alt属性为当图片失效时会显示上面内容。
width和height为图片的宽和高，可以进行设置，建议一般在图片多的情况下不要使用，事前对图片进行处理（原因为就是使用了w和h，页面加载时还会加载整个大的图片，然后在进行缩放，对加载速度有一定的影响）。

链接元素<a></a>
<a href="test_html.html" target="_blank" title="你猜猜">测试网页</a>
<a href="test_html.html" target="_self">测试网页</a>
一般链接元素<a>常用两个属性href和target。
href属性的内容为链接地址或者路径，也分相对路径和绝对路径。
target属性为链接展开的是新的页面（_blank）还是在本页面（_self）展开（常见为两个，当然还有其他的，具体可以在w3cschool上可以查找到）。
title属性是指你的鼠标移动到超链接时会显示的内容，如图：

页面转移（即点击链接，可以跳转到相对应的区域或者另一个页面的区域）
<a href="#value">转移到值</a>
<a href="test_html.html#value">转移到值</a>
<a name="value">值</a>
第一种方法：首先，对要跳转的内容使用<a></a>元素包裹起来，然后添加属性name；第二，将链接的内容改为#+name的值。
还有第二种方法实现页面转移（使用id）
<img id="value" src="images/testpicture.jpg" alt="test2">
第二种方法：在要转移的值的元素中加入id，然后链接元素<a>中href的值还是和上面一样加#+id的值。
个人比较倾向于第二种方法

文本列表元素<ol></ol>和<ul></ul>
<ol>为有序列表，<li></li>为内容输入，type属性可以更改标记内容，但是不建议使用，可以通过CSS来更改。

<ol>
     <li>qqq</li>
     <li>www</li>
     <li>eee</li>
     <li>rrr</li>
</ol>

效果如下：

1. qqq
2. www
3. eee
4. rrr

<ul>为无序列表，<li></li>为内容输入。

<ul>
     <li>qqq</li>
     <li>www</li>
     <li>eee</li>
     <li>rrr</li>
</ul>

效果如下：

• qqq
• www
• eee
• rrr

一般常用于导航等方面

HTML不常用的文本的元素

短引用<q>引用内容</q>。
短引用引用内容。
长引用<blockquote>引用内容</blockquote> 其中有属性cite为引用的URL。引用后会单独形成一行。
长引用

引用内容

其中有属性cite为引用的URL。引用后会单独形成一行。

定义列表元素<dl></dl>
<dl></dl>为总框，<dt></dt>为定义词<dd></dd>为定义内容

 <dl>
        <dt>aaa</dt>
        <dd>qqq</dd>
        <dt>sss</dt>
        <dd>www</dd>
 </dl>

效果如下

aaa

qqq

sss

www

注释<!-- -->可以使用快捷键Ctrl+/或者Ctrl+Shift+/

HTML中的特殊符号

效果	符号
空格	 
大于号（>）	>
小于号（<）	&lt;
引号（”）	&quot;
版权符号©	&copy;

**本博客仅用于记录web前端学习情况**test