您的位置：首页 > Web前端 > HTML

HTML初步认识

2017-08-15 19:42 155 查看

2017/8/15

HTML的基本结构

<!-- 注意：在基本结构上方通常会有<!doctype html>，该句话的作用是确定文档类型声明，就是告诉浏览器该网页是遵照哪个版本的HTML书写 -->
<html>*
<head>
<title>网页标题</title>
<meta  charset=”utf-8”/>
</head>
<body>

<!--  代码正文  -->

</body>
</html>

HTML的常用标签

1.p标签

<p>Hello!</p>

作用 : 在页面中创建段落

属性 : align ;作用是设置段落的对齐方式:属性值:left、center、right；

2.标题标签

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!--注意：h1字号最大，h6字号最小，所有标题都具有加粗效果。六组标题重要性递减，浏览器对h1最为敏感-->

3.换行br标签

<h1>这是标题 1</h1><br>
<h2>这是标题 2</h2><br>
<h3>这是标题 3</h3>

<!--<br> 可插入一个简单的换行符。
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。-->

4.图像标签img

<img src="图片存放路径" alt="规定图像的替代文本。（图片未加载显示内容）">

作用：在页面中插入图像

导致图片无法正常加载：①路径错误； ②网络原因；

路径：相对路径、决定路径

相对路径：是指文件间的相对的位置关系，包含如下三种情况：

①网页和图片在一个文件夹下，路径为图片的名字，

<img src=”pic.jpg”>

②网页在文件夹里面，图片在文件夹外面，路径为先跳出文件夹，然后写图片名，如

<img  src=”../pic.jpg”>

③网页在文件夹外面，图片在文件夹里面，路径为先进入文件夹，然后写图片名，如

<img src=”a/pic.jpg”>

绝对路径 ：指文件在磁盘中的具体位置，绝对路径是从盘符或协议开始写的路径，如

<img src="file:\\\C:\Users\SSNH\Desktop\day1\pic.jpg" alt="图片1">

5.文本加粗标签

<b>加粗文本</b>

作用修饰文本加粗效果

6.文本倾斜标签

<i>倾斜文本</i>

<em>倾斜文本</em>

作用修饰文本倾斜效果

7.文本上下标签

修饰文本下标：该效果可写出氧气

<p>O<sub>2</sub></p>

修饰文本上标：可写出平方

<p>O<sup>2</sup></p>

8.span标签

<p>内容1<span>内容2</span></p>

作用是将一行文本划分成不同的部分，方便用CSS进行修饰，无实质效果

9.a标签

<a href="" target="" title=""></a>

属性：

href：设置链接目标文件的路径 target：设置目标文件的打开方式，属性值为_self或_blank

_self：默认，在自身窗口打开目标文件

_blank：在新窗口中打开目标文件

title：设置鼠标悬停在超链接上时的提示文字

超链接的应用对象：文本、图片

文本：默认情况下文字变为蓝色，且有下划线，当鼠标移到上面的时候显示为一只手

图片：在IE浏览器下具有超链接的图片会有边框，使用border=0来去掉边框

超链接的种类

内部链接：所谓内部链接就是指同一网站内部各文件间的链接，需要注意该href的值为相对路径

外部链接：所谓外部链接就是指网站间各文件的相互链接，需要注意href的值为绝对路径，如

<a href="http://www.baidu.com">百度首页</a>

可连接到百度首页

空链接：所谓空链接就是指具有链接效果，但是没有链接指向，href的值为#

锚点链接：所谓锚点路径就是一个文档内部各部分间的链接，锚点链接的使用需要分为两步

第一步：设置锚点：

<开始标签  id=”锚点名”></结束标签>

第二步：链接锚点：

<a href=”#锚点名”></a>

2017年8月15日20:45:36

4000

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 结构 class

相关文章推荐

新的分享

章节导航