整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML基本标签

TML标签

基本标签

HTML页面中内容是由HTML标签组织起来的,如页面中的文本、图像、Flash视频文件等都是通过HTML标签合理地显示在页面的各个位置。



1 标题标签<h1>~<h6>

标题标签表示一段文字的标题(主题),并且支持多层次的内容结构。HTNL.共提供了6级标题,分别为<h1>~<h6>,并赋予了标题一定的外观,所有标题字体加粗,其中山<h1>字号最大,<h6>字号最小.


2.图像标签<img>

在网页中常用的图像格式有4种,即JPG、GIF、BMP.PNG,其中使用比较多的是JPG、GIF和PNG,大多数浏览器都可以显示这些图像。


显示图像的语法:

< img src="ur1" alt="文本" width="x" height="y"/>


在语法中:

a、SrC属性:表示显示图像的地址。

b、alt属性:指定图像的替代文本,当图像无法显示时(如图片路径错误或网速太慢等)替代显示的文本,这样,即使图像无法显示,用户还可以看到网页丢失的信息,所以为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好地显示信息,并且对于那些使用纯文本浏览器的人来说是非常有帮助的。

c、width属性:表示图像宽度.

d、height属性:表示图像高度。


3.段落标签<p>

顾名思义,段落标签表示将一段文字组成一系列段落内容,这样做的目的是内容应用某些格式和布局,使各个段落的逻辑更清晰明了。在HTML文档中,段落通过<p>标签定义。段落标签<p>表示段落的开始,</p >表示段落的结束。


4.换行标签<br/>

在希望不产生一个新段落的情况下进行换行,则使用<br>标签。<br>是一个空的HTML标签,由于关闭标签没有任何意义,因此它没有结束标签。


注意:

使用<b>和<br>的结果一样,在XHTML以及未来的HTML版本中,根据W3C规范,不允许使用没有结束标签的HTML元素,因此使用<br>页面更规范,有更长远的保障。


5.水平线标签<hr/>

水平线标签表示一条水平线,注意该标签与<br>标签一样,没有结束标签,直接使用<hr/>表示标签的开始和结束。

使用以上讲解的基本标签,就可以进行网页内容排版了。

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容:

今天的日期是: Thu Aug 25 2016 09:23:24 GMT+0800 (中国标准时间)

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>

<html>

<body>

<script>

document.write(Date());

</script>

</body>

</html>

绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容:

实例

<html>

<body>

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="新文本!";

</script>

</body>

</html>

本例改变了 <h1> 元素的内容:

实例

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

<script>

var element=document.getElementById("header");

element.innerHTML="新标题";

</script>

</body>

</html>

实例讲解:

  • 上面的 HTML 文档含有 id="header" 的 <h1> 元素

  • 我们使用 HTML DOM 来获得 id="header" 的元素

  • JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=新属性值

本例改变了 <img> 元素的 src 属性:

实例

<!DOCTYPE html>

<html>

<body>

<img id="image" src="smiley.gif">

<script>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

实例讲解:

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素

  • 我们使用 HTML DOM 来获得 id="image" 的元素

  • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

文章来源:freecodecamp网址:

https://chinese.freecodecamp.org/

HTML 是一种标记语言,使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构成,标签之间是文本内容。 不同的标签可以让文本内容以标题、段落、列表等形式展现。

在这个课程中,你将通过编写一个展示猫咪图片的应用,学习最常见的 HTML 元素——它们可以用来构成任何网页。

注:本示例为第三个示例,以下内容来自freecodecamp。文章中图示为调试当时界面,供学习参考。

用 p 元素代表段落通过

p 元素是网站上段落文本使用的元素。 p 是“paragraph(段落)”的缩写。

你可以像这样创建一个段落:

<p>I'm a p tag!</p>

要求:在 h2 元素下方添加一个 p 元素,其内容是 Hello Paragraph。

注意: 按照惯例,所有 HTML 标签都应该是小写字母,例如应使用 <p></p>,而不会使用 <P></P>。

原始代码界面:

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

更改后代码如下: