整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

[编程基础] 常用html标签使用介绍


用html标签使用介绍

本文主要记录常用的html标签使用说明,用起来的时候偶尔查查。

常用html标签列表

标签

英文全拼

作用

特点

​<html></html>​

html

网页的根标签

所有的标签都要写在这一对根标签里面

​<head></head>​

head

网页的头标签

包括完档的属性和信息

​<body></body>​

body

网页的主题

包含文档的所有内容

​<div></div>​

division

定义一个区域

浏览器通常会在​​<div>​​前后放置一个换行符

​<!-- 注释 -->​

-

注释

单标签

​<br>或<br/>​

break

换行

单标签,不会在其前后创建空白行

​<hr>或<hr/>​

horizontal rule

添加水平线

单标签

​<img src="">​

image

添加图片

单标签

​<embed src="">​

embed

嵌入外部应用

单标签

​<meta>​

meta

提供有关页面的元信息

单标签,​​<meta>​​​标签通常位于​​<head>​​区域内

​<link>​

link

定义文档与外部资源的关系

单标签,​​<link>​​​标签只能存在于​​<head>​​区域内,不过它可出现任何次数。

​<p></p>​

paragraph

定义段落

自动在其前后创建空白行

​<h1> to <h6>​

Header 1 to Header 6

定义标题

h1在一个页面里只能出现一次

​<strong></strong>​

strong

文本加粗

加粗标记该文本

​<b></b>​

bold

文本加粗

加粗显示文本,不推荐使用

​<em></em>​

emphasize

文本倾斜

倾斜标记文本

​<i></i>​

italic

文本倾斜

倾斜显示文本,不推荐使用

​<del></del>​

delete

文本添加删除线

-

​<s></s>​

strike

文本添加删除线

不推荐使用

​<ins></ins>​

insert

文本添加下划线

-

​<u></u>​

underline

文本添加下划线

不推荐使用

​<a href="">填写内容</a>​

anchor

添加超链接

最好使用CSS来改变链接的样式

​<ul></ul>​

unordered list

定义无序列表

通常与​​<li>​​标签一起使用

​<ol></ol>​

ordered list

定义有序列表

通常与​​<li>​​标签一起使用

​<li></li>​

list item

创建列表项

可与各种列表定义标签一起使用

​<dl></dl>​

definition list

定义描述列表

通常与​​<dt>​​​和​​<dd>​​一起使用

​<dt></dt>​

definition term

定义条目

定义描述列表的项目

​<dd></dd>​

definition description

定义描述

对描述列表中的项目进行描述

​<table></table>​

table

定义HTML表格

尽可能通过样式改变表格外观

​<tr></tr>​

table row

定义表格的行

一个​​<tr>​​​标签包含一个或多个​​<th>​​​或​​<td>​​标签

​<th></th>​

table headline

定义表格每一列的标题

该标签的文本通常呈现为粗体且居中

​<td></td>​

table data

定义表格中的单元格数据

该标签的文本呈现为普通且左对齐

​<caption>表格标题</caption>​

caption

定义整个表格的标题

​<caption>​​​标签必须直接放在​​<table>​​标签后

​<input type="">​

input

定义输入控件

输入字段可通过多种方式改变,取决于type属性

​select​

select

定义下拉列表

​<select>​​​中的​​<option>​​标签定义了列表中的可用选项

​<option></option>​

option

定义下拉列表中的可用项

​<option>​​标签不可自由定义宽高

​<optgroup></optgroup>​

options group

定义选项组

​<optgroup>​​标签用于把相关的选项组合在一起

​<textarea></textarea>​

textarea

定义多行的文本输入控件

文本的默认字体是等宽字体

​<form></form>​

form

定义表单

​<form>​​可以包含多个元素

​<fieldset></fieldset>​

field set

定义围绕表单中元素的边框

​<legend>​​​为​​<fieldset>​​定义标题

​<legend></legend>​

legend

为​​<fieldset>​​定义标题

​<legend>​​通过css设定样式

​<progress></progress>​

progress

定义运行中的任务进度

​<progress>​​​是HTML5中的新标签,​​<progress>​​标签不适合用来表示度量衡

​<meter></meter>​

meter

度量衡

​<meter>​​​是HTML5的新标签,​​<meter>​​标签不适合用来表示进度条

​<audio></audio>​

audio

添加音频

​<audio>​​标签是HTML5的新标签

​<video></video>​

video

添加视频

​<video>​​标签是HTML5的新标签

​<source>​

source

定义媒介资源

​<source>​​标签是HTML5中的新标签

常用标签使用说明

  • 常用写法:​​<img src="" alt="" title=""width="" height=""​​>
  • src:图片的来源(必写属性)
  • alt:图像不显示时的替代文本
  • title:鼠标在移动到元素上的文本提示
  • width/height:图片宽高,没有定义宽高的时候,图片按照百分之百比例显示,更改图片的宽度或者高度,图片等比例缩放

普通用法

  • 常用写法:​​<a href="" title="" target="">填写内容</a>​
  • href:去往的路径(必写属性)
  • title:鼠标在移动到元素上的文本提示
  • target:规定在何处打开路径
  • _blank:新页面打开
  • _parent:在父窗口中打开链接
  • _self:当前页面跳转(默认值)
  • _top:在当前窗体打开链接,并替换当前的整个窗体
  • 当href的值为javascript:void(0); 或 javascript:; ,表示超链接不做任何事情,不做任何跳转
  • 当href的值为#,表示超链接为空链接,点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接,自动跳转到我们设置锚点的位置,类似于word的目录导航。建立锚点的元素必须要有id或name属性,最好两个都有。这里只跳转本页面元素,其他页面跳转自行搜索。
具体做法如下:

  1. 给目标元素设置id值,如​​<p id="id1"></p>​
  2. 设置锚点超链接,锚点的超链接路径一定包含"#",后面紧跟元素的id或者name,如​​<a href="#id1"></a>​

示例如下。为了显示效果,通过使用lorem自动生成随机文本(具体使用方法搜索,一般直接输入就行),lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

  • 常用写法: ​​<meta charset="UTF-8">​
  • charset:定义文档的字符编码
  • ASCII/ANSI/Unicode:英语
  • GBK:亚洲通用字符集
  • GB2312:中文简体
  • Big5:台澳港繁体
  • UTF-8:世界通用字符集

name

  1. 关键字
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的关键字,尽量将重要的关键词放在前面
  1. 网页描述
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的主要内容
  1. 作者
  • 常用写法: ​​<meta name="author" content="">​
  • 描述:告诉搜索引擎网页的作者
  1. 文件检索
  • 常用写法: ​​<meta name="robots" content="all | none | index | noindex | follow | nofollow">​
  • 描述:有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法:一个是robots.txt,另一个是The Robots META标签。
  • content: 文件检索方式
  • all:文件将被检索,且页面上的链接可以被查询 (默认值)
  • none:文件将不被检索,且页面上的链接不可以被查询
  • index:文件将被检索;
  • noindex:文件将不被检索,但页面上的链接可以被查询
  • follow:页面上的链接可以被查询
  • nofollow:文件将不被检索,页面上的链接可以被查询

网页自动跳转

  • 常用写法: ​​<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />​
  • 描述:网页5秒后自动跳转到谷歌主页
  • url:为空则刷新本页
  • 常用写法:
  • 描述:规定当前文档与被链接文档/资源之间的关系
  • rel:定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写(必写属性)
  • type:规定被链接文档的类型
  • href:链接的文件路径
  • 示例:
  • 链接外部样式表:​​<link rel="stylesheet" type="text/css" href="a.css">​
  • 设置网页icon图标:​​<link rel="icon" href="a.ico">​

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记,我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

  • 常用写法:​​<table width="" height="" border="" cellspacing="" cellpadding=""></table>​
  • width:表格宽度
  • height:表格高度
  • border:边框宽度
  • cellspacing:单元格间距
  • cellpadding:内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

  • 常用写法:​​<td colspan=“” rowspan=“”></td>​
  • 描述:告诉表格该单元格可以横跨colspan列,纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于​​<input>​​不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

  • 常用写法:​​<input type="text" name="" maxlength="" readonly="" disabled="" value="">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • maxlength:输入文本长度
  • readonly:输入框是否只读
  • disabled:输入框是否未激活
  • value:输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

  • 常用写法:​​<input type="password" name="">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • 密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

  • 常用写法:​​<input type="radio" name="" checked="checked">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • checked:设定该输入框被预先选定
  • 想要多个单选框只能有一个被选中,设置所有单选框的name值相同即可实现

示例一,两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二,两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

​<select>​

  • 常用写法:​​<select multiple=""></select>​
  • multiple:当该属性为true时,可选择多个选项。

​<optgroup>​

  • 常用写法:​​<optgroup label=""></optgroup>​
  • label:设定选项组的描述。

​<option>​

  • 常用写法:​​<option value="" selected="">选项值</option>​
  • value:定义送往服务器的选项值。
  • selected:当该属性为true时,该选项被默认选择。

示例一,单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二,带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三,带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

  • 常用写法:​​<input type="checkbox" checked="">​
  • type:规定输入字段的类型
  • checked:设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

  • 常用写法:​​<textarea cols="" rows="" placeholder=""></textarea>​
  • cols:控制可见文本的列数
  • rows:控制可见文本的行数
  • placeholder:提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

  • 常用写法:​​<input type="file" accept=""/>​
  • accept:规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证,必须包含@和后缀,如果不满足验证,会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一,普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二,带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

​<progress>​​​与​​<meter>​​主要区别和用法见​​HTML5 progress和meter控件​​

​<progress>​

  • 常用写法:​​<progress value="" max=""></progress>​
  • value:规定进程的当前值
  • max:规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

​<meter>​

  • 常用写法:​​<meter min="" low="" high="" max="" value="" optimum=""></meter>​
  • value:规定度量的当前值
  • max:规定被界定为高的值的范围
  • min:规定被界定为低的值的范围
  • low:规定被界定为低的值的范围
  • high:规定被界定为高的值的范围
  • optimum:规定度量的最优值
  • 具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

​<audio>​

  • 常用写法:​​<audio src="" controls autoplay loop></audio>​
  • src:规定音频文件的url
  • controls:如果出现该属性,显示音频播放器的控制面板(比如播放/暂停按钮)
  • autoplay:如果出现该属性,自动播放音频
  • loop:如果出现该属性,循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

​<video>​

  • 常用写法:​​<video src="" width="" height="" poster="" controls autoplay loop></video>​
  • src:规定视频文件的url
  • width:设置视频播放器的宽度(pixels)
  • height:设置视频播放器的高度(pixels)
  • poster:设置视频未播放时展示的画面
  • controls:如果出现该属性,显示音频播放器的控制面板(比如播放/暂停按钮)
  • autoplay:如果出现该属性,自动播放音频
  • loop:如果出现该属性,循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

​<source>​

  • 常用写法:​​<source src="" type="">​
  • src:规定媒体文件的url
  • type:规定媒体文件的类型
  • 因为不同浏览器支持的媒体格式不同,当添加媒体文件时,需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件,然后使用source 标签,让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

​​HTML特殊字符编码对照表​​

参考

  • ​​HTML基础​​
  • ​​HTML 参考手册​​
  • HTML中标签对应的英文
  • meter标签改变颜色规则
  • HTML5 progress和meter控件

TML基本语法

认识网页

网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

常见浏览器内核介绍

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。

浏览器内核(理解)

浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。

(1)Trident(IE内核)

国内很多的双核浏览器的其中一核便是 Trident,美其名曰 "兼容模式"。

代表: IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。

(2)Gecko(firefox)

Gecko(Firefox 内核): Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。 可惜这几年已经没落了, 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

(3) webkit(Safari)

Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。

现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。

代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,

(4) Chromium/Blink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

​ 大部分国产浏览器最新版都采用Blink内核。二次开发

(5) Presto(Opera)

Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。

iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的

Web标准(重点)

通过以上浏览器的内核不同,我们知道他们工作原理、解析肯定不同,显示就会有差别。

Web 标准的好处

1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度

Web 标准构成

Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

结构标准:结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 最重要
表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
行为标准:行为是指网页模型的定义及交互的编写,咱们主要学的是

理想状态我们的源码: .HTML .css .js

HTML 初识

一般先学习HTML+CSS, 这里我们先定一个小目标,先学HTML,后学习CSS。

HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”。是用来描述网页的一种语言。

所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。

<h1> 我是一个大标题 </h1>

