HTML基础

HTML基本标签

    Html介绍

文件标签

排版标签

块标签

字体标签

清单标签

图形标签

链接标签

表格标签

HTML表单标签

Form标签

Input种类

Select与option标签

Textarea标签

HTML框架及特殊字符

框架标签

其它标签与特殊字符

Html介绍

1.      什么是html?

    Html是用来描述网页的一种语言。

  HTML 指的是超文本标记语言 (Hyper Text Markup Language)

  HTML 不是一种编程语言,而是一种标记语言 (markup language)

 标记语言是一套标记标签 (markup tag)

 HTML 使用标记标签来描述网页

2.      Html的作用?

      Web浏览器的作用是读取html文档,并以网页的形式显示它们。浏览器不会显示html标签,而是使用标签来解释页面上的内容.

简单说,html就是用于展示信息的。

3.      Html书写规范

a)        Html标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如 <html>

HTML 标签通常是成对出现的,比如 <b> 和 </b>

标签对中的第一个标签是开始标签,第二个标签是结束标签

绝大多数的标签都具有属性,建议属性值使用引号引起。例如:<body text=”red”>

大多数标签是可以嵌套的

b)       Html创建

Html文件可以直接使用文本编辑器来创建,保存时,后缀名为html或htm

整个文件是在<html>与</html>标签之间在<html>标签间有<head>与<body>子标签。

例如:<html>

<head></head>

<body></body>

</html>

c)        空的html标签

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在开始标签中添加斜杠,比如 <br/>,是关闭空元素的正确方法,HTML、XHTML和 XML         都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用<br /> 其实是更长远的保障。

d)       Html大小写不敏感

HTML 标签对大小写不敏感:<P> 等同于<p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签,因为万维网联盟(W3C)在HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写

 

文件标签

1.   html标签

整个文件都处于<html>标签中.

<HTML>用以声明这是 HTML 文件,让浏览器认出并正确处理此 HTML 文件。

在HTML文件有两部分<head>与<body>

2.   head标签

<head>用于加载一些重要的资讯

          它的内容不会被显示,只有<body>的内容才会被显示  

3.   title标签

<title>只能出现于<head>中。

它代表的是标题

4.   body标签

<body>中的内容会被显示。

常用属性:

text:用于设定文字颜色

 background:用于设定背景图片

  bgcolor:用于设定背景色

 

5.   关于html中颜色取值

颜色由红色、绿色、蓝色混合而成

有三种取取值方式:

       1.rgb(0,0,0)  值是在0-255之间

       2.#000000  #ff0000  #00ff00 #0000ff  #ffffff

       3.red  green blue      

 

排版标签

1.      注释

在html中注释是<!--注释 -->

在html中使用注释的目的与java中一样。

2.      p标签

<p>标签是段落标签,可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。

<p>标签常用属性

align:用于设定对齐方式 可选值 left right center 默认值是left.

3.      br标签

<br>标签是换行标签。

因为浏览器会自动的忽略空白与换行,因此<br>标签成为了我们最常用的标签。

 

4.      hr标签

<hr>标签会生成一条水平线。

常用属性:

l  align:设置水平线对齐方式 可选值 left right center

l  size:设置水平线厚度 以像素为单位。默认为2

l  width:设置水平线长度.可以是绝对值或相对值。默认为100%

l  color:设置水平线颜色.默认为黑色

 

5.      关于html中数值单位

Html的数值默认单位为像素(px).

在有些位置可以使用百分比来设置。

例如:

<hr size=’3’>这个就代表水平线厚席为3px.

<hr width=’30%’>这个就代表水平线长度为总长度的30%.

 

块标签

1.      div标签

用于在文档中设定一个块区域。

常用属性:

align:left center right

2.      span标签

用于在行内设定一个块区域。

Html中绝大多数元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始。例如 div p等

内联元素在浏览器显示时,通常不会以新行来开始。span

 

        

字体标签

1.      font

<font>标签用于规定文本的字体,大小,颜色。

常用属性:

  face:规定文本的字体

   size:规定文本的大小

   color:规定文本的颜色

