HTML --- 简单的标签

HTML --- 简单的标签

html概述和基本结构

html概述

  HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

  HTML 不是一种编程语言,而是一种标记语言 (markup language)
  HTML 使用标记标签来描述网页

html基本结构

一个html的基本结构如下:

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

  第一行是文档声明,

  <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

  第二行“<html>”标签和最后一行“</html>”定义html文档的整体,“<html>”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是'lang="zh-CN"',不定义也没什么影响,它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“<body>”内编写网页上显示的内容。

html标签格式

html文档规范

  xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。

    1、所有的标签必须小写

    2、所有的属性必须用双引号括起来

    3、所有标签必须闭合

    4、img必须要加alt属性(对图片的描述)

标签的语法:

  <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
  <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

html注释:

1 <!-- 这是一段注释  -->

<head>内常用标签

<meta>标签

  meta介绍
  <meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。
  <meta>标签位于文档的头部,不包含任何内容。
  <meta>提供的信息是用户不可见的

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

(1)name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。    

1 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
2  
3 <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

(2)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

1 <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
2  
3 <meta http-equiv="content-Type" charset=UTF8">
4  
5 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 

非meta标签

1 <title>oldboy</title>     <!-- title里面放的是网页标签上面的名字 -->
2 <link rel="icon" href="http://www.jd.com/favicon.ico">
3 <link rel="stylesheet" href="css.css">
4 <script src="hello.js"></script> 

<body>内常用标签

 1 <hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
 2 
 3 <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
 4 
 5 <b> <strong>: 加粗标签.
 6 
 7 <strike>: 为文字加上一条中线.
 8 
 9 <em>: 文字变成斜体.
10 
11 <sup><sub>: 上角标 和 下角表.
12 
13 <br>:换行.
14 
15 <hr>:水平线
16 
17 特殊字符:
18       &lt; &gt&quot&copy;&reg;

html块

  <div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现. 
  <span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

  块级元素与行内元素的区别
  所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
  这两个元素是专门为定义CSS样式而生的。

html图像

<img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。

1 <img src="images/pic.jpg" alt="产品图片" />

超链接标签(锚标签)

<a>标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。

1 <a href="#"></a> <!--  # 表示链接到页面顶部   -->
2 <a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
3 <a href="2.html">测试页面2</a>

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。

1 <a href="#mao1">标题一</a>
2 ......
3 ......
4 <h3 id="mao1">跳转到的标题</h3>

html列表

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,代码如下:

1 <ol>
2     <li>列表文字一</li>
3     <li>列表文字二</li>
4     <li>列表文字三</li>
5 </ol>

在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,代码如下:

1 <ul>
2     <li>列表文字一</li>
3     <li>列表文字二</li>
4     <li>列表文字三</li>
5 </ul>

  在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释,代码如下:

 1 <h3>前端三大块</h3>
 2 <dl>
 3     <dt>html</dt>
 4     <dd>负责页面的结构</dd>
 5 
 6     <dt>css</dt>
 7     <dd>负责页面的表现</dd>
 8 
 9     <dt>javascript</dt>
10     <dd>负责页面的行为</dd>
11 
12 </dl>

html表格<table>

table常用标签

  1、table标签:声明一个表格

  2、tr标签:定义表格中的一行

  3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格

table常用属性:

  1、border 定义表格的边框

  2、cellpadding 定义单元格内内容与边框的距离

  3、cellspacing 定义单元格与单元格之间的距离

  4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right

  5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

  6、colspan 设置单元格水平合并

  7、rowspan 设置单元格垂直合并

传统布局:

传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:

  1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0

  2、单元格里面嵌套表格

  3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

  4、通过属性或者css样式设置单元格中元素的样式

html表单

表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),首先应该用<form>标签来定义表单区域整体,在此标签中再使用不同的表单控件来实现不同类型的信息输入,具体实现及注释可参照以下伪代码:

1 <!-- form定义一个表单区域,action属性定义表单数据提交的地址,
2 method属性定义提交的方式。   -->
3 <form action="http://www..." method="get">
4 
5 <!-- label标签定义表单控件的文字标注,input类型为text定义了
6 一个单行文本输入框  -->

