>>:
HTML:
HyperText Markup Language超文本标记语言,用于述超文本中内容的显示方式,比如字体颜
色等等。它只是一种描述性语言,没有什么逻辑性。
超文本:用超链接的方法,将各种不同空间的文字信息组织在一个起的网状文本。
特点:
扩展名为:.html或者是.htm结尾。一般都用.html。
Html文档声明的三种类型:
Strict DTD、Transitional DTD、Frameset DTD ;example:
<!DOCTYPE(注释) html(跟标签) PUBLIC(大型国际化制定) "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd(dtd约束规制)>
其他类型只需要更改粗体下划线部分为对象的类型名就可以了
Html编写工具,组成部分,书写规范:
工具:
普通工具:记事本、EditPlus、NotePad++
专业工具:DW(DreamWeaver)
主要组成部分:
标签:说明内容功能的。
属性:描述内容的特征的。
<html>----声明:网页内容都是HTML标签内容
<head><head>----头信息
<body></body>----主体内容
<html>
书写规范:
一般标签都是成对出现,而且标签要正确闭合。Example:<body></body> <hr/>
绝大多数标签都有属性,属性值一般都建议用“”引起来。Example:<body text=”red”>
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='Bill "HelloWorld" Gates'
没有内容的标签成为空标签。正确的闭合方式是在开始标签就闭合。Example:<br/>
标签名和属性名一般都使用小写。
大多数标签都支持嵌套。Example:
<html>
<head>
<title></title>
<head>
<body></body>
<html>
>>:
Html常用标签:
1、文件标签:
Html标签:<html>用于声明这是一个HTML文件,在其中有两部分组成,<head>和<body>
Head标签:<head>用来加载一些重要的资讯,常用的有<title><meta>,它的内容不会显示,只有<body>的内容才会显示。
Title标签:<title>只能出现在<head>标签中,它代表的是标题。
Body标签:<body>中的内容会被显示出来,常用的属性有:
text:用于设定字体颜色
background:用于设定背景图片
bgcolor:用于设定背景色
关于html中颜色的取值:
颜色有红色、绿色、蓝色三种颜色组成
有三种取值方式:
1).rgb(0,0,0) 值是在0-255之间
2). #000000 #ff0000 #00ff00 #0000ff #ffffff
3).单词,例如:red white yellow
2、排版标签:
注释:
在html中的注释和在Java中的注释目的相同。写法:<!--xxxx-->
P标签:<p>是段落标签<p align="center">,属性align用来设定字体的对齐格式,取值有left、right、center
<br/>换行标签
<hr>标签:它会生成一条水平线。它常用的属性有:
align,设置水平线的对齐方式。
size,设置水平线的厚度,以像素为单位,默认值为2.
width,设置水平线的长度,可以是绝对值或者是相对值,一般为100%
color,设置水平线的颜色,默认为黑色。
3、块标签:
<div>:用于在文档中设定一个块区域。每个div标签都是以新行开始的。
<span>:用于在行内设定一个块区域。Span则不是以新行开始。
4、字体标签:
<font>用于规定文本的字体、大小、颜色、常用的属性有:
face:规定文本的字体。size:规定文本的大小。color:规定文本的颜色。
<h1>:h1-h6标题标签,从一到6逐渐减小。
5、列表标签:
<ol>表示一个有序列表,type:这个属性规定列表中使用的标记类型.可取值1 A a I i.
<ul>表示一个无序列表,属性type:disc\square\circle默认值为disc
<li>表列表中的一个列表项。属性type:只适用于无序列表value:只适用于有序列表。
start:这个属性规定列表的起始值
6、图形标签:
<img>是一个图片标签,用于在页面上引入图片。常用属性:
src:用于设定要引入的图片的url
alt:用于设定图像的替代文字
width:用于设定图片的宽度
height:用于设定图片的高度
border:图片边框厚度
align:与周围文字的对齐方式.可选值:top, middle,bottom(默认), left, right
7、<a>连接标签:用于定义超链接。常用属性:
href:用于设定链接指向页面的url.
name:用于设定锚点的名称
target:用于设定在何处打开链接页面.可选值:_blank, _parent, _self(默认), _top, 框窗名.
没有下划线的超链接:<a href="http://www.baidu.com" style="text-decoration">This is a link to aa</a>
邮件协议的链接:<a href=”mailto:abc@shouhu.com?subject=xxxx”>联系我们</a>
8、<table>标签用于定义表格,常用的属性有:
align:用于设定表格的对齐方式
bgcolor:用于设定表格的背景颜色.
border:用于设定表格边框的宽度
width:用于规定表格的宽度.
<tr>标签用于定义行,它包括一个或多个th\td标签。常用的属性有:
align:用于设定表格中行的内容对齐方式.
bgcolor:用于设定表格中行的背景颜色.
<td>标签用于定义表格单元。常用的属性有:
align:用于设定单元格内容的对齐方式.
bgcolor:用于设定单元格背景颜色.
height:用于设定单元格的高度.
width:用于设定单元格的宽度.
colspan:用于设定列合并
rowspan:用于设定行合并.
<caption>标签用于定义表格标题,必须紧邻<table>标签后,一般开发中都用<h>标签
<th>标签用于定义表格的表头,居中,加粗。Html中的单元格分为标准单元格和表头单元格。
<thead>标签用于定义表格的页眉;<thead>标签用于组合html表格的表头内容.;<thead>元素应该与<tbody>和<tfoot>元素结合起来使用.注意:<thead>内部必须有<tr>标签.
<tbody>定义表格的主体。
<tfoot>定义页脚。
>>:
Html表单标签:
1、<form>标签代表一个表单,表单用于向服务器传输数据.
将存放在<form>标签体内容可以成为表单元素(标签),只使用form标签无任何效果.
<form>标签能够包含<input>,可以是文本字段,复选框,单选框或提交按钮等.还可以包含<textarea> <select>等.
<form>常用属性:
action:用于规定提交表单时向何处发送表单数据,今天不细讲,以后肯定用.
method:用于规定提交的方式.一般取值 POST或GET,今天大概了解一下,以后细讲.
name:用于定义表单的名称,一般不用.
关于POST与GET方式区别:
1.get方式只能少量数据,而post可以携带大数据.
2. get方式提交时,数据会在地址栏上显示,安全性差.Post方式提交不会在地址栏上显示数据,更加安全.get会将提交信息封装在请求行,也就是http消息头之前;post将提交信息封装到数据体重,也就是http消息头后的空行后。
2、<input> 标签用于搜集用户信息.
如果数据想要发送到服务器端,必须要有name属性。
根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等.
关于<input>标签type属性值说明 :
<input type=”text”> 定义单行的输入字段,用户可在其中输入文本.默认宽度为 20 个字符.
其它常用属性:
?name:定义标签名称
?value:定义标签值
?size:定义输入字段的长度
?maxlength:定义可输入最大字符个数
<input type=”password”>定义密码字段.该字段中的字符被掩码.
其它常用属性:
?name:定义标签名称
?value:定义标签值
?size:定义输入字段的长度
?maxlength:定义可输入最大字符个数
<input type=”radio”>定义单选按钮.
其它常用属性:name:定义标签名称.注意,对于单选按钮,如果要想做到单一选择,多个radio的name值必一样.
?value:定义标签值
?checked:定义该标签默认被选中. checked=”checked”
<input type=”checkbox”>定义复选框.
其它常用属性:
?name:定义标签名称.注意,一组的checkbox它们的name值应该是一样的.
?value:定义标签值
?checked:定义该标签默认被选中.checked=”checked”
<input type=”button”>定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)
其它常用属性:name:定义标签名称value:按钮显示名称
<input type=”hidden”>定义隐藏的输入字段.
其它常用属性:name:定义标签名称value:定义标签值
<input type=”file”>定义输入字段和 "浏览"按钮,供文件上传.
其它常用属性:name:定义标签名称
<input type=”submit”>定义提交按钮.提交按钮会把表单数据发送到服务器.
其它常用属性:name:定义标签名称value:按钮显示名称
<input type=”reset”>定义重置按钮.重置按钮会清除表单中的所有数据.
其它常用属性:name:定义标签名称value:按钮显示名称
<input type=”image”>定义图像形式的提交按钮.
这个标签主要是用了替换submit按钮,因为默认产生的提交按钮并不漂亮,这个标签允许你采用指定的图片做为提交按钮.
其它常用属性:name:定义标签名称src:定义作为提交按钮显示的图像的url
alt:定义作用图像的替代文本.
3、select标签:
用于定义一个下拉列表。常用属性:
name:定义下拉列表的名称
size:定义下拉列表中可见选项的数目
multiple:定义可选择多个选项
用于定义下拉列表中的选项.<option>需要位于<select>标签内部
常用属性:
value:定义送往服务器的选项值
selected:定义选项为选中状态.selected=”selected”
<select name=”发送的名称” >
<option selected=”selected”>请选择</option>
<option value=”选中时发送的内容1”>显示名字1</option>
<option value=”选中时发送的内容1”>显示名字2</option>
...
</select>
<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
常用属性:
name:定义多行文本框名称
cols:定义多行文本框可见宽度
rows:定义多行文本框可见行数
wrap:规定多行文本框中文字如何换行
分组标签:
<fieldset>
<legend></legend>
</fieldset>
标签元素 <label for="某个元素的id值">文本</label>---单击文本时,就像那个元素一样
<marquee>让内容浮动起来
属性:direction:left、right、down、up
属性:behavior:scroll、alternate、slide
。<pre> 保留数据的原有格式;
。。<p>段落标签;<sub>下标<sup>上标;
<a name=”top”>一个位置</a>
<a href=”#top”>获取那个位置</a>
对于服务端而言:表单提交尽量用post,因为涉及到编码问题,服务端默认的解码是ISO8859-1。对于post提交的中文setCharacterEncoding(“gbk”),get提交String name = new String(name.getBytes(“iso-8859-1”),”UTF-8”);
使用表单的组件不一定要定义form标签,只有需要将数据进行服务端的提交的时候才会用到form标签。
<cellspacing>:单元格与单元格之间的距离;
<cellpadding>:表格当中的数据距离表格框线的距离;
>>:
Html框架标签:
<frameset>是框架结构标签,它定义如何将窗口分割为框架.
注意: <frameset></frameset> 标签不能和<body></body> 标签共存.
常用属性:
cols:垂直切割(切割原则:多块之间使用”,”相隔,每一块可以使用像素,也可使用百分比.注意”*”代表剩下的)
rows:横向切割
frameborder:定义框架的边框,其值可以有0和 1,0表示不要边框,1表示要显示边框.
border:定义框架的边框厚度
bordercolor:定义框架的边框颜色
framespacing:定义框架与框架之间的距离.
<frame>是框架标签,它定义放置在每个框架中的页面.
常用属性:
src:定义此框架要显示的页面url
name:定义此框架的名称(用于其他标签的target属性使用)
frameborder:定义框架的边框,其值可以有0和 1,0表示不要边框,1表示要显示边框.
framespacing:定义框架与框架之间的距离
bordercolor:定义框架的边框颜色
scrolling:定义是否显示卷轴,YES表示要显示,NO表示不显示,AUTO视情况而定.
noresize:定义框架大小不可以改变.
marginhight:定义框架高度部分边缘所保留的空间.
marginwidth:定义框架宽度部分边缘所保留的空间.
<iframe> 元素会创建包含另外一个文档的内联框架(即行内框架).
常用属性:
?src:定义些框架要显示的页面url
?name:定义些框架的名称
?width:定义些框架的宽度
?height:定义些框架的高度
?marginwidth:定义插入的页面与框边所保留的宽度
?marginheight: 定义插入的页面与框边所保留的高度
?frameborder:定义框架的边框,1表示显示边框 ,0表示不显示
scrolling:定义是否允许卷动,YES允许,NO不允许.
>>:
其他标签:
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.<meta> 标签位于文档的头部,不包含任何内容.<meta> 标签的属性定义了与文档相关联的名称/值对.
meta 标签是在html页面中,完成与HTTP协议等效功能,HTTP协议稍后讲,此处简单涉及,HTTP协议有一个概念叫请求头,请求头的格式:key=value。
http-equiv 用于确定http请求头 key所确定的值,例如:Content-Type 确定浏览器查看编码方式。
content 用于确定 http请求头 value所确定的值,例如:text/html;charset=UTF-8 ,确定以UTF-8编码进行查询。text/html 文件的类型为html。
关于编码:
UTF-8:万国码,支持英文、中文、其他文字(日、韩等)
ISO8859-1:只支持英文。
GB2312:国标码,支持简体中文
GBK:GB2312升级版,支持简体、繁体
GB18030:GBK升级版,支持简体、繁体、少数名族字体。
常见编码:UTF-8、GBK、ISO-8859-1
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">告诉浏览器用utf-8编码
<link> 标签定义文档与外部资源的关系.
<link> 标签最常见的用途是链接样式表.
<link>只能存在于 head 部分,不过它可出现任何次数.
常用属性:
type:定义被链接的文档的MIME类型
href:定义被链接的文档的URL
rel:定义当前文档与被链接文档之间的关系.
关于<link>标签详细用法,我们会在css中介绍
<link rel="stylesheet" type="text/css" href="theme.css" />
<script> 标签用于定义客户端脚本,比如 JavaScript.
<script> 标签既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件.
必需的 type 属性规定脚本的 MIME 类型.
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新.
常用属性:
type:定义被链接的文档的MIME类型(必须有)
src:定义被链接的文档的URL
关于<script>标签详细用法,我们会在javaScript中介绍
<script type=text/javascript src="example.js"></script >
相关推荐
其中,“style-ext-html-webpack-plugin”是一个特别值得关注的插件,它专门针对HTML文件的内联样式进行了优化,以提高页面加载速度和用户体验。 **一、插件概述** “style-ext-html-webpack-plugin”是针对...
web登录虚拟桌面必备组件:VMware-Horizon-View-HTML-Access_x64-2.2.0-1404668
add-asset-html-webpack-plugin, 将JavaScript或者CSS资产添加到 HTML web pack插件生成的HTML中 add-asset-html-webpack-plugin将JavaScript或者CSS资产添加到 html-webpack-plugin 生成的HTML中 安装使用 npm 安装...
而"php-simple-html-dom-parser"是一个PHP库,专门用于处理和解析HTML文档,它提供了类似jQuery的API,使得操作HTML文档变得简单直观。这个包的Laravel版本则将这个强大的解析器集成到Laravel框架中,让开发者可以更...
免费 selenium-html-runner-3.5.2
html-docx-js, 在浏览器中,将HTML文档转换为 DOCX html-docx-js这是一个非常小的库,它是将HTML文档转换为DOCX格式的cap,它由Microsoft和onward使用。 它通过使用称为'altchunks'的特性来在浏览器中执行转换。 ...
针对JS(JavaScript)和HTML(超文本标记语言)这两种广泛使用的前端开发语言,有多种代码格式化工具可以帮助开发者实现这一目标。下面将详细介绍这些工具及其特点。 1. **JS Beautify**: JS Beautify是一款开源...
可用于selenium自动化测试中的一个jar包,selenium-html-runner-3.5.0.jar
html-docx.js,word转换插件
html css js网页设计 tour-website-html-css-master.zip tour-website-html-css-master.zip tour-website-html-css-master.zip tour-website-html-css-master.zip tour-website-...html-css-master.zip
HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 ...
学习html-to-image学习html-to-image学习html-to-image学习html-to-image 学习html-to-image学习html-to-image学习html-to-image学习html-to-image 学习html-to-image学习html-to-image学习html-to-image学习...
struts-html-el.tld
aspose-html-17.8.jar, 用于对html文件进行操作
学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习...
"HTML-CSS-JS Prettify"就是这样一个插件,专为格式化HTML、CSS和JavaScript代码而设计。** **在安装"HTML-CSS-JS Prettify"插件之前,确保你已经拥有Sublime Text。如果你还没有,可以从官方网站下载并安装。安装...
资源分类:Python库 所属语言:Python 资源全名:avocado-framework-plugin-result-html-88.0.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...
php-simple-html-dom-parser, PHP简单的HTML DOM解析器适应 Composer 和 PSR 0 php-simple-html-dom-parser版本 1.5.2针对 Composer 和 PSR-0的自适应:用PHP5 编写的HTML解析器允许你以非常简单的方式操作 HTML !...