HTML元素及属性

元素(又称标签)

  • 段落元素
示例:< p> xxx:这是一个段落 < / p>
< p>段落元素起始标签
< / p>段落元素闭合标签
xxx段落显示内容

属性

  • 属性是 HTML 元素提供的附加信息。
  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name=“value”。
  • 属性值应该始终被包括在引号内。(在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name=’ John “ShotGun” Nelson’)
标题(标签1)
  • 搜索引擎使用标题为您的网页的结构和内容编制索引。
  • 用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
  • 标题用 < h1 > xxx </ h1> 表示一号标题
  • < hr > 标签在 HTML 页面中创建水平线。
<!-- 这是一个注释 -->
段落(标签2)
  • 段落是通过 < p> 标签定义的。
  • 如果只是希望进行换行,而不是另起一个段落,可以用换行标签3 < br>

HTML 文本格式化的一些标签

  • 标签4 < b> 加粗文本< /b>
  • 标签5 < i> 加粗文本< /i>
  • 标签6 < sub> 下标< /sub> < sup> 上标< /sup>
  • 标签7 < ins>插入的文本 < /ins>
  • 标签7 < del>删除的文本 < /del>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<abbr title="etcetera">etc.</abbr> 
<br />
<acronym title="World Wide Web">WWW</acronym>
  • < abbr> 用于定义缩写;< acronym> 用于展示缩写前后内容;
  • 被缩写的内容只有当鼠标放上去之后才会被显示
<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

//<pre>运行结果中不会省略换行和空格
<p>
    春眠不觉晓,
      处处闻啼鸟。
        夜来风雨声,
          花落知多少。
</p>

// 运行结果中省略换行和空格,所有多余的空格都会被算作一个空格,多余的换行也会被显示为一行

< head> 中的一些标签

< head> 标签包含了所有的头部标签标签。在< head> 标签中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

  1. 标签< title>
    1.1. 标签< title>是头部标签的必须存在部分
    1.2. 标签< title>在网页中不仅展示在浏览器的顶部和工具栏,同时还会充当搜索引擎的搜索关键字

  2. 标签< base>
    2.1. < base>描述了基本的链接地址,该标签作为HTML文档中所有的链接标签的默认链接
    2.2. 基本运用形式如下:(href是描述链接的属性)

<base href="http://www.runoob.com/images/" target="_blank">
  1. 标签< link>
    3.1. 用于表明本文档与外部资源文件的关系
    3.2. 通常用于链接到样式表(通过引用地址)
    3.3. 基本运用形式如下:
<link rel="stylesheet" type="text/css" href="mystyle.css">
  1. 标签< style>
    4.1. 标签< style>是用来表明文档样式的标签。可以通过在标签内声明样式表CSS的引用地址来渲染文档,同时也可以直接在< style>中添加样式对文档进行渲染
    4.2. 基本运用形式如下:
<head>
<style type="text/css"> //通过属性type获得css样式文件的引用地址
body {background-color:yellow}
p {color:blue}
</style>
</head>
  1. 标签< meta>
    5.1. meta标签描述了一些基本的元数据。元数据不会直接显示在网页中,但是被浏览器解析
    5.2. META 元素通常用于指定网页的描述关键词文件的最后修改时间作者,和其他元数据。
    元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
    5.3. 基本运用形式如下:
//为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容:
<meta name="description" content="Web for free">
//每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
  1. 标签< script>
    6.1.用于加载JavaScript 脚本文件(详细见Javascript)

有关CSS样式表

为了更好的渲染HTML元素而引入。

  • 内联样式:在HTML元素中使用"style" 属性 (使用方法详见上面,一般用于特殊的样式需要应用到个别元素)
  • 内部样式表:在HTML文档头部 < head> 区域使用< style> 元素 来包含CSS(详见上面)
  • 外部引用:使用外部 CSS 文件(best way

图片内部标签

有关URL格式:
WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL(Uniform Resource Locator,统一资源定位符),它是WWW的统一资源定位标志,就是指网址

  • 标签< img>图片
<img src="url" alt="some_text"  rock" width="304" height="228">  
  • 属性 alt 指用来为图像定义一串预备可替换的文本。这个属性会在浏览器无法成功加载出图片的时候用于替换图片,可自定义文本内容。

  • 注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

  • 标签< map>图片地图
    创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接

<map name="planetmap">
 //矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
  <area shape="rect" coords="x1,y1,x2,y2" alt="Sun" href="sun.htm">
  //圆形:(圆心坐标为(X1,y1),半径为r)
  <area shape="circle" coords="x1,y1,r" alt="Mercury" href=url>
  多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
  <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
</map>

表格

<table border="1">
    <caption>Monthly savings</caption>//表示表格的标题
    <tr>
        <td>Head1</td>
        <td>Head2</td>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本

<table border="0"> //表示无边框
<table border="1" cellpadding="10"> //可以设置单元格边距
<table border="1" cellspacing="10"> //
<th colspan="2">Telephone</th> //行跨两行
<th rowspan="2">Telephone:</th> //列跨两列
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值