<input>系列标签

 1 <1> 表单类型
 2 
 3 type:        text 文本输入框
 4 
 5              password 密码输入框
 6 
 7              radio 单选框
 8 
 9              checkbox 多选框  
10 
11              submit 提交按钮            
12 
13              button 按钮(需要配合js使用.) button和submit的区别?
14 
15              file 提交文件:form表单需要加上属性enctype="multipart/form-data" 
16             
17             上传文件注意两点:
18 
19                      1 请求方式必须是post
20                      2 enctype="multipart/form-data"
21 
22  <2> 表单属性
23 
24  name:    表单提交项的键.
25 
26            注意和id属性的区别:name属性是和服务器通信时使用的名称;
27            而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的
28 
29 value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:
30 
31                 type="button", "reset", "submit" - 定义按钮上的显示的文本
32                  
33                 type="text", "password", "hidden" - 定义输入字段的初始值
34                  
35                 type="checkbox", "radio", "image" - 定义与输入相关联的值
36 
37 
38 checked:  radio 和 checkbox 默认被选中
39 
40 readonly: 只读. text 和 password
41 
42 disabled: 对所用input都好使.
 1 <!-- form定义一个表单区域,action属性定义表单数据提交的地址,
 2 method属性定义提交的方式。   -->
 3 <form action="http://www..." method="get">
 4 
 5 <!-- label标签定义表单控件的文字标注,input类型为text定义了
 6 一个单行文本输入框  -->
 7 <p>
 8 <label>姓名:</label><input type="text" name="username" />
 9 </p>
10 
11 <!-- input类型为password定义了一个密码输入框  -->
12 <p>
13 <label>密码:</label><input type="password" name="password" />
14 </p>
15 
16 <!-- input类型为radio定义了单选框  -->
17 <p>
18 <label>性别:</label>
19 <input type="radio" name="gender" value="0" />20 <input type="radio" name="gender" value="1" />21 </p>
22 
23 <!-- input类型为checkbox定义了单选框  -->
24 <p>
25 <label>爱好:</label>
26 <input type="checkbox" name="like" value="sing" /> 唱歌
27 <input type="checkbox" name="like" value="run" /> 跑步
28 <input type="checkbox" name="like" value="swiming" /> 游泳
29 </p>
30 
31 <!-- input类型为file定义上传照片或文件等资源  -->
32 <p>
33 <label>照片:</label>
34 <input type="file" name="person_pic">
35 </p>
36 
37 <!-- textarea定义多行文本输入  -->
38 <p>
39 <label>个人描述:</label>
40 <textarea name="about"></textarea>
41 </p>
42 
43 <!-- select定义下拉列表选择  -->
44 <p>
45 <label>籍贯:</label>
46 <select name="site">
47     <option value="0">北京</option>
48     <option value="1">上海</option>
49     <option value="2">广州</option>
50     <option value="3">深圳</option>
51 </select>
52 </p>
53 
54 <!-- input类型为submit定义提交按钮  
55      还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
56      <input type="image" src="xxx.gif">
57 -->
58 <p>
59 <input type="submit" name="" value="提交">
60 
61 <!-- input类型为reset定义重置按钮  -->
62 <input type="reset" name="" value="重置">
63 </p>
伪代码说明

select标签

 1  <select> 下拉选标签属性
 2 
 3 
 4           name:表单提交项的键.
 5 
 6           size:选项个数
 7 
 8           multiple:multiple 
 9                  <optgroup>为每一项加上分组
10 
11                  <option> 下拉选中的每一项 属性:
12 
13                        value:表单提交项的值.   
14                        selected: selected下拉选默认被选中

<label>标签

定义:<label> 标签为 input 元素定义标注(标记)。
说明:
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

1 <form method="post" action="">
2 
3         <label for=“username”>用户名</label>
4         <input type=“text” name=“username” id=“username” size=“20” />
5 </form>

<fieldset>标签

1 <fieldset>
2     <legend>登录吧</legend>
3     <input type="text">
4 </fieldset>
原文地址:https://www.cnblogs.com/alwaysInMe/p/7265024.html