2.      h1-h6

<h1>-<h6>标签用于定义标题.

<h1>最大标题

<h6>最小标题

列表标签

1.      ul

<ul>标签表示的是一个无序列表。

常用属性:

 
 type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc

2.      li

<li>标签表示的是一个列表项

常用属性:

 type:这个属性只适用于无序列表,用于设定项目符号,默认值为disc

value:这个属性只适用于有序列表,用于设定列表的项目数字

3.      ol

<ol>表示的是一个有序列表。

常用属性:

type:这个属性规定列表中使用的标记类型。可取值1 A a I i.

 start:这个属性规定列表的起始值

 

 

图形标签

1.      img

<img>是一个图片标签,用于在页面上引入图片.

常用属性:

l  src:用于设定要引入的图片的url

l  alt:用于设定图像的替代文字

l  width:用于设定图片的宽度

l  height:用于设定图片的高度

l  border:图片边框厚度

l  align:用于设定图片的文字的对齐方式

链接标签

1.      a

<a>标签用于定义超连接,用于从一个页面链接到另一个页面。

常用属性:

l  href:用于设定链接指向页面的url.

l  name:用于设定锚的名称

l  target:用于设定在何处打开链接页面。

表格标签

1.      table

<table>标签用于定义表格

常用属性:

l  align:用于设定表格的对齐方式

l  bgcolor:用于设定表格的背景颜色。

l  border:用于设定表格边框的宽度

l  width:用于规定表格的宽度。

2.      tr

<tr>标签用于定义表格的行,包含一个或多个th或td元素。

                 <tr>常用属性:

                 align:用于设定表格中行的内容对齐方式。

                 bgcolor:用于设定表格中行的背景颜色。

                

                

3.      td

<td>标签用于定义表格单元

td元素中的文本一般显示为正常字体且左对齐。

<td>常用属性:

l  align:用于设定单元格内容的对齐方式。

l  bgcolor:用于设定单元格背景颜色。

l  height:用于设定单元格的高度。

l  width:用于设定单元格的宽度。

l  colspan:用于设定列合并

l  rowspan:用于设定行合并。

 

4.      caption

<caption>用于定义表格标题

                <caption>标签必须紧随<table>标签之后,一个表格只能有一个标题。通常这个标题会被居中于表格之上。

5.      th

<th>标签用于定义表格的表头,<th>内部的文本通常呈现为居中加粗文本。

Html表格中有两种类型的单元格:

       表头单元格th:包含表头信息。

       标准单元格td:包含数据。

6.      thead

<thead>标签用于定义表格的页眉

              <thead>标签用于组合HTML表格的表头内容。

              <thead>元素应该与<tbody>和<tfoot>元素结合起来使用。

                 注意:<thead>内部必须有<tr>标签。

7.      tbody

<tbody>标签用于定义表格的主体

<tbody>标签用于组合HTML表格的主体内容。

8.      tfoot

<tfoot>标签用于定义表格的页脚

<tfoot>标签用于组合HTML表格中的表注内容。

HTML表单标签

form标签

    <form>标签代表一个表单,表单用于向服务器传输数据。

    <form>标签能够包含<input>,可以是文本字段,复选框,单选框或提交按钮等。还可以包含<textarea> <select>等。

       <form>常用属性:

l      name:用于定义表单的名称

l      action:用于规定提交表单时向何处发送表单数据。

l      method:用于规定提交的方式。一般取值 POST或GET

关于POST与GET方式区别:

1.      get方式只能少量数据,而post可以携带大数据。

2.      get方式提交时,数据会在地址栏上显示,安全性差。Post方式提交不会在地址栏上显示数据,更加安全。

 

input种类

    <input>标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

关于<input>标签type属性值说明 :

text

<input type=”text”>

定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

其它常用属性:

l  name:定义标签名称

l  value:定义标签值

l  size:定义输入字段的长度

l  maxlength:定义可输入最大字符个数

password

<input type=”password”>

定义密码字段。该字段中的字符被掩码.

其它常用属性:

l  name:定义标签名称

