Web前端入门学习(2)——HTML常用标签

HTML标签

  1. a标签

    a标签是一个超链接标签,用于从一个页面链接到另一个页面。在《Web前端入门学习(1)》有提到过4个伪类,分别是a:link、a:visited、a:hover、a:active。

    a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式;

    a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式;

    a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化;

    a:active代表的是当用户点击链接的那一刻,所表现的形式。

    注意:这4个伪类的使用,有一个先后顺序,并不是随便写就可以的。这里规定,a:hover必须写在a:link、a:visited后面,而a:active必须写在a:hover后面。

    href属性用于规定链接的目标URL,即链接地址。

    如<a href="http://cherry360.blog.51cto.com/">小倩加油站

    链接打开方式默认是在本窗口打开,如果想在新窗口打开链接,可以加个target属性:

    如<a href="http://cherry360.blog.51cto.com/" target="_blank">小倩加油站

  2. span标签

    span标签是用于对文档中的行内元素进行组合,该标签没有固定的格式表现。当对它应用CSS样式时,才会产生视觉上的变化。如果不对<span>应用样式,那么该元素中的文本与其他文本不会有任何视觉上的差异。<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

  3. 标题标签

    标题标签有h1~h6,如

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题1</h2>
<h3>我是标题1</h3>
<h4>我是标题1</h4>
<h5>我是标题1</h5>
<h6>我是标题1</h6>
<h7>我不再是标题,而是浏览器默认字体~~</h7>
</body>
</html>

注意:当超出h6之后,标题标签不存在,字体显示跟所打开的浏览器默认字体一致了。

4.其他常用标签:

段落标签:<p>我是段落</p>

重要文本:<strong>加强</strong>

强调文本:<em>强调</em>

.....

还有很多标签,详见:http://www.runoob.com/tags/html-reference.html

5.HTML5新增标签

header:定义文档或文档的一部分区域的页眉。

nav:定义导航链接。

section:定义文档某个区域。

footer:定义文档或文档的一部分区域的页脚。

article:定义独立内容。内容本身必须有意义而且是独立于文档的其他部分。

aside:定义<aritcle>标签外的内容,内容与附近的内容有关。

time:定义公历时间或日期。

mark:定义带有记号的文本,为了突出显示文本。

img(跟a链接一样,是一个单标签):定义HTML页面的图像,有两个必要属性:src和alt。

时间: 2024-10-10 08:17:27

Web前端入门学习(2)——HTML常用标签的相关文章

Web前端入门学习(5)——浮动原理及清除浮动

浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换.加上display属性,可以指定元素的类型,如display:block.display:inline,以及display:inline-block.当然用得最多的是最后一个display:inline-block.结合例子来看: 例

web前端入门到实战:HTML标签和JS中设置CSS3 var变量

一.HTML标签中设置CSS变量 如下: <div style="--color: #cd0000;"> <img src="mm.jpg" style="border: 10px solid var(--color);"> </div> 直接正常CSS语句一样在style属性中设置即可. 效果如下截图: 二.JS中设置CSS变量 如下,HTML示意: <div id="box">

web前端入门到实战:HTML标签的权重

一.什么是优先级的权重 1.作用:当多个选择器混合在一起的时候,我们可以通过计算权重来判断谁的优先级最高. 2.权重的计算规则 公共代码: <body> <div id="identity1" class="box1"> <ul> <li> <p id="identity2" class="box2">试炼语句</p> </li> </u

Web前端入门学习(1)——走进前端世界

前端基础知识 前端开发语言: HTML(Hypertext Markup Language):超文本标记语言: CSS(Cascading Style Sheets):层叠样式表: JS(JavaScript):脚本语言. 样式表: 行间样式表.内部样式表.外部样式表. 样式 样式格式:属性名:属性值: 常见样式: border:1px solid red border-width:1px border-style:solid border-color:red 常见颜色模式: 关键字:red y

Web前端入门学习(4)—— 块级元素和行内元素之特征与转换

块级元素和行内元素  1.元素的定义 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.     div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度

Web前端入门学习(3)——CSS选择器

CSS选择器 id选择器 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{width:200px;height:200px;border:2px solid #f3f3f

Web前端入门学习(6)——浮动例子之鉴赏

浮动例子之鉴赏 在浮动原理及清除浮动一文中(http://cherry360.blog.51cto.com/12176744/1864258),简单介绍了浮动的相关基础知识,为了巩固知识点,本篇结合代码展示关于浮动的几个常见例子. 例1:九格子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九格子</titl

web前端入门到实战:html常用标签、包含关系、常用术语,以及网页设计中的字体分类

字体的分类: serif (衬线字体){在笔画上面有些特殊的修饰效果} sans-serif (非衬线字体){横平竖直.横就是横,点就是点} monospace ( 等宽字体) cursive ( 草书字体) fantasy (虚幻字体) 以上这些分类都是一些大的分类, 并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体.一般情况在指定字体的时候.把分类名称放到最后面当备用字体 html标签 html标签的语义: <div>,<span>没有任何默认样式

web前端入门到实战:HTML中img标签的src属性绝对路径问题解决办法,完全解决!

HTML中img标签的src属性绝对路径问题解决办法,完全解决 需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,tomcat,html,img,src,java 注意:不需要寻找tomcat真实路径下的server.xml去修改,这个地方不需要修改. 解决办法:1.在eclipse中找到你的项目发布的tomcat服务器,然后找到左侧Servers下对应的你的Tomcat服务器中的server.xml文件,如下图所示: