HTML简要内容
1. html基础
html是用来制作网页的标记语言,不需编译,直接由浏览器执行。大小写不敏感,推荐使用小写。html文件必须使用html或htm为文件名后缀。
html主体结构:
(1)DTD头:用于告诉浏览器用什么标准解析当前页面
(2)head部分:告诉浏览器一些相应信息
(3)body部分:给人看的数据
2. html语言的语法
2.1 html标签
标签是html中最基本单位,也是最重要的组成部分,用角括号< >括起来。
标签都是闭合的,有两种形式:<标签名>内容<标签名> ;<标签名 />
有三部分组成:标签名,要显示的数据,显示数据的属性
<标签名 属性名1=“属性值” …属性名n=“属性值”></ 标签名>
2.2 html注释
<!--被注释的内容-->
2.3 html代码格式
回车和空格在源代码中不起作用,所以在编写html代码时可以使用回车或空格进行排版,可使代码清晰,也便于团队合作。必须保持严格的缩进规则,以“Tab”键为准。
把代码写得漂亮比把代码写得正确更重要。
3. head部分
表示html文档的头信息,以<head>开始,以</head>结束。
包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在html文档中的。
常用标签:
title标签--代表html文档的标题
base标签--将相对URL转换为完整的绝对URL
meta标签--用于定义文件信息的名称、内容等信息
link标签--当在文档中声明使用外接资源(如CSS)时使用此标签
style标签--在文档中声明样式时使用此标签
script标签--在文档中使用JavaScript脚本
4.body标签中的常用属性(注意默认值)
text-------设置页面文字的颜色
bgcolor---------设置页面的背景颜色
background-------设置页面背景图片
bgroperties-------设定页面背景图像为固定,不随页面滚动而滚动
link--------设定页面默认的链接颜色
alink-----------设定鼠标正在点击时的颜色
vlink-----------设定访问后链接文字的颜色
topmargin-----------设定页面的上边距
leftmargin-------------设定页面的左边距
5. 文字版面的编辑
5.1 格式标签
<br> 换行标签
<p> 段落标签,里边可加入文字、列表、表格等
<center> 居中对齐标签
<pre> 按原文显示标签,可把原文件中的空格,回车,换行,tab键表现出来
<li> 代表html列表项目,每个列表项使用一对<li></li>
<ul> html无序列表
<ol> html有序列表
<hr> 水平分割线标签,用于段落与段落间的分割
5.2 文本标签
<hn> 标题字标签,n为1-6,定义六级标题,而且会自动换行插入一个空行
<b> 粗体字标签
<i> 斜体字标签
<u> 下划线字体标签
<sub> 文字上标字体标签
<sup> 文字下表字体标签
<font> 字体标签,可通过标签的属性指定文字的大小、颜色及字体等属性
<tt> 打字机文字
<cite> 用于引证、举例,通常为斜体字
<em> 表示强调,通常为斜体字
<strong> 表示强调,通常为粗体字
<small> 小型字体标签
<big> 大型字体标签
6. 插入图像
img标签,单独出现,<img />
常用属性:
alt-------代表图像的替代文字
src------图像源(即图像的位置)
border-------图片边框的宽度
height--------图像的高度
width---------图像的宽度
设计网页时常用的图片格式:gif,jpeg,png
7. 建立锚点和超链接
7.1 a标签-------代表html链接,成对出现<a>…</a>
常用属性:
href---------代表一个url链接源
url可以是网页,其他的文件,指向HTML文件中的一个位置,email地址
target---------用来指出链接打开方式
target=_blank:将链接内容在新的窗口中打开
target=_parent:将链接的内容当成文件的上一个画面
target=_self:将链接的内容显示在当前窗口
target=_top:使整个画面重新显示成链接的画面内容
链接语法:
<a href=“url” target=“_blank”>显示的文字</a>
7.2 定位网页内部的链接(锚点链接)
用<a name=””>定义,如:<a name=”here1”>第一部分</a>,使用<a href=”#here1”>跳转到第一部分</a>,超链接就可以定位到网页中的“第一部分”这个位置。
7.3 超链接
三种链接路径:
绝对路径:http://www.sohu.com/index.html
文档相对路径:adver/contents.html
站点根目录相对路径:/support/app/customer.html
8. html表格
8.1 常见标签
<table> 代表html表格,成对出现
属性:width------表格宽度
height------表格高度
border------表格边框
cellspacing-----表格边框与表格内容填充的距离,也是内容填充之间的距离
cellpadding------内容填充的宽度
<caption> 定义表格标题的位置,可由align和valign属性来设置
<tr> 表中的一行
<th> 表中的一列
tr、th属性:
width与height------代表宽度和高度
colspan---------一行跨越多列
Rowspan--------一列跨越多行
align-------------水平对齐方式(left,center,right)
valign----------竖直对齐方式(top,middle,bottom)
<td> 表中的一个单元格,用于存放具体数据内容
align,valign具体解释详见上面
9. html框架结构
9.1 简述
一个浏览器窗体可通过几个页面的组合来显示。可使用框架(frames)来完成。可分为数行和数列。
优点:重载页面时不需重载整个页面;方便制作导航栏。
缺点:会产生很多页面,不易管理;不易打印;浏览器的后退按钮无效;代码复杂,无法被一些搜索引擎索引到;多数小型的移动设备(PDA手机)无法完全显示框架;多框架的页面会增加服务器的http请求
由于这许多缺点,不符合标准网页设计的理念,已被标准网页设计抛弃
9.2 html框架标签
<frameset>标签--代替body标签定义了框架页,并定义了框架将分为多少行多少列
常用属性:
cols---框架含有多少列与列的大小
rows----框架还有多少行与行的大小
border----框架页是否有边框
framespacing----框架之间间隔的距离
<noframes>标签--可为那些不支持框架的浏览器显示文本,与<body>组合使用
<iframe>标签----创建一个包含另外一个文档的内敛框架,iframe标签内的内容可以作为浏览器不支持iframe标签是显示
frame标签---定义frameset标签中每个框架页的内容
单独出现,<frame />
常用属性:
frameborder----定义了内容页的边框,取值为(1|0),缺省值为1
1--在每个页面之间显示边框 0----不显示边框
name-----在一个框架页链接到另一框架页是使用(另一个框架页可使用target定义链接页)
Noresize----定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)
scrolling----定义了是否有滚动条,取值为(yes|no|auto),缺省值为auto
yes---显示滚动条 no----不显示滚动条 auto----需要时再显示滚动条
src----定义了内容条URL
border---设置边框粗细
10. html表单设置
10.1 form标签
网页怎样与用户进行交互?答案是:使用html表单(form)
form标签-----代表html表单
常用属性:
action---浏览者输入的数据被传送到的地方,如一个jsp页面
method----数据传送的方法,常用post
10.2 input标签-----html表单的单行输入域
单独出现,<input />
属性:
type----代表一个输入域的显示方式(分为输入型,选择型,点击型)
取值:
text---文字输入域(输入型)
password----文字输入域,但输入的文字以密码符号*显示(输入型)
file----可以输入一个文件路径(输入型)
checkbox----复选框,可以选择零个或多个(选择型)
radio----单选框,只选且必选一个(选择型)
hidden---代表隐藏域,可传送一些隐藏的信息到服务器
button----按钮(点击型)(有提交功能,会把所有表单一起提交)
image----使用图片来显示按钮,使用src属性指定图像的位置(点击型)
submit---提交按钮,可使用value属性来显示按钮上的文字(点击型)
reset----重置按钮,可以把表单中的信息清空(点击型)
name-----此表单项名称
value----输入域的值
size----输入域的长度
maxlength-----输入域最多可以输入文字的长度(个数)
checked-----如果是选择型的输入域,代表已经被选择,值为checked
readonly-----输入域可以选择,但无法修改,值为readonly
disabled-----输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
accesskey-----表单的快捷键访问方式如值为h即按Alt+h
tabindex-----输入域的“tab”键遍历顺序
src----当使用图片来表示按钮时,代表图片的位置(URI)
alt----用来替换提交按钮的图片提示信息
10.3 textarea标签-----代表表单多行输入域
成对出现,<textarea></textarea>
属性:
cols----多行输入域的列数
rows----多行输入域的行数
name----此表单项名称
accesskey-----表单的快捷键访问方式
disabled-----无法获得焦点,无法选择
readonly----输入域可选择,但无法修改
tabindex-----输入域,使用“tab”键的遍历顺序
10.4 select标签
Select标签----选择列表标签
成对出现<select></select>
此标签中的每对option标签代表一个选择项
属性:
name---表单项名称
size---选择域的高度
multiple---可以有多个选择
disabled---以灰色显示,在表单中不起任何作用
tabindex--使用“tab”键的遍历顺序
option标签---代表选择列表的一个选择项
成对出现<option></option>
属性:
label----说明选择项
value----说明选择项的值
selected---此选择项已经被选择
disabled----输入框无法获得焦点,以灰色显示,在表单中表示禁用
tabindex----使用“tab”键的遍历顺序
HTML简要内容的更多相关文章
- CSS简要内容
1. 简介 用于布局与美化网页(颜色,字体) CSS语言是一种标记语言,不需编译,可直接由浏览器执行 大小写不敏感 CSS定义由选择符.属性.属性取值组成 格式:selector{property:v ...
- 关于HTTPS的简要内容
HTTPS是什么? 超文本传输安全协议(英语:Hypertext Transfer Protocol Secure,缩写:HTTPS,常称为HTTP over TLS,HTTP over SSL或HT ...
- 用CIL写程序:你好,沃尔德
前言: 项目紧赶慢赶总算在年前有了一些成绩,所以沉寂了几周之后,小匹夫也终于有时间写点东西了.以前匹夫写过一篇文章,对CIL做了一个简单地介绍,不过不知道各位看官看的是否过瘾,至少小匹夫觉得很不过瘾. ...
- 2016-2017-2 《Java程序设计》教学进程
2016-2017-2 <Java程序设计>教学进程 目录 考核方式 课前准备 教学进程 第00周学习任务和要求 第01周学习任务和要求 第02周学习任务和要求 第03周学习任务和要求 第 ...
- [OC] 理解Bitcode:一种中间代码
Tip:参考资料 理解Bitcode:一种中间代码 (内容从该博客摘录的.本随笔摘录些简要内容.) App Distribution Guide – App Thinning (iOS, watchO ...
- 正确设置网站title、keywords、description(转载)
本文转载自蚂蚁HR(www.mayihr.com) 优化技巧是老师在课堂上教不了你的,而自己也不可能在练习中领悟,最便捷的方法就是听取别人的经验,所以转载一下 1.title(网站标题) title, ...
- Java面试题精选(二)线程编程、数据库理论和Jdbc部分
—— 线程编程.数据库理论和Jdbc部分内容 —— 数据库的开发应用想必是我们日常所碰到最多的知识点了,大致可分为:oracle.MySQL.SQL Server.Hadoop. NoSQL. ...
- SEO配置信息操作文档
一.title(网站标题) title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要.)title ...
- SQL Server 扩展事件(Extented Events)从入门到进阶(3)——通过界面操作Extented Event
本文属于 SQL Server扩展事件(Extended Events)从入门到进阶 系列 对于接纳扩展事件,其中一个最大的障碍就是要对XML和XQuery有一定的了解以便分析数据.我们可以使用T-S ...
随机推荐
- Ruby自学笔记(一)— 基本概况
之前一直想要多看看RESTful Service相关的东西,找到一本相关的书,但是里面的代码都是用Ruby写的,虽然知道编程语言都是类似的,但是看到一些陌生的语法,还是有些摸不着头脑,所以最近终于下定 ...
- BZOJ 1823 满汉全席
Description 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而 ...
- ibatis动态语句加and 和不加and
<select id="queryGoodsGroupCodeName" parameterClass="String" resultClass=&quo ...
- 14.5.3 Locks Set by Different SQL Statements in InnoDB
14.5.3 Locks Set by Different SQL Statements in InnoDB 通过不同的SQL语句设置的锁 在InnoDB中 一个锁定读, 一个UPDATE 或者一个D ...
- Git skills in reseting files
How to uncommit files that were committed long time a ago?Note: Since all changes in the current wor ...
- bzoj2400
首先xor类的题目一定要逐位考虑,因为位位之间是不相互影响的逐位考虑每个点是0还是1,这就转化成了一个这样一个问题对于每个点可以选择属于S集合(这位是0)或T集合(这位是1)某些的点对(一条边的两端) ...
- hg 证书验证失败
hg clone https://bitbucket.org/pygame/pygame 出现abort: error: _ssl.c:504: error:14090086:SSL routines ...
- soap协议
定义: 简单对象访问协议是交换数据的一种协议规范,是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WEB上交换结构化的和固化的信息. 协议中的几个关键词术语: SO ...
- ActionFilterAttribute OnActionExecuting 获取参数
public class AuthFilterAttribute : ActionFilterAttribute { /// <summary> /// Action执行前处理 /// & ...
- [JAVA关键字] synchronized
synchronized, Example: public synchronized void XXX() {} 参考 http://wenku.baidu.com/link?url=ecb1Zivf ...