注意: 体会 文本 标签 语言 几个词语

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

总结: HTML 作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来。

用文字来描述网页标签

HTML骨架格式

日常生活的书信,我们要遵循共同的约定。

同理:HTML 有自己的语言语法骨架格式:

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>
1 HTML标签:

作用所有HTML中标签的一个根节点。 最大的标签   根标签

2 head标签: 文档的头部

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

3.title标签: 文档的标题

作用:让页面拥有一个属于自己的标题。

4.body标签:文档的主体  以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

HTML标签分类

在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令,也称为HTML标签或 HTML元素

1.双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“” 表示该标签的作用结束,一般称为“结束标签(end tag)”。和开始标签相比,结束标签只是在前面加了一个关闭符“/”。

比如 <body>我是文字  </body>

2.单标签

<标签名 />

单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

比如  <br />

HTML标签关系

标签的相互关系就分为两种:

1.嵌套关系

<head>  <title> </title>  </head>

2.并列关系

<head></head>
<body></body>

倡议: 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。

文档类型<!DOCTYPE>

<!DOCTYPE html> 

同学你用啥手机?你咋回答?

这句话就是告诉我们使用哪个html版本? 我们使用的是 html 5 的版本。 html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。

<!DOCTYPE> 标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。

注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的,但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5的文档类型就好了。

字符集

utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点,以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

白话: 所谓标签语义化,就是指标签的含义,使用做合适的标签做做合适的事,比如标题用 h 标签而不是 div 标签。

为什么要有语义化标签

  1. 方便代码的阅读和维护
  2. 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容
  3. 使用语义化标签会具有更好地搜索引擎优化

核心:合适的地方给一个最为合理的标签。

语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。

白话,一眼看去,就知道那个是重点,结构是什么,知道每块的内容是干啥的。

遵循的原则:先确定语义的HTML ,再选合适的CSS。

HTML常用标签

首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。

HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。

排版标签

排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。

标题标签 (熟记)

单词缩写: head 头部. 标题 title 文档标题

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义:  作为标题使用,并且依据重要性递减

其基本语法格式如下:

<hn>   标题文本   </hn>

注意: h1 标签因为重要,尽量少用,不要动不动就向你扔了一个h1。 一般h1 都是给logo使用,或者页面中最重要标题信息。

段落标签( 熟记)

单词缩写: paragraph 段落

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(认识)

单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,


就是创建横跨网页水平线的标签。其基本语法格式如下:


<hr />是单标签

在网页中显示默认样式的水平线。

换行标签(熟记)

单词缩写: break 打断 ,换行

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签(重点)

div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。

span, 跨度,跨距;范围

语法格式:

<div> 这是头部 </div>    <span>今日价格</span>

文本格式化标签(熟记)

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

标签属性

属性就是特性 比如 手机的颜色 手机的尺寸 ,总结就是手机的。。

手机的颜色是黑色 手机的尺寸是 8寸

水平线的长度是 200

图片的宽度 是 300 键 值对

使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中,

1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。

2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值,省略该属性则取默认值。

采取 键值对 的格式 key="value" 的格式

比如:

<hr width="400" />

属性 是 宽度

值 是 400

提倡: 尽量不使用 样式属性。

图像标签img (重点)

单词缩写: image 图像

HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下:

该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。

<img src="图像URL" />

链接标签(重点)

单词缩写: anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可,其基本语法格式如下:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。

注意:

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

锚点定位 (难点)

通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:

1.使用“a href=”#id名>“链接文本"</a>创建链接文本(被点击的)
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3> 

base 标签 基本的

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

把所有的连接 都默认添加 target="_blank"

特殊字符标签 (理解)

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。其基本语法格式如下:

    <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + / 

注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

路径(重点、难点)

实际工作中,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为: 相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

  1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif" />。
  2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="img/img01/logo.gif" />。
  3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如<img src="../logo.gif" />。绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的

“D:\web\img\logo.gif”,或完整的网络地址,例如
“http://www.itcast.cn/images/logo.gif”

列表标签

无序列表 ul (重点)

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。

 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
 3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

有序列表 ol (了解)

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

自定义列表(理解)

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表格 table(会使用)

创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签,分别为 <table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。

注意:

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签,他就像一个容器,可以容纳所有的元素

