`

HTML

 
阅读更多
一、HTML文件结构
<HTML>
<HEAD>
<title></title>
<meta>
</HEAD>
<BODY>
HTML 文件的正文
</BODY>
</HTML>
二、常用标签
<html></html> 创建一个HTML文档
<head></head> 设置文档标题以及其他不在WEB网页上显示的信息
<body></body> 设置文档的可见部分 bgcolor, background
<title></title> 将文档的题目放在标题栏中
<pre></pre> 创建预格式化文本
<h1>,<h2><h3>,
<h4>,<h5>,<h6> 标题元素
<b></b> 黑体
<i></i> 斜体字
<strong></strong> 加重一个单词(通常是斜体加黑体)
<font> 字体 Color,size
<a> 创建超链接、锚点 href:链接地址 
                        name:锚点名字
<p> 创建新的段落 Align
<br>或者<br/> 换行
<ul><li><ol> 创建列表
<div> 一个用来排版大块HTML段落的标签
<img> 图像标签 src:源文件地址
                width:宽度
                height:高度
                alt:说明文字
<hr> 水平线
<table></table> 创建一个表格
<tr></tr> 开始表格中的每一行
<td></td> 开始一行中的每一个格子
<th></th> 设置表格头:一个通常使用黑体居中文字的格子

1、<head>中常见子元素的含义 ,html注释<!-- -->

2、标题标记<hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。例如:
  <h1>文档标题</h1>
  <h2>次级标题</h2>
搜索引擎比较重视<hx>标记中的内容。

3、文本标记<b><i><u><del>
<b>粗体显示
<i>斜体显示
<u>下划线显示
<del>中划线显示(删除效果)

4、预格式文本<pre>
<pre> 标签的一个常见应用就是用来表示计算机的源代码。

5、字体标签<font>
<font> 规定文本的字体、字体尺寸、字体颜色。比如:
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
<FONT SIZE="N"> ... </FONT> "N"有效值范围为1 - 7也就是说文字大小分7个等级。
<FONT SIZE=±"N"> ... </FONT> SIZE的默认值为3,我们也可以用±来对默认值进行加减。
   
5、换行<br/>或者<br>
<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。

6、滚动标记Marquee
<html>
      <head>
       <title>my first page</title>
      </head>
      <body>
     This is my first homepage!
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>
这是一个滚动字幕。
</MARQUEE>
</body>
</html>

7、水平线<hr>
<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
注意:width 属性可以使用pixels像素值,也可以使用百分比。请注意它们的区别。如果是百分比,会随着窗口的变化,宽度也发生变化。像素值的话,窗口大小发生变化,水平线宽度也不发生变化。

8、超链接<a>
<a href=“5.htm”>5.htm</a> 超链接
图片作为链接。
<a href="lastpage.htm">
<img border="0" src=".\images\next.gif">
</a>
target属性(定义从什么地方打开链接地址 )
<a href="http://www.163.com/" target="_blank">163!</a>

锚标签和name属性
命名一个锚点:
<a name="label">Text to be displayed</a>
链接到锚点:
<a name="http://www.w3schools.com
/html_links.asp#label">Jump to the label</a>
创建邮件链接
<a href="mailto:test@163.com?subject=AboutHTML">
发邮件给我</a>

target在何处打开目标 URL。

_blank - 在一个新的未命名的窗口载入文档
_self - 在相同的框架或窗口中载入目标文档
_parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
_top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

9、列表标签<ul><ol><li><dl>
a、<ul> 标签定义无序列表。
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
b、<ol> 标签定义有序列表。
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

10、图像标签<img>
src:源文件地址    width:宽度   height:高度  alt:说明文字

11、内嵌<embed>
<embed>标记用于在页面中嵌入多媒体文件,但是用户计算机上需要事先安装相应的处理程序。
常用嵌入式文档的格式:mp3, mid, wma, asf, swf, flv, rm, ra, ram, avi
典型用法:
<embed src="ee.wmv" autostart="true" loop='true' hidden='false' width="100px" height="100px"   />
autostart:是否自动播放嵌入的文件。
loop:是否循环播放。也可以取数字,表明循环多少次。
   hidden:是否显示播放器。

12、表格标签<table><tr><td><th>
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
th 元素内部的文本通常会呈现为粗体,有时候很少用它,直接<td>用css控制显示文本

13、块元素<div>
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
在CSS的学习中,我们会详细讲述<div>的用法。

三、表单标签

表单元素 标签 描述
文本框 <INPUT TYPE=‘text’ …> 输入一行文本
密码 <INPUT TYPE=‘password’ …> 输入一行文本,但不可见,只以星号显示
单元按钮 <INPUT TYPE=‘radio’ …> 只能选择一个选项
复选框 <INPUT TYPE=‘checkbox’ …> 可以选择一个或多个选项
隐藏域 <INPUT TYPE=‘hidden’ …> 该域的值对用户不可见,但会提交给服务器
下拉列表 <SELECT …>
             <OPTION …> … </OPTION>  (可以放多个option)
        </SELECT>
文本域 <TEXTAREA …>…</TEXTAREA> 可以输入多行文本
提交按钮 <INPUT TYPE=‘submit’> 提交表单
普通按钮 <INPUT TYPE=‘button’>
重置按钮 <INPUT TYPE=‘reset’> 重置表单信息


基本功能:收集用户填写的数据,然后提交到服务器上。
1、要提交数据的表单域必须加name属性。不然,该表单域的数据不会提交到服务器上[一定要注意,只有不想提交的才不写 如:button,submit按钮]。


文本框:
<input type="text"  name="uname"[最好习惯上属性值都加上引号,不加在结束时容易name的值为uname/]  value="333"  size="30"[文本框的宽度]  maxlength="10"[最多可输入的字符。这里是:unicode字符。一个汉字和一个字母都算一个字符。] />

密码框:(跟文本框的用法基本一致,除了页面上以星号显示)
<input type="password" name="pwd" />


单选按钮(用于多选一的情况):
性别:<input type="radio" name="gender"  value="1" />男
<input type="radio" name="gender"  value="0" />女
1、单选按钮是分组的, name相同即为一组。  一组只能选中一个按钮。
2、value:如果不增加value属性,选中该按钮提交时默认为:on,而不是空字符串。所以,建议大家使用单选按钮一定要指定value.


复选框(用于多选多的情况):
喜欢编程语言:<br />
<input type="checkbox" name="favorite"/>  JAVA
<input type="checkbox" name="favorite" value="2"/>  C++
<input type="checkbox" name="favorite" value="3"/>  RUBY
<input type="checkbox" name="favorite" value="4"/>  C
3、 复选框是分组的, name相同即为一组。 可同时多个复选框
4、value:如果不增加value属性,选中该按钮提交时默认为:on,而不是空字符串。
5、选中的选项会被传递成多个同名不同值的参数。

下拉列表(实现多选一[选项较多时,选用;选项少时,用单选按钮组。] 或多选多的效果。):
国籍:<br />
<select name="country" multiple[可以通过multiple属性实现多选多。一般不用。]>
<option>China</option>[如果该option不写value.选中该option后提交option的文本。]
<option value="2">America</option>
<option value="3">France</option>
</select>
1、当<option>没有指定value属性。如果被选中,则提交<option>中的提示文本,而不是On或空字符串。

注:单选按钮、复选框默认选中用:checked属性。  下拉列表使用:selected属性。

隐藏域:[一般用于,不需要用户输入,但是服务器需要得到该数据时。]
隐藏域:<input type="hidden" name="hid" value="55"/> <br />

多行文本域:
<textarea name="introduce" rows="4" cols="40">  [这是该文本域的默认值。]</textarea>

重置按钮:将各表单域的值恢复为默认值。
提交按钮:提交表单数据。
图片按钮:提交表单数据,通过单击指定的图片提交表单。例如:
     <input type=image   src=”1.jpg” />
分享到:
评论

相关推荐

    winfrom中嵌套html,跟html的交互

    在Windows Forms(WinForms)应用开发中,有时候我们需要在应用程序中展示富文本或者实现复杂的用户交互,这时可以采用嵌入HTML的方式。本文将详细介绍如何在WinForms中嵌入HTML,并与HTML进行交互,同时通过提供的...

    html2image 2.0.3 用于简单的html转图片

    Html2Image html2Image = Html2Image.fromHtml(sb.toString(),null); // 这边如果设置false,图片不会自动根据内容设置长宽默认长1024 ,宽768 //html2Image.getImageRenderer().setAutoHeight(false); ...

    html5网站实例

    HTML5是现代网页开发的核心标准,它在原有HTML4的基础上引入了诸多新特性,极大地提升了网页的交互性和表现力。本实例将详细讲解如何利用HTML5来构建一个完整的网站,包括布局、登录功能以及内容展示。 一、HTML5的...

    JS-HTML-Format(JS及HTML代码格式化工具集合)

    针对JS(JavaScript)和HTML(超文本标记语言)这两种广泛使用的前端开发语言,有多种代码格式化工具可以帮助开发者实现这一目标。下面将详细介绍这些工具及其特点。 1. **JS Beautify**: JS Beautify是一款开源...

    HTML期末大作业

    HTML,全称HyperText Markup Language,是用于创建网页的标准标记语言。这个“HTML期末大作业”显然涵盖了HTML的基础知识和应用技巧,对于学习者来说,无论是完成作业还是自我提升,都是一个宝贵的资源。 HTML的...

    Android TextView显示html的demo

    在Android开发中,有时我们需要在TextView中展示富文本内容,比如HTML格式的文本,这能够增强界面的表现力,包括插入图片、设置字体样式等。这个"Android TextView显示html的demo"就是专门为了实现这一功能而设计的...

    html 个人网站 源码

    HTML个人网站源码是构建网页或简单网站的基础框架,它包含HTML、CSS和可能的JavaScript文件,这些元素共同构成了一个动态、交互式的网络界面。在这个压缩包中,我们看到的是一个名为“经典三列布局整套模板”的项目...

    html期末大作业

    HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它是互联网上应用最广泛的语言,也是构建网页的基础。在这个“html期末大作业”中,我们可以推测这是一个学生或学习者为了完成课程要求,练习并...

    html2pdf_中文

    在IT行业中,HTML to PDF转换是一项常见的需求,特别是在网页内容需要离线阅读或者打印时。`html2pdf`是一个PHP库,它允许开发者将HTML页面转换为PDF文档,从而实现这个功能。`html2pdf`库特别强调了对中文的支持,...

    HTML静态网页模板下载大全

    HTML静态网页模板是网页设计中常见的一种资源,它是由HTML、CSS和JavaScript等技术构建的预设布局和设计。这些模板通常包含多个页面,如首页、关于我们、联系我们、产品展示等,为创建网站提供了一个快速而高效的...

    html2fpdf 中文支持

    html2fpdf 或 html2pdf 是在fpdf上开发的一个可以将html页面转换为pdf文件的PHP类。 官方网址 http://sourceforge.net/projects/html2fpdf/ 近日,由于开发项目需要,需要一个能将页面转换为pdf的插件,以供客户端...

    自己用c++写的html文件解析程序(html-x)

    【标题】"自己用C++写的HTML文件解析程序(html-x)"是个人开发的一款基于C++实现的HTML解析器。这个程序旨在处理HTML文档,提取其中的信息或者进行特定的DOM操作。开发者通过C++编程语言实现了对HTML文档的解析,允许...

    HTML转PDF 非常好用

    HTML到PDF转换是一种常见的需求,尤其在Web开发和文档生成领域。Aspose.Pdf是一款强大的.NET库,专门用于处理PDF文档,其中包括将HTML转换为PDF的功能。以下是对这个主题的详细探讨。 首先,理解HTML(超文本标记...

    通过SpringBoot访问HTML页面源码

    在本文中,我们将深入探讨如何使用SpringBoot框架访问和处理HTML页面。SpringBoot以其便捷的配置和快速的应用开发而闻名,使得构建Web应用程序变得更加简单。本实例将展示一个清晰、简洁且注释丰富的代码示例,帮助...

    50余款手机页面模版源码html5

    50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...

    纯HTML网页源码

    HTML,全称HyperText Markup Language,即超文本标记语言,是构建互联网页面的基础。它是一种标记语言,通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码,不依赖其他如JavaScript、CSS...

    FreshHTML3.32.0.0汉化版

    FreshHTML是一款广受欢迎的HTML编辑器,其3.32.0.0汉化版为中文用户提供了极大的便利。这款编辑器的最大特点是它的所见即所得(WYSIWYG)功能,这意味着用户在编辑HTML代码时,可以直接看到页面的实际显示效果,极大...

    Delphi 用HTML做界面。订餐系统。跟js/html交互

    HTML界面的引入意味着开发者可能使用了诸如WebBrowser组件或其他第三方控件,将HTML页面嵌入到Delphi应用中,使得用户可以直接在Delphi应用内浏览和交互HTML内容。这样的设计允许开发者利用HTML和CSS的灵活性来设计...

    html静态页面源代码

    HTML(HyperText Markup Language)是一种标记语言,用于创建网页内容并定义其结构。在这个"html静态页面源代码"的压缩包中,包含了四个HTML源文件,它们是构建静态网站的基础。静态网站指的是不包含服务器端动态...

    html5饼图、柱状图、折线图,Html5+JS开发

    HTML5是一种先进的网页标准,它在图形和交互性方面提供了许多增强功能,使得开发者能够创建出更加生动和富有表现力的网页应用。本资源包含了一系列使用HTML5和JavaScript技术实现的图表,包括饼图、柱状图和折线图,...

Global site tag (gtag.js) - Google Analytics