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. JS:window.onload的使用介绍

    作者: 字体:[增加 减小] 类型:转载 时间:2013-11-13我要评论 window.onload在某些情况下还是比较实用的,比如加载时执行哪些脚本等等,下面有几个不错的示例,需要的朋友可以参考 ...

  2. keil MDK启动文件分析---基于LPC2100系列(其实都是相通的)

    转用MDK有一段时间了,越来越觉得MDK的强大,因为我之前都是用ADS1.2开发产品,所以更能体会到MDK的强大与易用性.MDK编译出来的代码与ADS1.2相比,代码量减少了很多,我的一个工程用ADS ...

  3. C51 I2C接口驱动，IO口模拟I2C(主+从)

    Master.asm ;/*------------------------------------------------------------------*/ ;/* --- STC MCU I ...

  4. 如何开发Android Wear应用程序

    Android Wear是连接安卓手机和可穿戴产品的一个平台.自从今年上半年发布以来,Android Wear获得了大量关注,既有来自消费者的关注,也有来自开发商的关注,后者希望自己的应用程序已经准备 ...

  5. For循环复杂练习

    for是循环当中经常用到的一个结构,练熟了才可以. 练习-需求描述: 在控制台打印以下形式的字符: * * * * * * * * * * * * * * * 思路,首先分析需求的规律 1.首先分析需 ...

  6. [Poetize I]黑魔法师之门

    描述 Description applepi被囚禁的地点只有一扇门,当地 人称它为“黑魔法师之门”.这扇门上画着一张无向无权图,而打开这扇门的密码就是图中[每个点的度数大于零且都是偶数]的子图的个数对 ...

  7. 图论（网络流）：[SCOI2015]小凸玩矩阵

    Description 小凸和小方是好朋友,小方给小凸一个N*M(N<=M)的矩阵A,要求小秃从其中选出N个数,其中任意两个数字不能在同一行或同一列,现小凸想知道选出来的N个数中第K大的数字的最 ...

  8. Shader Forge 植物摆动

    前日才赞Shader Forge好用,今天就找到了BUG(1.03 版本) -- 获得顶点在物体空间坐标的方法绕来绕去,transform不支持齐次坐标, 不超过3行的shader代码要我出这么一个宏 ...

  9. 数学概念——I - 数论，线性方程

    I - 数论,线性方程 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit  ...

  10. 关于STM32 定时器 PWM 实时调节占空比时，预装载特性

    最近在调试项目的时候遇到一个奇怪的现象:在调试状态下,给定时器捕获比较寄存器赋不同值,能产生不同占空比的波形(图1).反映到器件上也有不同的电压显示,但是在设备运行的时候,就不行了(图2). 图1 图 ...