表格属性


三参为0
即:border cellpadding cellspacing 为 0

表头标签

表头单元格一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格结构

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:

<thead></thead>:用于定义表格的头部。

必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。

<tbody></tbody>:用于定义表格的主体。

位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。

表格标题

表格的标题: caption

定义和用法

caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。

只存在 表格里面

您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格

跨行合并:rowspan 跨列合并:colspan

合并单元格的思想:

​ 将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

​ 公式: 删除的个数 = 合并的个数 - 1

合并的顺序 先上 后下 先左 后右

  1. 先确定是跨行还是跨列合并
  2. 根据 先上 后下 先左 后右的原则找到目标单元格
  3. 删除单元格 删除的个数 = 合并的个数 - 1

总结表格

  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素,列的个数取决于行的单元格个数。
  4. 表格不要纠结于外观,那是CSS 的作用。

表单标签(掌握)

表单目的是为了收集用户信息。

在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件:

​ 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息:

​ 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域:

​ 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

input 控件(重点)

input 输入的意思

在上面的语法中,<input />标签为单标签,type属性为其最基本的属性 类型 ,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />标签还可以定义很多其他的属性,其常用属性如下表所示。

type 说明了属于那种表单

radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

label标签(理解)

label 标签为 input 元素定义标注(标签)。

table

作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢?

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

text 文本框 只能写一行文本呢

textarea 文本域

如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下 select 选择

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意:

  1. <select></select>中至少应包含一对<option></option>。
  2. 在option 中定义selected =" selected "时,当前项即为默认选中项。

表单域

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性:

  1. Action
    在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
  2. method
    用于设置表单数据的提交方式,其取值为get或post。
  3. name
    用于指定表单的名称,以区分同一个页面中的多个表单。

TML基本结构
基本文件格式:一般写的代码需要存储在文件中,比如html代码存储在.html文件中
什么是HTML标签:HTML标签也称为HTML标记,由开始标签和结束标签组成,用于表现结构化的内容,将内容构造成为一个完整的网页。

HTML标签组成
双标签:是指由开始标签和结束标签组成
单标签:是指没有结束标签的标签,由一个标签构成即为开始也是结束
理解:开始标签是被括号包围的元素名,结束标签是被括号包围的斜杠和元素名,如<h1></h1><b></b> 注意:有些HTML元素没有结束标签,比如<br/>

HTML详细说明
html:告诉页面这是一个HTML文档,并声明这个网页是面向那种语言的用户lang=”zh-CN” <!DOCTYPE html>
文档声明:位于文档的首航,告知浏览器文档使用哪种HTML或XHTML规范。让浏览器通过正确的方式解析我们的网页,使网页能正常显示。<!DOCTYPE html>
head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息 <head>
body:就是一个身体,一般来说 body里面的内容要显示出来<body>


<html>页面基础元素
简介:HTML标签也称为HTML标记,由开始标签和结束标签组成,用于表现结构化的内容,将内容构造成为一个完整的网页
规范:1.HTML标签是由尖括号包围的关键词,比如<html>
2.HTML标签通常是成对出现的,比如<b>和</b>
3.HTML不区别大小写(建议使用小写)
4.HTML可以嵌套,但是不允许交叉嵌套。正确<b><i>内容<i></b> 错误 <b><i>内容</b> <i>

<head>元素
简介:是所有头部元素的容器。
能包含哪些:<title><base><link><mate><script><style>
连接样式表:<link>元素
规定呈现样式:<style>元素
指定字符集:<mate>元素,关键词 name,content
本质:优化页面,利于搜索,设置字符集,防止乱码,引外部样式方便,规定呈现样式。

<title>元素
简介:标签定义文档的标题。
用途:定义浏览器工具栏中的标题,提供页面被添加到收藏夹时显示的标题,显示在搜索引擎结果中的页面标题。

name 元信息元素名称属性
简介:name属性用来指定文档中附加信息的名称,通常用keywords来定义关键字
用法:<mate name=”信息名称”/>
理解:在<mate>元素中,名称必须对应有相关的值才能生效

content 元信息元素的值
简介:用来指定文档中附加信息的值
搭配:content属性是与name属性成对出现
用法:<mate name=”信息名称” content=”附加信息的值” />