猫猫哥

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
HTML基础

1 简介

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

<meta>标记

  • http-equiv属性

模拟http协议文件头信息，当信息从服务端传到客户端时，告诉浏览器如何正确地显示

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<meta http-equiv="refresh" content="2">
<meta http-equiv="refresh" content="2;url=http://www.ifeng.com"> <--!两秒后跳到凤凰网-->
  • name

设置搜索关键字keywords，描述信息description，版权，作者author等

XHTML

标记一样，语法更严格，可扩展的超文本标记语言

  • 所有的标记和属性必须小写
  • 单边标记必须关闭
  • 所有的属性值必须加引号
  • 所有的属性都必须有值
  • 必须要有DTD文档类型定义

常见DOCTYPE声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML网页结构

2 基础

  • 标题：<h1>-<h6>
  • 段落：<p>
  • 链接：<a href="http://www.runoob.com">这是一个链接</a>
  • 图像：<img src="/images/logo.png" width="258" height="39" alt="下载"/>
  • 加粗：<b>
  • 斜体：<em> <i>
  • 下划线: <u>
  • 删除线：<s> <del>

图片路径的几种不同方式

href和src

href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上使用。

src 的内容，是页面必不可少的一部分，用于替换当前元素，是引入。href 的内容，是引用资源与当前页面建立关联，是引用。

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。

<script src="script.js"></script>

当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

链接打开方式

target:_blank, _self, _parent, _top

元素

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br/>

大多数 HTML 元素可拥有属性

属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名（classname），一个或多个，类名从样式文件引入
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制，移动，或链接，或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style 规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translateNew 指定是否一个元素的值在页面载入时是否需要翻译

标题

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

1级标题到6级标题，对应6号字体到1号字体，块级标签

  • 水平线：<hr> （块级）
  • 注释：<!--..-->
  • 换行：<br/>

锚点

定义锚点：

<a name="锚点名称"></a>

跳转到锚点

<a href="文件名#锚点名称">xxx</a>

3 表格<table>和列表

属性：

width
height
align
border	外边框粗细
bordercolor	边框颜色
bgcolor	背景颜色
background	背景图片url
cellpadding	单元格边线到内容之间的距离
cellspacing	单元格与单元格之间的距离

行<tr>

bgcolor
height
align
valign

列<td>或<th>

<td>是普通单元格，<th>是标题单元格，居中加粗
width
height
bgcolor
background
align
valign
rowspan	上下单元格合并，写在第一个单元格中，数值为合并的个数，注意合并之后，后面的行中要减去一个
colspan	左右单元格合并，写在第一个单元格中，数值为合并的个数，注意合并之后，后面的列中要减去一个

thead, tbody, tfoot

列表

<ol>,属性type(设置样式a,A,I,i,1)，属性reversed(降序) <ul>, <li>

<dl>自定义列表 <dt>标题 <dd>内容

4 表单

<form>

method=“get” <!--提交方式，get小量数据，拼接在url后面，表单数据以?分隔，不同键值对以&分隔-->
action="#"	<!--提交地址-->

文本

<input>	单行文本
type	默认text，password
name
value	 显示的内容
placeholder		没输入之前显式的内容
maxlenght		最大能输入的字符数
size			文本框宽度
readonly
disabled

<textarea rows="20" cols="40">	多行文本

按钮元素

<input type="button" value=>	//没有跟
<button onclick=>	//跟js合作，绑定事件
<input type="submit" value="登录">	//提交表单，使用范围比input button小

range元素

min, max, step, value

number元素

min, max, step, value

checkbox元素 多选

radio生成一组固定选项checked

select下拉框，不能自定义

datalist 可自定义输入

<input type="text" list="datalist1">
<datalist id="datalist1" >
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</datalist>

email, tel, url验证有规定格式的字符串

data时间设置窗口

color颜色设置窗口

hidden不显示仍会提交

image图片按钮

type="image" src="a.png" width="80px"

file上传文件

multiple一次允许传多个，required必须上传一个

5 图片

alt 当图片找不到的时候，显示的内容

超链接嵌入图片

<a herf=""><img src=""></a>

创建客户端分区响应图

通过点击图片的不同区域，让浏览器到不同的url上

map元素 客户端分区响应的关键元素

area元素 每个各自表示图片一块ee可点击的区域

​ 第一类，点击导航到指定url，hrel，alt

​ 第二类，shape属性和coords属性共同起作用

Shape Coords
Rect 左上右下4个整数
Circle 3个整数
Poly 至少6个整数
default 整张图片 
<img src="time.jpg", usemap="#map1">
<form>
<input type="image" src="time.jpg">   
</form>
<map name="map1">
    <area href="time.html" shape="rect" coords="38, 62, 175, 200", target="_blank">
    <area href="weather.html" shape="rect" coords="227, 62,364, 200", target="_blank">
    <area>
    <area>
    <area>
    <area>   
</map>

6 视频

src, height, width, auotplay, preload(none, metadata第一帧, auto默认下载整个视频), controls控制键, loop循环播放, poster视频载入时显示图片(封面), muted视频静音

<vedio src="a.mp4" height="500px" controls preload="metadata">
<source src="a.mp4" type="vedio/mp4">
    <source src="a.ogv" type="vedio/ogg">
</vedio>

7 内嵌标签

<iframe src="http://www.taobao.com" width="100%" height="400px">
</iframe>
<a href="http://www.jd.com" target="_if">京东年货节</a>	<!--在内嵌页面显示-->
<iframe src="" name="_if">
</iframe>

8 框架标签

<frameset rows="10%, *, 10%">   <!--每个frame分别一个html-->
    <frame src=""/>
    <frameset cols="10%, *">
        <frame />
        <frame />
    </frameset>
    <frame />
</frameset>

上下左右4 个页面，登录页面登录之后进入主页面

左边菜单，右边显示

上面退出之后，回到上级登录页面

posted on 2019-02-01 14:34  猫猫哥  阅读(174)  评论(0)  编辑  收藏  举报