前端-HTML常用标签（一）

来源：互联网发布：人见人爱网络剧沈腾编辑：程序博客网时间：2024/05/17 20:28

HTML的结构：

  <! DOCTYPE   html>  <html>      <head>         <title></title>      </head>      <body>      </body>  </html>

介绍

  <! DOCTYPE   html> //表示文档类型  <head> </head>     //表示html的头,定义当前文档中的基本信息  <title> </title>   //表示html的标题  <body> </body>     //表示html的主体，定义当前文档中的内容组件

第一个案例：

<!-- 使用HTML5的规范，有了这个就可以使用HTML5的一些属性 --><!DOCTYPE html ><html>    <!-- 定义当前文档中的基本信息 -->    <head>        <!-- 定义文档的标题，将会显示在标题栏         给当前网页做搜索引擎优化        -->        <title>第一张页面first.html</title>    </head>    <!-- 定义当前文档中的内容组件 -->    <body>    今天股票上涨了    </body></html>

运行

使用Eclipse来运行
右键项目，找到项目位置
在我的电脑中找到，打开

HTML常用标签：

换行标签：
</br>
段落标签：
<p>段落标签</p>
标题标签：
<h1> </h1>大 <h2> </h2> ...... <h6> </h6>小
样式相关标签（现在用CSS做样式，以下已过时）：
<s> </s>删除线
<b> </b>加粗
<i> </i>倾斜
图片标签
在HTML中使用标签显示图片

<!DOCTYPE html><html>    <head>    <title>图片标签</title>    </head>    <body>        <img src="girl.jpg" title="当鼠标悬停到改标签时的提示文本" alt="当鼠标悬停到改标签时的提示文本" width="200" height="300">    </body></html>

HTML中的路径：

绝对路径：

基于操作系统的绝对路径（访问本地的资源）
windows:以盘符开头的路径
linux/Unix/MacOS:以根目录/开头的路径
基于网络的绝对路径
以http://开头的路径

基于操作系统的绝对路径：

这里写图片描述

<!-- 使用HTML5的规范，有了这个就可以使用HTML5的一些属性 --><!DOCTYPE html ><html>    <!-- 定义当前文档中的基本信息 -->    <head>        <!-- 定义文档的标题，将会显示在标题栏         给当前网页做搜索引擎优化        -->        <title>第一张页面first.html</title>    </head>    <!-- 定义当前文档中的内容组件 -->    <body>    今天股票上涨了    今天股票上涨了    今天股票上涨了    今天股票上涨了    今天股票上涨了    <!-- 要想在火狐或谷歌浏览器上运行要加上file:\\\ -->    <img alt="悬停提示文字"  title="悬停提示文字" src="file:\\\E:\fuxiaoyuandroid\java\workspace\Web\src\com\he\html\tongdao.png">    </body></html>

这里写图片描述

基于网络的绝对路径：

<img src="http://tmooc.cn/script/images/online-r-con.png"/>

相对路径：

<img src="b.jpg">
file:///E:\fuxiaoyuandroid\java\workspace\Web\src\com\he\html\first.html
file:///E:\fuxiaoyuandroid\java\workspace\Web\src\com\he\html\b.jpg 替换成目标地址，在当前下进行寻找。

<img src="images/b.jpg">
file:///E:\fuxiaoyuandroid\java\workspace\Web\src\com\he\html\first.html
file:///E:\fuxiaoyuandroid\java\workspace\Web\src\com\he\html\images/b.jpg 目标地址

<img src="../images/b.jpg">

网页中支持的图片格式：

jpg:压缩比率较大。不支持透明色。
png：较高的保存图片的颜色。支持透明色。
gif：支持动态图，图片支持的颜色较少，支持透明色。

超链接标签：

<a href="链接地址">链接文本</a>

表格标签：

作用：
（1）早期页面中使用表格做网页的排版与布局。
（2）表格也可以用于呈现二维数据。

0 0