l  value:定义标签值

l  size:定义输入字段的长度

l  maxlength:定义可输入最大字符个数

 

radio

<input type=”radio”>

定义单选按钮。

其它常用属性:

l  name:定义标签名称.注意,对于单选按钮,如果要想做到单一选择,多个radion的name值必一样。

l  value:定义标签值

l  checked:定义该标签默认被选中。

 

checkbox

<input type=”checkbox”>

定义复选框。

其它常用属性:

l  name:定义标签名称.注意,一组的checkbox它们的name值应该是一样的。

l  value:定义标签值

l  checked:定义该标签默认被选中。

 

button

<input type=”button”>

定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)

其它常用属性:

l  name:定义标签名称

l  value:按钮显示名称

 

hidden

<input type=”hidden”>

定义隐藏的输入字段。

其它常用属性:

l  name:定义标签名称

l  value:定义标签值

 

file

<input type=”file”>

定义输入字段和 "浏览"按钮,供文件上传。

其它常用属性:

l  name:定义标签名称

 

submit

<input type=”submit”>

定义提交按钮。提交按钮会把表单数据发送到服务器。

其它常用属性:

l  name:定义标签名称

l  value:按钮显示名称

 

reset

<input type=”reset”>

定义重置按钮。重置按钮会清除表单中的所有数据。

其它常用属性:

l  name:定义标签名称

l  value:按钮显示名称

 

image

<input type=”image”>

定义图像形式的提交按钮。

这个标签主要是用了替换submit按钮,因为默认产生的提交按钮并不漂亮,这个标签允许你采用指定的图片做为提交按钮。

其它常用属性:

l  name:定义标签名称

l  src:定义作为提交按钮显示的图像的url

l  alt:定义作用图像的替代文本。

 

select与option标签

 1.<select>

用于定义一个下拉列表

        常用属性:

l  name:定义下拉列表的名称

l  size:定义下拉列表中可见选项的数目

l  multiple:定义可选择多个选项

2.<option>

用于定义下拉列表中的选项。

<option>需要位于<select>标签内部

                  常用属性:

l  value:定义送往服务器的选项值

l  selected:定义选项为选中状态。

 

textarea标签

    <textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)

    常用属性:

l  name:定义多行文本框名称

l  cols:定义多行文本框可见宽度

l  rows:定义多行文本框可见行数

l  wrap:规定多行文本框中文字如何换行。

时间: 2024-09-15 10:14:59

HTML基础的相关文章

xcode-学习objective-c 基础教程遇到问题 例题03.06 word-length-3 编译出错

问题描述 学习objective-c 基础教程遇到问题 例题03.06 word-length-3 编译出错 #import int main(int argc, const char * argv[]) { FILE *wordFile = fopen ("/tmp/words.txt", "r"); char word[100]; while (fgets(*word,99,wordFile)) \这一行编译出现"Thread 1:EXC_BAD_AC

零基础如何自学UI设计?

  酸梅干超人:下面是我这几年经验的总结和思考,虽然我并不算是最出类拔萃的UI设计师,但也希望对新人有益. 第一点:学习准备--启蒙 学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知.在开始正式学习前,你需要花足够的经历去了解和查阅它的起源.发展.应用.未来.UI作为平面设计的一部分,再往上又从属与美术学这一大类.因此,首先要先去了解整个美术史的发展.从人类起源各个阶段中,美术经历了什么样的变化,在各自的时代发挥了什么作用,近代美术史又经历了哪些波折,平

.NET 2.0 基础类库中的范型——其他范型类

其他范型类.NET 2.0 基础类库对范型的应用当然并不仅限于范型集合和 Functional Programming.下面所列的范型类也都有其明确的设计目的和用途. Array在.NET 2.0中,Array 类扩充了对范型编程的支持.当然,Array类本身并不是范型类(出于兼容的考虑),而是提供了一系列支持范型的方法.除了前面提到的 Functional Programming 的支持外,Array 类还对以前很多基于 object 的方法提供了对应的范型版本,这样对值类型可以提高查找和排序

Grand Central Dispatch(GCD)编程基础

