HTML简单了解-Web笔记(二)

Html介绍

1.     什么是html

全称:HyperText MarkupLanguage

译名:超文本标记语言

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

 

2.     Html和浏览器的关系

Web浏览器的作用是读取html文档,并以网页的形式显示它们。浏览器不会显示html中的标签,而是使用标签来解释页面上的内容。简单点说,浏览器是html的解释器,解释html文件,然后再浏览器窗口中展示解析后的页面。

 

3.     Html书写规范

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

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

         3)      HTML标签通常是成对出现的,例如<html>  </html>

         4)      成对出现的标签中第一个是开始标签,第二个是结束标签

         5)      绝大多数的标签都具有属性,属性值一般用引号引起。例如<body text=”red”>

         6)      大多数标签是可以嵌套的

         7)      HTML标签对大小写不敏感:<P>等同于<p>。(推荐使用小写标签,因为万维网联盟(W3C)在HTML4中推荐小写。)

4.     HTML的创建

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

HTML文件的基本架构

 

<html>

<head>

<title>网页的标题</title>

</head>

<body>

网页的内容,很多标签都作用在这里

</body>

</html>

 

5.     文件标签

          1) html标签

        整份文件处于标签<html></html>之间。

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

         html文件分文两部分,由<head></head>称为开头,<body></body>称为本文。

          2) head标签

          <head>用来加载一些重要的资讯,它的内容不会被显示,只有<body>的内容才会显示

          3) title标签

           <title>只能出现在<head>中,它代表的是标题。

         4) body标签

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

      常用属性:

text

用于设定文字颜色

backgroung

用于设定背景图片

bgcolor

用于设定背景颜色

        html中颜色取值有三种方式:

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

         2.     #000000 – #ffffff

           3.     颜色单词:red blue green

 

<html>

<head>

         <title>my first page</title>

</head>

<body text="red" bgcolor="black">

         my first html page!

</body>

</html>

 

6.     排版标签

         1.     注释

       在html中注释的写法:<!--注释的内容-->

         2.     p标签

         <p>标签是段落标签。作用:为字、画、表格等之间留一空白行。

         <p>标签本来成对使用,标于段落的头尾,但从html2.0开始已不需要</p>做结尾。

       常用属性

align

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

          3.     br标签

          br标签是换行标签。作用:令字、画、表格等显示于下一行。浏览器会自动忽略空白与换行,因此<br>标签称为我们最常用的标签。

          4.     hr标签

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

常用属性

align

设置水平对齐方式可选值left right center

size

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

width

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

color

设置水平线的颜色,默认为黑色。

          5.     关于html中数值单位

           html中的数值默认单位为像素(px

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

         例如:

            <hrsize=”3”>这个就代表水平线厚度为3px

             <hrwidth=”30%”>这个就代表水平线长度为总长度的30%

7.     块标签

             1.     div标签

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

             2.     span标签

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

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

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

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

8.     字体标签

              1.     font标签

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

            常用属性:

face

规定文本的字体

size

规定文本的大小

color

规定稳定的颜色

               2.     h1 – h6标签

               <h1> –<h6> 标签用来定义标题

               <h1> 最大标题

               <h6> 最小标题

9.     清单标签

                1.     ul标签

                <ul>标签表示的是一个无序清单

             常用属性

type

规定清单的项目符号类型,可选值discsquarecircle。默认值为disc

                2.     li标签

                 <li>标签表示的是一个清单项。<lu>创建清单,<li>表示清单中的每一项。

              常用属性

type

只是用<ul>,用于设定项目符号,默认值为disc

value

只是用<ol>,用于设定列表的项目数字

                 3.     ol标签

                 <ol>标签表示的是一个有序清单。

              常用属性

type

规定清单中使用的标记类型。可选值1 A a I i

start

规定列表是的起始值

10.  图形标签

            1.     img

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

          常用属性

scr

用于设定要引入的图片的url

alt

用于设定图片代替文字

width

用于设定图片的宽度

height

用于设定图片的高度

border

用于设定图片边框厚度

align

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

 

 

11.  链接标签

          1.     a标签

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

        常用属性

href

用于设定链接指向页面的url

name

用于设定锚的名称

target

用于设定在何处打开链接页面

 

 

 

12.  表格标签

          1.     table标签

         <table>标签用于定义表格

        常用属性

align

用于设定表格的对齐方式

bgcolor

用于设定表格的背景颜色

border

用于设定表格变框的宽度

width

用于设定表格的宽度

            2.     tr标签

            <tr>标签用于定于表格的行。

         常用属性

align

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

bgcolor

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

             3.     td标签

             <td>标签用于定义表格单元,该标签中的文本一般显示为正常字体且左对齐。

           常用属性

algin

用于设定单元格内容的对齐方式

bgcolor

用于设定单元格背景颜色

height

用于设定单元格的高度

width

用于设定单元格的宽度

colspan

用于设定列合并

rowspan

用于设定行合并

              4.     caption标签

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

13.  表单标签(重要)

              1.     form标签

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

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

常用属性

name

用于定义表单的名字

action

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

method

用于规定表单的提交方式。一般取值POSTGET

 

              POSTGET的区别

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

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

 

               2.     input标签

              <input>标签用于手机用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段,复选框,单选框,掩码后的文本框,按钮等。<input type=”text”name=”work” value=”username”>

 

input取值

取值后属性

作用

text

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

name

定义标签名

value

定义标签值

size

定义输入字段的长度

maxlength

定义可输入最大字符个数

password

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

name

定义标签名

value

定义标签值

size

定义输入字段的长度

maxlength

定义可输入最大字符个数

radio

定义单选按钮。

name

定义标签名

value

定义标签值

checked

定义该标签默认被选中

checkbox

定义复   选框。

name

定义标签名称,一组的checkbox应该一样

value

定义标签值

checked

定义该标签默认被选中

button

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

name

定义标签名

value

按钮显示名称

hidden

定义隐藏的输入字段。

name

定义标签名

value

定义标签值

file

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

name

定义标签名

submit

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

name

定义标签名

value

定义标签值

reset

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

name

定义标签名

value

按钮显示名称

image

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

name

定义标签名

src

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

alt

定义作用图像的替代文本

             3.     selectoption标签

             <select>标签用于定义一个下拉列表

           常用属性

name

定义下拉列表的名称

size

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

multiple

定义可选择多个选项

               <option>标签用于定义下拉列表中的选项<option>需要位于<select>标签内部

           常用属性

value

定义往服务器发送的选项值

selected

定义选项为被选中的状态

                4.     textarea标签

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

             常用属性

name

定义多行文本框名称

cols

定义多行文本框可见宽度

rows

定义多行文本框可见行数

wrap

规定多行文本框中文字如何换行

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值