html基本小结

来源：互联网发布：lua连接数据库编辑：程序博客网时间：2024/06/06 09:04

html：超文本标记语言

html的语言由标签组成

html中的数据都会封装在标签中，通过对标签中属性质的改变对数据进行操作

html代码范围：<html>

</html>

head：头标签，网页的一些属性值

body：体标签，网页的显示数据

内部闭合标签：<br/> <hr/> <img> <input/>

标签格式: <标签名属性名="属性值">显示内容</标签名>

<标签名属性名="属性值"/>

----------------------------------------------------------------------------------------------------------------

常用标签：

1.字体<font>

属性：size ， color

eg: <font size = "2" color ="#00ffff">所要修饰的字符</font>

2.h标签

一般用于标题，h1最大，依次减小，实际上是一个多字体属性的标签

3.特殊字符

如果要在页面实现一些特殊字符，需要进行转义

<: < >:> &:& 空格：&nbsp；

4.列表标签

(1). <dl>

<dd>下一层</dd> <dd>相对于<dt>多了一个自动缩进

<dl>

(2).项目符号标签

<ul>:圆点，方框

<ol>:1 , a , I ,A

这两个标签都由<li>进行封装

通过type属性更改标号

5.图像标签<img>

属性：src：链接一个位置

alt：图像说明文字

align：定义图片排列方式

border：设置图像的边框

图像地图<map>

选取图像某一部分作为超链接，需要与<img>结合使用

<map>

</map>

6.表格标签<table>

*表格由行(<tr>)组成，行由单元格(<td>/<th>)组成。没有直接列的概念

<table>

<tr>

<td>第一行第一个单元格内容</td>

<th>第一行第二个单元格内容</th> <th>相对于<td>多了加粗，居中效果

</tr>

</table>

属性：border：边框

bordercolor：表格颜色

width：表格宽度

cellpadding：单元格内边距

cellspacing：单元格之间的距离

*表格是最常用标签，用于对数据进行格式化

7.超链接<a>

属性：href：指定链接页面地址

打开的协议类型：http(网页），mailto(邮件），thunder(迅雷）

target：选择打开新页面或在本页面打开。取_blank则用新页面打开

title：标题说明内容

*点击链接，查找目的地址ip，先在本地，然后再公网。

超链接另一个作用：定位标记

<a>标签只有加入href属性才是能点击链接

8.表单标签 <form>

该标签用于和服务端进行交互

(1).input

输入标签，接受用户输入

标签类型：

1.text文本框：输入文本直接显示在框中

2.passsword密码框：输入文本以星号或圆点显示

3.radio单选框：要被选中必须要给单选框定义一个name

有多个单选框只能有一个被选中，则name值必须相同

4.checkbox复选框：当对多个数据进行同时选中时，使用。

5.file文件：用于上传文件，附件

6.hidden:隐藏组件，该组件不会在页面显示，但会和表单一起提交到服务端

7.button按钮组件：自定义按钮，通过注册添加事件，加入自定义效果

8.reset：重置按钮，将组件操作的效果还原到初始状态

9.submit：提交按钮，将组建中添加的数据提交到指定的目的地

10.image：图像组件，通过src属性连接一个图片点击完成提交

(2).下拉菜单select

每个select都由option进行封装

</select>

(3).文本区域textarea

一般用于留言板

(4).快捷键label

表单的组件需要定义name和value属性。因为要将数据发送给服务端

服务端只有知道了该name的值才能对提交的数据进行分别获取

*使用表单中的组件不一定要使用<form>,只有需要将数据进行服务端

的提交的时候才需要加上<form>

(9).一些头部标签

(1).base

属性:href:指定网络中所有超链接的目录（结尾用/表示目录）

target：打开链接的方式（_blank:链接用新页面打开）

一般用于更改后的链接导入

(2)<meta>

属性：name：描述网页内容，当取keyword时，content内容为索引关键字

eg：<meta name = "keyword" content="人才市场，的典范"/>

http-equiv:模拟http协议响应头，可用于刷新页面，或登录三秒跳转类似

eg： <meta http-equiv="refresh" content="3";url=http://baidu.com" />

刷新 3秒 3秒后跳转到

(3).<link>

属性：rel：描述目标文档与当前文档的关系

type：文档类型

media：指定使用设备

(10).Others

<pre>:将文字按代码区的样式显示在页面上

<br/>:换行

<p>:分段，空一行

<sub>:上标 <sup>:下标

<b> , <strong> :加粗 <u>:斜体 <i>:下划线

<marquee>:让内容动起来

属性： direction:left , right ,down , up

behavior:scroll ,alternate , slide

0 0