HTML简单语法总结

文章目录

HTML简单语法总结
- 文档结构
- 常用标签
- - 背景颜色和背景图片的插入
  - 标题
  - 字体字号
  - 特殊符号
  - 段落和换行
  - 图像的基本语法
  - 分隔线
  - 区域div
  - 列表的使用
  - - 有序列表
    - 无序列表
    - 自定义列表
  - 预格式文本
  - 超链
  - - 链接到其他页面
    - 链接到本页面
    - 电子邮箱链接
  - 滚动
  - 媒体元素
- 表的使用
- - 表的创建
  - 跨多行跨多列的表格
  - 设置表格的尺寸和边框
  - 设置表格的背景
  - 设置对齐方式
  - 设置表格的填充属性
- 表单的使用
- - 包含的控件
  - 基本结构
  - 统一格式
  - 文本框基本语法
  - 密码框基本语法
  - 复选框基本语法
  - 列表框基本语法
  - 按钮基本语法
  - 多行文本框的基本语法
  - 其他
- 框架
- - target目标窗口属性
- 页面结构分析

文档结构

<html>
<head>
<titel>网页标题</title>
</head>
<body>
主体
</body>
</heml>

常用标签

背景颜色和背景图片的插入

<body bgcolor="#FFCCFF" background="image.gif> //背景颜色和背景图片

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
......
......以此类推

字体字号

<font size="+2+ color="red" face="律书">
分别对应字体的大小值，字体的颜色，字体的类型。

特殊符号

空格         &nbsp；
引号(“”)      &quot；
小于(<)      &lt;
大于(>)      &gt;
版本号()     &copy;

段落和换行

<p align"center">内容</p>
center居中
left左对齐
right右对齐<br>
换行

不需要

图像的基本语法

<img align="middle" src="images/abc.jpg" title="图片标题" width="200" height="200" />

title使用鼠标移到图像上，出现提示性文字

分隔线

<hr size="5" color="red" width="30">
<hr size="10"color="#0000FF" width="50%">

区域div

<div alig="center"></div>

列表的使用

有序列表

<ol>
<li>第一</li>
<li>第二</li>
</ol>

无序列表

<ul type="circle">
<li>第一</li>
<li>第二</li>
</ul>

circle表示空心圆圈
disc表示实心圆圈
square表示实心方块

自定义列表

<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>

预格式文本

<pre>
图片和文本等等
</pre>

超链

链接到其他页面

<a href="register/abc.heml">链接标题</a>

链接到本页面

链接到锚标记：既实现跳转

<a href="#mname">锚标题</a>
<a name="mname">标记点</a>

电子邮箱链接

<a href="molto:abc@qq.com">abcqq邮箱</a>

滚动

<marquee scrilldelay="100" direction="up">内容</marquee>
分别对应滚动延迟时间和滚动方向鼠标停留则停止滚动
<marquee scrilldelay="100" direction="up" onmouseover="this.stop()" onmouseout="this.start()">内容</marquee>

默认为从左向右水平滚动

媒体元素

src：资源路径
controls：控制条
autoplay：自动播放

<video src="资源路径" controls autoplay></video>
<audio src="资源路径" controls autoplay></audio>

表的使用

表的创建

<table border="1">
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
<tr>
</tr>

tr表示行 td表示列

跨多行跨多列的表格

<td colspan="3"></td>
跨3列
<td rowspan="4"></td>
跨4行

设置表格的尺寸和边框

<table width="400" height="200" border="5" bordercolor="red">

颜色同样可以使用RGB颜色对照表

设置表格的背景

<table background="images/abc.jpg" width="400" height="200" border="5">

设置对齐方式

<td align="center"></td>
<td align="left"></td>
<td align="right"></td>

设置表格的填充属性

<table cellspacing="5" cellpadding"10" border="1"></table>

cellspacing单元格间距（表项间隙）
cellpadding单元格填充（表项内部空白）

表单的使用

包含的控件

text 单行文本输入
password 密码框
radio 单选按钮
checkbox 复选框
select 下拉列表
reset 重置按钮
submit 提交按钮
button 普通按钮，功能自定义
textarea 多行文本框
range为滑块
search为搜索框
file为文件域
email为邮箱验证
number为数字验证

基本结构

<form name="form1" action="http://www.baidu.com" method="post">

action指定提交后，由服务器上哪个处理程序处理action=“url”
method指定向服务器提交的放大：一般为post或get方法，post方法比较安全。
get方式提交信息，可以在url中看到我们提交的信息，但是信息量不能太大，太大会被截断。高效但不安全。

post比较安全，传输大文件

统一格式

<input type="checkbox" name="gen" value="男" size="21" maxlength=4 checked="checked">分别对应元素类型，控件名称，控件的初始值，控件的初始宽度，控件中输入的最多字符个数，控件是否被选中

文本框基本语法

<input type="text" value="abc" size="20">

字符宽度为20

密码框基本语法

<input value="123456" type="password" size="22">

复选框基本语法

<label>
<input type ="checkbox" name="abc" value="talk" checked="checked">
<lable>聊天

列表框基本语法

<select name="指定列表名称" size="行数">
<option value="可选项的值 0"selected>...</option>
<option value="可选项的值 0">...</option>
<option value="可选项的值 0">...</option>
...
</select>

eg:

<select name="bmon">
<option value=""selected>[选择月份]
<option value="0">一月</option>
<option value="1">二月</option>
...
</select>

按钮基本语法

<input type="reset" name="Reset" value="重置">
<input type="submit" name="Submit" value="提交">
<input type="button" name="concel" value="取消">

多行文本框的基本语法

<textarea name="textarea" cols="文本框的列数" rows="文本框的行数">内容</textarea>

其他

增加鼠标可用性
<lable for="mark">文本</lable>
<input type="text" id="mark">

验证性

<!-- 文本域 -->
<input type="file" name="files">
<!-- 邮件验证 -->
<input type="email" name="email">
<!-- url -->
<input type="url" name="url" >
<!-- 数字 -->
<input type="number" name="num" max="100" min="0" step="1">
<!-- 滑块 -->
<input type="range" name="voice" min="0" max="100" step="2">
<!-- 搜索框 -->
<input type="search" name="search" >

常用方式
placeholder 提示信息
required 非空判断
pattern 正则表达式

应用

隐藏域 hidden

只读 readonly

禁用 disabled

框架

<html>
<head>
<title></title>
</head>
<frameset rows="25%,50%,*" border="1">
<frame name="top" src="top.html">
<frame name="middle" src="middle.html">
<frame name="bottom" src="bottom.html">
</frameset>
</html>

可以使用嵌套的方式
可添加属性：

<frameset rows="20%,*" frameborder="0"><frame src="top.html" name="topframe" scrolling="no" noresuze="noresize"><frameset cols="20%,*"><frame src="left.html" name="leftframe" scrolling="no" noresize="noresize"><frame src="right.html" name="rightframe"></frameset>
</frameset>

frameborder="0"设置无框架边框
scrolling="no"不显示滚动条
noresize="noresize"禁止调整框架大小
name="topframe"框架名称，便于超文本链接锚标签target属性引用
也可使用iframe内联框架

target目标窗口属性

四个特殊窗口
1.target="_blank"
在新窗口中打开被链接的文档。
2.target="_self"
默认。在相同的框架中打开被链接文档。
3.target="_parent"
在父框架集中打开呗链接文档
4.target="_top"
在整个窗口中打开被链接文档

页面结构分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eVUOkWky-1620121316410)(C:\Users\Administrator\Pictures\123.png)]