HTML5学习笔记

时间：2024.4.5

做一个服务器发布网站的构件常见组合：

1）Linux + Apache（开放）+ MySQL（开放）PHP =LAMP

（当今做网站最好的组合、很多公司选择）

1.自由软件、无需费用、容易获得开源文件

2.开发速度快（PHP是J2EE的3.5倍）

2）Unix + Tomcat + Oracle + JSP =J2EE

1.最贵（银行、电信），操作系统贵

2.大型公司开发

3）Windows + IIS + SQL Sever + ASP =ASP.net

1.盗版（便宜），做服务器要用正版

2.定期杀毒

3.易学习，帮助文档多

css html java script三者之间的关系

css html java script

此三者都可独立编写、嵌入在HTML中

代码格式：

1.任何回车或空格在源代码中都不起作用、应用代码排版

2.缩进的格式编写（可读性强）

3.字符实体

(< < < > > > & )

4.颜色的设置

（关键字或#加阿拉伯数字）

Dreamwaver

Html结构

<html> 是网页文件的最外层标记

<head> 之间的文本是头信息

不会显示在浏览器中，包括基本的描述，整个网页的公共属性

</head>

<body> 是网页文件的主体部分

正文：文字、图片、链接、表单等

</body>

</html>

第五节——标签（一）

格式标签用于定义网页中文本的布局、缩进、位置、换行、列表等

<br> 换行

&nbsp: 空格

<p> 段落

<center> 居中

<pre> 保留文字在源代码中的格式

<ul><li> 无序列表

<ol><li> 有序的列表

<hr> 水平分隔线

数组按原格式呈现：

echo’<pre>’;

Print_r($arr);

echo’</pre>’;

有序列表和无序列表（与“项目编号”与“项目符号”对应）

使用百分比与使用固定值

文本标签

格式标签

<hn> 标题类型（ h1只能有一个，否则浏览器认为非法）

<b> 加粗

<i> 斜体

<u> 下划线

<sub> 上标

<sup> 下标

<font> 设置字体（类似样式的用法）

<tt> 输出字体

<cite> 输出斜体

<em> 输出强调斜体

<strong> 强调

<small> 小型字体

<big> 大型字体

标签、标题字体会自动换行

字体的设置（可以层层嵌套）

▲.文本环绕与停止文本环绕

语法:<img src="file_name" align="value">

★align取值有两个(left 和right)

★如果想停止环绕.就在想停止的地方插入<br clear="">

<clear>属性有:A.left 停止文本环绕直到没有对齐左页边的图像

B.right 停止文本环绕直到没有对齐右页边的图像

c.all 停止文本环绕直到没有两边边都没有的图像

▲.如何改变滚动条的颜色

★在<head>之间输入以下代码:

<style type=text/css>body{scrollbar-base-color:black;}</style>

1.scrollbar-face-color:滚动条页面颜色设定;

2.scrollbar-highlight-color:滚动条斜面和左面颜色设定;

3.scrollbar-shadow-color:滚动条下斜面和右面颜色设定;

4.scrollbar-3dlight-color:滚动条上边和左面的边沿颜色设定;

5.scrollbar-arrow-color:滚动条箭头两端颜色设定;

6.scrollbar-darkshadow-color:滚动条下边和右边的边沿颜色设定;

7.scrollbar-Track-color:滚动条底版颜色设定;

第六节——标签（二）

链接标签

图片标签

