HTML--基本标签

一.html文档格式及标签格式

HTML的全称是超文本标记语言(HyperText Markup Language),通过标记符描述页面显示的文本,图片,声音和影视动画

1.html文档格式

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
</body>

</html>

  1. <!DOCTYPE html>声明为HTML5文档。

  2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。

    <html lang="en">指定网页的语言

  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。

  4. <body>、</body>之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 <meta charset="utf-8">声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

二.head中的标签

head标签都放在头部分之间。这里面包含了：

​ <title>、<meta>、<link>，<style>

  • <title>：指定整个网页的标题，在浏览器最上方显示。

  • <meta>：提供有关页面的基本信息

  • <link>：定义文档与外部资源的关系。

  • <style>:定义内部样式表与网页的关系

头标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.title标签

主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

 <title>网页标题</title>

 

2.Meta标签

　　元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。

　　提供的信息是用户不可见的。

meta标签的组成：

　　meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

常用的meta标签：

1)http-equiv属性

　　它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">　

ps:关于mime文件类型（前端静态资源文件）：

连接：http://www.w3school.com.cn/media/media_mimeref.asp

2)name属性

<meta name="keywords" content="内容关键字1,关键字2,..." />
<meta name="author" content="网页作者姓名" />
<meta name="description" content="页面描述文字" />
<meta name="others" content="其他搜索内容" />

应用:

　　主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做*SEO*（search engine optimization，搜索引擎优化）。

<meta name="viewport" content="width=device-width, initial-scale=1">

上面这个标签，是让我们网页支持移动端，移动设备优先（了解即可）

 

 

3.link标签

link标签定义了文档与外部资源之间的关系，通常用于链接到样式表:

<link type="目标文件类型" rel/rev="stylesheet" href="相对路径/目标文档或资源URL" [media="适用介质列表" charset="目标文件编码"] />

href:该属性指定引用外部文件的URL

type:该属性规定目标文件类型,常用的数值有 text/css , text/javascript , image/gif.

rel/rev: 表示当前源文档与目标文档之间的关系和方向. rel属性指定从源文档到目标文档(前向链接)的关系,而rev属性则指定从目标文档到源文档(逆向链接)的关系.这两种属性可以在<link>或<a>标记中同时使用.属性的取值如下

  • alternate:可选版本
  • stylesheet:外部样式表
  • start:第一个文档
  • next:下一个文档
  • prev:前一个文档
  • contents:文档目录
  • index:文档索引
  • copyright:版权信息文档
  • chapter:文档的章
  • section:文档的节
  • subsection:文档子段
  • appendix:文档附录
  • help:帮助文档
  • bookmark:相关文档
  • glossary:文档字词的术语表或解释
  • external: 外部文档

例如,

<link rel="stylesheet" type="text/css" href="c1-2.css" />

 

4.style标签

style标签在 HTML 文档中添加样式:　

<head>
    <style type="text/css">
        body { padding: 0px;">yellow}
        p {color:blue}
    </style>
</head>

 

三.body中的标签





b  标签: 加粗
i : 斜体
u: 下划线
s: 删除线
p: 段落
h1~h6: 标题标签
br: 换行
hr:横线
div: 块级标签
span: 行内标签
img:图片
a:超链接
ul:无序列表
ol:有序列表
li:列表内容
table:表格
    thead:表格头部
    tbody:表格身体
    tfoot:表格底部
        tr  :行
            td:单元格
form 表单









<h1></h1>   标题:标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。

<p></p> 段落 : align='属性'   属性有left ,center,right

<select>多选 里面的每一项用<option>来表示

<label>通过for属性，将lable和input标签绑定，为 input 元素定义标注（标记）

<b></b>或<strong></strong>  粗体标签

<i></i> 或<em>   斜体字标签

<div></div> 盒子标签 align='属性' 设置块儿的位置,可以换行

<span></span> 行内标签 里面只能放文字,图片,表单

<a  href='网页链接'></a>

<div id='top1'></div>    <a href='#top1'></a> 锚链接

<img href='路径' /> 图片标签

<ol> <ol> 有序列表 
<li></li> 列表项  <li> 必须在列表内使用

<ul></ul> 无序列表

<table>表格标签  border:边框(px) width:宽 height:高 
<thead>表头
<tr> 每一行
<td> 单元格
</td>
</tr>
</thead> 
</table>

cellpadding:单元格到边的距离. cellspacing:单元格和单元格之间的距离(外边距)
<th> 加粗的单元格 相当于<td> + <b>


<form method='提交方式' action='数据发送的url'></form>表单

<input type='属性'>输入标签
[
text:默认
password:密码框
radio:单选按钮:name相同的作为一组,组内互斥,只能选其中一个
checkbox 多选按钮,name相同的为一组,可多选
button 普通按钮
submit 提交按钮,点击会将表单数据按照method请求方式 提交在action的url中
reset 重置当前表单内的所有内容
image 图片按钮,
file 上传文件到服务器，要上传文件，form表单的method必须是post，并且在form标签中设置属性enctype="multipart/form-data"
value=”内容“：文本框里的默认内容（已经被填好的）
size=“50”：表示文本框可以显示50个字符。
readonly 输入框只读
disabled 不可用
checked 选择框默认选中
]

<textarea> 文本标签
[
value：提交给服务器的值。
rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数。
readonly：只读
]



常用标签


 








            

            
posted @ 
2019-01-23 21:06 
robertx 
阅读(220) 
评论(0) 
编辑 
收藏 
举报