《网页开发手记》学习笔记之HTML标签

最新推荐文章于 2021-12-13 21:54:58 发布

隐官城头坐

最新推荐文章于 2021-12-13 21:54:58 发布

阅读量682

点赞数

文章标签： HTML常见标签

本文链接：https://blog.csdn.net/a1969212650/article/details/25658553

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML文件下有一个HTML根元素，HTML标签下有两个子元素：header和body

header标签下可以有以下标签：

title

指定网页的标题

base

设定基路径，如：

<html>
<header>
<title>first</title>
<base href="http://www.baidu.com" _target="_blank"></base>
</header>
<body>
<a href="/">百度一下，你就知道</a>
</body>
</html>

如上所示，base的效果就是连接的前面自动加上了base的href属性值，点击链接就跳到了百度首页了。

meta

meta元素提供的信息对于用户是不可见的，一般定义页面信息的名称，关键字，作者等。在header中可以有多个meta元素，meta元素分为两种：页面描述信息和http标题信息

页面描述信息：

<meta name="keywords" value="...,.."/>
<meta name="description" value="..."/>
<meta name="author" value="..."/>
<meta name="generator" value="..."/>
<meta name="robots" value="..."/>

http标题信息：

<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<meta http-equiv="refresh" content="30;url=www.baidu.com"/><!-- 30s后跳到百度首页 -->
<meta http-equiv="expires" content="30"/><!--30s后网页过期 -->
<meta http-equiv="cache-control" content="no-cache"/><!-- 不缓存网页，每次请求都从服务器 -->
<meta http-equiv="set-cookie" content="..."/><!-- 设置cookie -->

注释还算讲的清楚吧。

style和script

<style type="text/css">

</style>
<script type="text/javascript">

</script>

定义css和js用的。

header的子元素大概就这些吧，接下来看看body，body的子元素就多了，先从body的属性说起吧。

bgcolor：设置网页的背景色，默认是重复的，效果一试便知

style：设置样式，如：

<body style="background:url(a.jpg) center bottom no-repeat">

其中no-repeat也可以为repeat-x或repeat-y

leftmargin、topmargin、rightmargin、buttonmargin：控制边距

处理文字和段落

<p>：段落，在段落中 代表一个空格，align属性可以设置对齐方式，默认为left

<br>：换行

<hr>：水平分割线，常见的属性有align，width，size，color，title

<font>：文字修饰，常见的属性有color，size（1-7，默认为3），face（默认为宋体）

<em>：斜体

<strong>：加粗

处理特殊字符：

< <

> >

"" "

& &amp

<sup>：上标

<sub>：下标

<marquee>：文字滚动

<ol>、<ul>：有序列表和无序列表，列表项用<li>表示

<a>：超级链接，target属性用于设置打开方式，有_self（默认，覆盖），_blank（新窗口打开），_top，_parent，属性href用于设置链接的URL，属性title设置提示

<a name="1"/>这样的标签可以定位HTML的位置，使用<a href="#1">1</a>就跳到了前者<a>所在的位置了

HTML中的图片

图片文件的格式是计算机存储图片的方式和压缩算法，常用的格式有gif，jpg

<img>：属性src指定文件位置，属性width，height指定宽高，border设置边框粗细，alt指定当图片不显示时的代替文字，align与文字一起排版时的对齐方式

<a><img/></a>：图片链接

表格

<table border="1" align="center" rules="cols" bordercolor="#00ff00" cellspacing="5" cellpadding="5">
<caption>
表格测试
</caption>
<tr height="50" align="center">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
<tr></tr>
</table>

表格可以嵌套，使用<table>可以制作出很美观的表格来