有过编程经验的人,基本都会接触到多线程这块. 在java中以及Android开发中,大量的后台运行,异步消息队列,基本都是运用了多线程来实现. 同样在,在ios移动开发和Android基本是很类似的一种模型. 但是很多时候,在应用开发中,我们会发现本身并没有自己编码去处理一些并发的事件,去开辟新的子线程等等. (虽然一般的调用sdk发起一个网络请求,系统都是会默认给你新起一个线程去处理的). 整个程序看上去基本就是在Main线程中执行. 确实也是这样的一种现象,因为我们基本都是在操作控件的布局,

Linux 系统应用编程——进程基础

一.Linux下多任务机制的介绍          Linux有一特性是多任务,多任务处理是指用户可以在同一时间内运行多个应用程序,每个正在执行的应用程序被称为一个任务.          多任务操作系统使用某种调度(shedule)策略(由内核来执行)支持多个任务并发执行.事实上,(单核)处理器在某一时刻只能执行一个任务.每个任务创建时被分配时间片(几十到上百毫秒),任务执行(占用CPU)时,时间片递减.操作系统会在当前任务的时间片用完时调度执行其他任务.由于任务会频繁地切换执行,因此给用户多

基础-关于Android在模拟器打开的首页跟在手机打开的首页不同

问题描述 关于Android在模拟器打开的首页跟在手机打开的首页不同 我是在网上下载一个别人已经写好的二维码扫描功能的项目,然后我在其基础上改变他的首页,然后在模拟器中能成功运行,并符合想象,可是一把apk拉到手机上安装时,又是原来的首页,有哪位大神能够帮忙解析一下吗? 解决方案 清除下浏览器缓存看看.二维码扫描是否正确.还有,对方网站是否根据ip判断的登录方式.

类别-Objective-C基础教程中一句话读不懂,求解!

问题描述 Objective-C基础教程中一句话读不懂,求解! 在第12章类别前边第一段中有:"当使用类方法stringWithFormatFor生成一个新类时,你新建的NSString类的子类无法返回." 解决方案 NSString实际上只是一个类簇的前台表示,因而无法为这样的类创建子类.在其他情况下,你也许可以创建子类但你使用的却是工具包或类库,因为又无法处理新类的对象.例如,当使用类方法stringWithFormatFor生成一个新的字符串时,你新建的NSString类的子类无

RESTful_基础知识

前言 本篇主要是RESTful的基础知识整理,主要是为了将要开始的Openstack架构主题做知识积累.理解好RESTful的设计思想无论是对学习Openstack架构还是Openstack Dashboard实现都是一件事半功倍的事情. RESTful REST(Representational State Transfer):是一种软件架构的设计风格,而不是一种标准.主要用于C/S架构的软件设计,也能很好的支持B/S架构,为软件设计提供了一组原则和约束条件,但这是原则和约束的条件均不具有标准

走上开放之路: ASP开发人员的J2EE基础(下)

相关文章:走上开放之路: ASP 开发人员的 J2EE 基础(上) ASP/COM 和 J2EE 应用程序模型 接下来研究不同的应用程序体系结构,您可以使用这些体系结构开发 J2EE 应用程序并将 其与相应的 ASP/COM 应用程序体系结构关联起来. 使用 Java Servlets 编程:基础知识 编写 Java Servlets 就可以对来自 URL 的请求进行可编程控制.典型的 servlet 调用 类似于以下步骤: 客户机向 Web 服务器发出请求,将 servlet 命名为 URL

Java多线程基础总结八:ReentrantReadWriteLock

说到ReentrantReadWriteLock,首先要做的是与ReentrantLock划清界限.它和后者都是单独的实现,彼此之间没有继承或实现的关系. 然后就是总结这个锁机制的特性了: (a).重入方面其内部的WriteLock可以获取ReadLock,但是反过来ReadLock想要获得WriteLock则永远都不要想. (b).WriteLock可以降级为ReadLock,顺序是:先获得WriteLock再获得ReadLock,然后释放WriteLock,这时候线程将保持Readlock的