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>
效果如下:
- qqq
- www
- eee
- 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中的特殊符号
效果 | 符号 |
---|---|
空格 | |
大于号(>) | > |
小于号(<) | < |
引号(”) | " |
版权符号© | © |
**本博客仅用于记录web前端学习情况**test