../(表示上一级目录

1.链接<a href=“URL”>某某页面</a> (超链接的表示方法)

2.锚点<a name=“name”>内容</a>

使用时<a href=“#name”>定位位置</a>

# 表示当前位置

3图像标签（img）

Src: 指定图片所在的URL

*一个图像只能加一个a标签，做一个链接

*如果把一幅图像分成多个区域，每个区域指向不同的URL地址（为一个图片加多个链接）

在图像<img>中使用usemap属性去使用地图（）

<map>定义热点区域

<area>指定每个热点区域

Shape指定形状 rect, poly, circle

Coords确定形状

href指定链接的位置

eg：

</map>

Border=边框的宽度

Alt:

1. 鼠标放上有黄色小图标

2. 如图像不存在，则出现它指定的文字

3. 搜索引擎可以通过它指定的文字搜索该图片

Width、height 指定一个或百分比可等比例缩放

第七节

1.表格标签（<table></table>）

<table>

Align: left, center, right 指定表格再上一层的位置

Border: 边线

Width: 宽度

Height: 高度

Cellspacing 、Cellpadding 指定表格单元格距离边框的位置，可以清空单元格间的距离（Cellspacing=“0”）

2.定义标题

表格标签一体，

使用<caption>(定义表格标题的位置)

Align 水平位置左中右

Valign 垂直距离的上中下

放在tr标签之前，放在table的内部使用

3.字段标签

<th>和<td>的用法一至，但文字是以粗体居中显示

4.行标签（<tr></tr>）

<tr>

Align

Valign

bgcolor

5.列标签（<td></td>）

<td><th> 、Width、Height、Align、 left,、 center,、 right、Valign:top, middle, bottom可用样式调节

Colspan、rowspan这两个用样式调不了

（调整单元格宽度，可以只调节某一单元格的宽度而改变整行或整列的宽度

Colspan、rowspan 来合并单元格，需要删除相应的内容）

第八节——窗口分帧

把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件

每个帧(即页面)都有自己的url

（多分帧不利于搜索引擎的搜索，一般用于后台）

<frameset>标签

属性：rows（分多行）、cols（分多列）、可以使用固定值，百分比和 * 三种分窗体（*可以表示剩余、也可以用来等分窗体）几个窗体就几格<frame>

用分帧就注意<body>或内容混用

border边框的宽度（可以隐藏边框）、frameborder（边框是否隐藏）

1.<frame>标签

属性：src、name、scrolling（是否出现滚动条、=”no”、=”yes”）、noresize（禁止边框尺寸调节）

<a href=“”>的target属性

四个内置的取值：_blank（新建空白窗）、_parent（自己的副窗体——同一行）、_self（自身窗体）、_top（整个页面）

2.<noframes>标签

<noframes>提示用户浏览器不支持多分帧网页，应访问不使用分帧的网页访问</noframes>

使用Microsoft Visual Studio.NET创建框架集

它可以和<body>共用出现画中画的效果

前台中

注意：分桢不能和body标签及内容体共存

第九节

表单的设计

<from></form>标签对用来创建一个表单，即定义表单的开始和结束位置，<form>标签具有下面等属性。

1. action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。相对和绝对

2. Method属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET（浏览器地址栏中显示提交的信息只能传utf-8的字符，字符最多有819个）或POST（常用不在浏览器地址栏中显示提交的信息）.

3. Target属性用来指定服务器返回结果显示的目标窗口或目标帧。（信息提交后响应的窗口指定）

4. Title属性用来设置当网站访问者的素、鼠标在表单上的任一位置停留过几秒时，浏览器用黄色小浮标显示的文本（如表单的名称或描述）。（相当于提示的设置）

Enctype属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：

application/x-www-form-urlencoded（默认的设置）

multipart/form-data（文件上传时用，其他情况用默认值）

表单字段元素

<input type=“reset”>（重置按钮，回到默认值，没有value值则为空）

属性：size（显示文本的长度）、value（默认值）“提交”“重置”普通按钮要结合javascript用

{}、maxlength（限制最大的输入长度）、readonly（只读，不能修改）、disabled

<input type=“checkbox”>（复选框选项选项）

属性：checked（默认选中）

<input type=“radio”>（单选框标签，必须是一个组，要name相同）

<input type=“hidden”>（隐藏框）

<input type=“password”>（密码域）

<input type=“button”>（增加普通按钮）

<input type=“file”>(上传文件) 文件上传（两个条件：post、multipart/form-data）

<select></select><option></option>（下拉列表）

<select>标签的属性：multiple（列表中设置多选）、size（显示个数，多了有滚动条）,name

<option>标签的属性：value、selected

如何在列表中实现取消选项

属性：cols、rows

<label>（快捷键字母设置）

属性：for、accesskey（定义快捷键）

第二篇：HTML5入门教学：简化的语法

文档类型Doctype:

文档类型的声明是一个HTML文档的第一行内容，它告诉浏览器这个页面是使用哪个版本的标记语言编写的。比如,HTML 4.01 Transitional 文档类型的声明是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"/TR/html4/loose.dtd">

XHTML 1.0 Transitional 文档类型声明的写法是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

而HTML5中，你只需要：

<!doctype html>

字符编码

为了验证或显示一个HTML文档，程序必须选择一种字符编码。

字符编码告诉浏览器和验证程序应该使用哪种编码由比特流转换为字符。

下面是HTML 4.01指定UTF-8字符编码的例子：

在XHTML中：

而现在使用HTML5,编码类型的语法非常简单：

因此，最基本的HTML文档结构应该是：

<!doctype html>

<html>

<head>

<title>Example document</title>

</head>

<body>

<p>Hello, World</p>

</body>

</html>

<script>标签

比如在HTML4里，<script>标签是这样定义的：

在HTML5里:

〈script src=”code.js”></script>

HTML5为script标签添加了一个新的可选属性 “async”, 用来告诉浏览器异步加载代码，所以这段代码在页面继续加载的同时就会被执行。可以像下面这样使用：

或者：

<link>标签

在HTML5K ,type属性跟<script>标签一样，都不需要。比如： <link rel="stylesheet" href="style.css">

更多相关推荐：

县委中心组学习型党组织建设学习笔记内容之二: 县委中心组学习型党组织建设学习笔记内容之二——什么是学习型政党学习型政党以人的素质提高和人的全面发展为创建的根本宗旨，并最终以党员干部素质率先发展影响、辐射、带动全社会公民素质的全面发展，其实质是一种现代化建设…
陈德权中心组学习笔记: 一、要乐于学习。要沉入进去、静下心来，少一些应酬，多一些读书；少一些浮躁，多一些沉静。要通过学习，提高自身工作能力和水平，解决实际问题，体会到学习的快乐；二、要善于学习。学习不仅是汲取知识的途径，而其本身就是一…
县委中心组学习型党组织建设学习笔记内容之五: 县委中心组学习型党组织建设学习笔记内容之五——学习型党组织建设学习的主要内容（一）坚持用中国特色社会主义理论体系武装头脑。深入学习马克思列宁主义、毛泽东思想，深入学习邓小平理论、“三个代表”重要思想以及科学发展…
10月份团课学习笔记: 时间：20xx年x月x日地点：学习室参加人：全体团员授课人：郑大伟内容：一、《六个“为什么”－－对几个重大问题的回答》连载五：充满活力的基本经济制度二、《关于加强和改进新形势下党建若干重大问题决定》内容一：随着…
NS2学习笔记_tcl和Otcl: NS2学习笔记——tcl和OtclTCL语言1.解释性语言，可以使用命令行或者脚本的方式运行2.以#和;#为注释符，其中#只能在行首注释，;#可以在行尾注释，例如：#注释seti100setj100;#注释3.…
两会学习笔记、学习体会、学习心得-----大学生版: 自两会闭幕至今已快接近一个月了，在这段时间通过参加“深入学习实践科学发展观”的学习、调研、分析、讨论，我深刻地感到：科学发展观有着丰富深刻的内涵，十七大报告明确指出：“科学发展观，第一要义是发展，核心是以人为本…
20xx年政治学习笔记范文: 20xx年政治学习笔记范文20xx年是全面完成“十一五”规划任务的最后一年，也是推动新城经济社会又好又快发展的关键一年。当前，国际经济出现复苏迹象，我国经济回升向好，中央继续实施积极的财政政策和适度宽松的货币政…

20xx政治学习笔记(完整) 2吕军: 政治学习吕军政治学习第一次学习两会精神促进教育发展两会是中国的窗口关注中国就不能不关注两会学校组织全体教职工收看了两会特别报道意义十分重大当前教育背景下作为教师只有不断地学习不断地丰富自己才能让自己不断地发展以...
新课程标准学习笔记: 新课程标准的理念与创新第一讲新课程的基本理念引言课程改革是教育改革的核心课程创新因而是教育制度创新的重点本次改革的宗旨是构建具有中国特色的现代化的基础教育课程体系贯穿本轮课程改革的核心理念是为了中华民族的复兴为...
20xx天津公务员考试申论写作公文范文之学习笔记: 20xx天津公务员考试申论写作公文范文之学习笔记天津公务员考试公务员考试申论中的贯彻执行类题目历来是广大考生成公路上的拦路虎因为贯彻执行类题类目庞杂涵盖范围广体裁不限导致考生复习难度加大在此中公教育专家为各位考...
十八大学习笔记: 学习党的十八大笔记学精神转作风干实事谋发展学习党的十八大报告对于基层来说就是要学精神转作风干实事谋发展学精神学习党的十八大精神就是要把十八大精神作为旗帜作为纲领始终贯彻到各项工作中去紧密联系工作思想实际坚持学以...
学习笔记学习心得: 农村基层干部廉洁履行职责若干规定试行为进一步加强农村党风廉政建设促进农村基层干部廉洁履行职责维护农村集体和农民群众利益推动农村科学发展促进农村社会和谐依据中国共产党章程和其他有关党内法规国家法律法规制定本规定总...

热门关注