[首页]
[文章]
[教程]
首页
Web开发
Windows开发
编程语言
数据库技术
移动平台
系统服务
微信
设计
布布扣
其他
数据分析
首页
>
Web开发
> 详细
HTML总结
时间:
2020-04-22 01:07:28
阅读:
228
评论:
0
收藏:
0
[点我收藏+]
简介
定义
1.HTML指得是超文本标记语言
2.它不是编程语言,而是一种标记语言
3.标记语言是一套标记标签
4.HTML使用标记语言来描述网页
标签
1.HTML标签是由尖括号包围的关键词,比如<html>
2.HTML标签通常成对出现,比如<b>和</b>
3.标签对中的第一个是开始标签,第二个是结束标签
4.开始和结束标签也被称为开放标签和闭合标签
HTML文档=网页
HTML文档描述网页
HTML文档包含HTML标签和纯文本
HTML文档也被称为网页
HTML编辑器
Notepad 或 TextEdit来编写
或者专业的HTML编辑器,比如
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
sublime_text
html元素
HTML文档是由html元素定义的
html元素是指从开始标签到结束标签的所有代码
元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性
实例
<p>元素
<body>元素
<html>元素
空的html元素
HTML属性
属性为HTML元素提供附加信息
规定位置:总是在开始标签中进行定义
实例
1.链接<a>标签中,链接地址在href属性中指定:<a href="
http://www.w3school.com.cn
">This is a link</a>
2.标题<h1>设置对齐方式:<h1 align="center">
........
注意
1.属性和属性值对大小写不敏感
2.始终为属性值加引号
基础知识点
html计算机代码
html注释
注释格式
<!-- 与 -->
实例
<!-- 在此处写注释 -->
html css
插入样式方式
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。、
使用方式
在html文档中<head> 部分进行样式连接,即:
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表
使用方式
实例:
内联样式、
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
使用方式
实例:
html标题
标题(Heading)是通过 <h1> - <h6> 等标签进行定义的
<h1> 定义最大的标题。<h6> 定义最小的标题
实例
注意:确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题
定义水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
html段落
段落定义
段落是通过 <p> 标签定义的
换行
换行用<br /> 标签
空格
用 来设置空格
html样式
style属性用来改变html元素的样式
使用方式
通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义
实例
注意:避免使用废弃的标签好属性
如下:
html格式化
HTML 可定义很多供格式化输出的元素,比如粗体和斜体字
文本格式化标签
“计算机输出”标签
引用、引用和术语定义
html引用
1、HTML <q> 用于短的引用
HTML <q> 元素定义短的引用
实例
2、用于长引用的 HTML <blockquote>
HTML <blockquote> 元素定义被引用的节
实例
3、用于缩略词的 HTML <abbr>
HTML <abbr> 元素定义缩写或首字母缩略语
实例
4、用于定义的 HTML <dfn>
HTML <dfn> 元素定义项目或缩写的定义
用法
1)如果设置了 <dfn> 元素的 title 属性
实例
2)如果 <dfn> 元素包含具有标题的 <abbr> 元素
实例
3)<dfn> 文本内容即是项目,并且父元素包含定义
实例
5、用于著作标题的 HTML <cite>
HTML <address> 元素定义文档或文章的联系信息(作者/拥有者)
注:此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行
实例
6、用于双向重写的 HTML <bdo>
HTML <cite> 元素定义著作的标题
注:浏览器通常会以斜体显示 <cite> 元素
实例
即
html链接
使用<a>标签创建链接
使用方式
1)通过使用 href 属性 - 创建指向另一个文档的链接
2)通过使用 name 属性 - 创建文档内的书签
链接格式
<a href="url">Link text</a>
href属性规定链接的目标
HTML链接- target属性
使用 Target 属性,你可以定义被链接的文档在何处显示
实例
在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开你的站点了
链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分
跳出框架
本例演示如何跳出框架,假如你的页面被固定在框架之内
创建电子邮件链接
本例演示如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)
创建电子邮件链接 2
本例演示更加复杂的邮件链接
name属性
name 属性规定锚(anchor)的名称(<a>就是锚)
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了
实例
html图像
图像标签<img>
源属性(Src)
源属性的值是图像的 URL 地址
替换文本属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的
使用格式
例 <img src="boat.gif" alt="Big Boat">
html表格
表格由<table>标签进行定义
行用<tr>定义
列用<td>标签定义
表头用<th>标签定义
html列表
无序列表
无序列表始于<ul>标签
每个列表项始于<li>
有序列表
有序列表始于<ol>标签
每个列表项始于<li>标签
定义列表
自定义列表始于<dl>标签
每个列表项始于<dt>标签
每个自定义列表项的定义始于<dd>,终于</ dd>
html块
块级元素
<div>元素,<h1>,<p>,<table>等等
内联元素
<span>,<b>,<a>,<img>等等
html类
HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式,或者为不同的类设置不同的样式。
设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类
设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式(HTML <span> 元素是内联元素,可用作文本的容器)
html布局
html响应式布局
方式
1.自己创建
2.Boostrap
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机
html框架
概念:通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
类别
垂直框架
水平框架
框架结构标签<frameset>
框架结构标签定义如何将窗口分割为框架
每个frameset定义了一系列行或列
rows/columns的值规定了每行或者每列占据屏幕的面积
实例:
第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中,代码r如图:
缺点:
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
注意:
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。
例如:
html内联框架
iframe 用于在网页内显示网页
添加 iframe 的语法
<iframe src="URL"></iframe> (URL 指向隔离页面的位置。)
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框
使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性
实例:
html背景
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
html脚本
JavaScript 使 HTML 页面具有更强的动态和交互性
html路径
绝对路径
绝对文件路径是指向一个因特网文件的完整 URL
相对路径
相对路径指向了相对于当前页面的文件
html头部
<head>元素
<head> 元素是所有头部元素的容器
<title>元素
<title> 标签定义文档的标题
title 元素在所有 HTML/XHTML 文档中都是必需的
<base>元素
<base> 标签为页面上的所有链接规定默认地址或默认目标(target)
<link>元素
<link> 标签定义文档与外部资源之间的关系
<style>元素
<style> 标签用于为 HTML 文档定义样式信息
<meta>元素
<meta> 标签提供关于 HTML 文档的元数据
<script>元素
<script> 标签用于定义客户端脚本,比如 JavaScript
html实体
html URL
HTML 统一资源定位器
URL 也被称为网址
html URL 编码
html Web服务器
html 颜色
HTML 颜色名
html文档类型
HTML XHTML
HTML表单
HTML表单
HTML 表单用于搜集不同类型的用户输入。
<form> 元素
<form> 元素定义 HTML 表单
<input> 元素
单选按钮输入
<input type="radio"> 定义单选按钮。
提交按钮
<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮
Action 属性
action 属性定义在提交表单时执行的动作
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性
用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
HTML表单元素
<input> 元素
<select> 元素(下拉列表)
<option> 元素
<textarea> 元素
<button> 元素
HTML输入类型
输入类型:text
输入类型:password
输入类型:submit
Input Type: radio
<input type="radio"> 定义单选按钮。
Input Type: checkbox
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项
输入类型:number
输入类型:date
输入类型:color
输入类型:range
输入类型:month
输入类型:week
............
HTML输入属性
value 属性
readonly 属性
disabled 属性
size 属性
maxlength 属性
HTML媒体<后补>
HTML API<后补>
HTML总结
原文:https://www.cnblogs.com/kaoju/p/12749173.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
2021/09/28 scripts
2022-05-27
vue自定义全局指令v-emoji限制input输入表情和特殊字符
2022-05-27
9.26学习总结
2022-05-27
vim操作
2022-05-27
深入理解计算机基础 第三章
2022-05-27
C++ string 作为形参与引用传递(转)
2022-05-27
python 加解密
2022-05-27
JavaScript-对象数组里根据id获取name,对象可能有children属性
2022-05-27
SQL语句——保持现有内容在后面增加内容
2022-05-27
virsh命令文档
2022-05-27
教程昨日排行
更多>
1.
list.reverse()
2.
Django Admin 管理工具
3.
AppML 案例模型
4.
HTML 标签列表(功能排序)
5.
HTML 颜色名
6.
HTML 语言代码
7.
jQuery 事件
8.
jEasyUI 创建分割按钮
9.
jEasyUI 创建复杂布局
10.
jEasyUI 创建简单窗口
友情链接
汇智网
PHP教程
插件网
关于我们
-
联系我们
-
留言反馈
- 联系我们:wmxa8@hotmail.com
© 2014
bubuko.com
版权所有
打开技术之扣,分享程序人生!