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简要内容的更多相关文章

  1. CSS简要内容

    1. 简介 用于布局与美化网页(颜色,字体) CSS语言是一种标记语言,不需编译,可直接由浏览器执行 大小写不敏感 CSS定义由选择符.属性.属性取值组成 格式:selector{property:v ...

  2. 关于HTTPS的简要内容

    HTTPS是什么? 超文本传输安全协议(英语:Hypertext Transfer Protocol Secure,缩写:HTTPS,常称为HTTP over TLS,HTTP over SSL或HT ...

  3. 用CIL写程序:你好,沃尔德

    前言: 项目紧赶慢赶总算在年前有了一些成绩,所以沉寂了几周之后,小匹夫也终于有时间写点东西了.以前匹夫写过一篇文章,对CIL做了一个简单地介绍,不过不知道各位看官看的是否过瘾,至少小匹夫觉得很不过瘾. ...

  4. 2016-2017-2 《Java程序设计》教学进程

    2016-2017-2 <Java程序设计>教学进程 目录 考核方式 课前准备 教学进程 第00周学习任务和要求 第01周学习任务和要求 第02周学习任务和要求 第03周学习任务和要求 第 ...

  5. [OC] 理解Bitcode:一种中间代码

    Tip:参考资料 理解Bitcode:一种中间代码 (内容从该博客摘录的.本随笔摘录些简要内容.) App Distribution Guide – App Thinning (iOS, watchO ...

  6. 正确设置网站title、keywords、description(转载)

    本文转载自蚂蚁HR(www.mayihr.com) 优化技巧是老师在课堂上教不了你的,而自己也不可能在练习中领悟,最便捷的方法就是听取别人的经验,所以转载一下 1.title(网站标题) title, ...

  7. Java面试题精选(二)线程编程、数据库理论和Jdbc部分

    —— 线程编程.数据库理论和Jdbc部分内容 ——     数据库的开发应用想必是我们日常所碰到最多的知识点了,大致可分为:oracle.MySQL.SQL Server.Hadoop. NoSQL. ...

  8. SEO配置信息操作文档

    一.title(网站标题) title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要.)title ...

  9. SQL Server 扩展事件(Extented Events)从入门到进阶(3)——通过界面操作Extented Event

    本文属于 SQL Server扩展事件(Extended Events)从入门到进阶 系列 对于接纳扩展事件,其中一个最大的障碍就是要对XML和XQuery有一定的了解以便分析数据.我们可以使用T-S ...

随机推荐

  1. Ruby自学笔记(一)— 基本概况

    之前一直想要多看看RESTful Service相关的东西,找到一本相关的书,但是里面的代码都是用Ruby写的,虽然知道编程语言都是类似的,但是看到一些陌生的语法,还是有些摸不着头脑,所以最近终于下定 ...

  2. BZOJ 1823 满汉全席

    Description 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而 ...

  3. ibatis动态语句加and 和不加and

    <select id="queryGoodsGroupCodeName" parameterClass="String" resultClass=&quo ...

  4. 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 ...

  5. Git skills in reseting files

    How to uncommit files that were committed long time a ago?Note: Since all changes in the current wor ...

  6. bzoj2400

    首先xor类的题目一定要逐位考虑,因为位位之间是不相互影响的逐位考虑每个点是0还是1,这就转化成了一个这样一个问题对于每个点可以选择属于S集合(这位是0)或T集合(这位是1)某些的点对(一条边的两端) ...

  7. hg 证书验证失败

    hg clone https://bitbucket.org/pygame/pygame 出现abort: error: _ssl.c:504: error:14090086:SSL routines ...

  8. soap协议

    定义: 简单对象访问协议是交换数据的一种协议规范,是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WEB上交换结构化的和固化的信息. 协议中的几个关键词术语: SO ...

  9. ActionFilterAttribute OnActionExecuting 获取参数

    public class AuthFilterAttribute : ActionFilterAttribute { /// <summary> /// Action执行前处理 /// & ...

  10. [JAVA关键字] synchronized

    synchronized, Example: public synchronized void XXX() {} 参考 http://wenku.baidu.com/link?url=ecb1Zivf ...