HTML简单语法总结

最新推荐文章于 2024-04-30 10:54:44 发布

望眼欲穿i

最新推荐文章于 2024-04-30 10:54:44 发布

阅读量313

点赞数

分类专栏： web 文章标签： html

本文链接：https://blog.csdn.net/qq_45775897/article/details/115862080

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML简单语法总结

文档结构

<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)]

望眼欲穿i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
HTML简单语法总结

HTML简单语法总结文章目录HTML简单语法总结文档结构常用标签背景颜色和背景图片的插入标题字体字号特殊符号段落和换行图像的基本语法分隔线列表的使用预格式文本超链链接到其他页面链接到本页面电子邮箱链接滚动表的使用表的创建跨多行跨多列的表格设置表格的尺寸和边框设置表格的背景设置对齐方式设置表格的填充属性表单的使用包含的控件基本结构统一格式文本框基本语法密码框基本语法复选框基本语法列表框基本语法按钮基本语法多行文本框的基本语法框架文档结构<html><head><tite
复制链接

扫一扫