常用的HTML标记整理
文章CSDN地址:https://blog.csdn.net/Ght1997...
文章GitHub地址:https://github.com/ght1997012...
文章segmentfault地址:https://segmentfault.com/a/11...
文章简书地址:https://www.jianshu.com/p/26b...
一、大体格式
<!Doctype html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">(记事本为gb2312)
<body>
</body>
</head>
</html>
二、
1.超链接标记
<a href="要访问的资源地址" target="_self默认本窗口覆盖显示/_blank新窗口显示/框架名-指定框架中显示" title="提示信息"></a>
邮件超链接:点击邮件超链接,会自动打开你电脑上邮件发送软件,将收件人地址自动填充(foxmail )
<a href="mailto:asdfs@asdf.com"></a>
锚链接(书签链接):
访问链接<a href="url#name"></a>
定义锚点:<a name="锚名"></a>
2.<br>
换行
3.
空格
4.<meta http-equiv="refresh"content="10">
refresh设定本网页自动刷新时间间隔秒数(10秒)
5.<meta http-equiv="refresh"content="10";url=http://www.baidu.com>
设定本网页十秒后跳转到其他界面或网页
6.网站前端三层 (x)html 结构层--html结构 css 表现层--决定html的样式 javascript 动作层--决定html如何交互
7.HTML基本语法:
<标记名 属性="值" 属性="值" ></标记名>
举例子:
<font color="red" size="7" face="隶书">
我是帅哥
</font>
8.标记的属性和标记不能分离
一说属性必须得说哪一个标记的属性,属性不能单独说
<font color="" face=" size="" ></font>
<p align=""></p>
9.HTML里面的注释
<!-- -->
说明:注释是给程序员看的
10.规范:
--标记和属性全部小写
--属性值必须加""
--双标记必须双着用
--单标记必须关闭 <img /> <input />
--标记只能嵌套不能交叉
11.文字标记
<font color="文字颜色" face="字体名称" size="1-7文字大小默认3"></font>
12.文字修饰标记
加粗 <b></b> <strong></strong>
倾斜 <i></i> <em></em>
下划线 <u></u>
删除线<del></del>
地址<address></address>
上标 <sup></sup>
下标 <sub></sub>
13.段落标记:一个p相当于一个回车换行,/p相当于一个回车换行
<p align="水平对齐方式left默认/center/right"></p>
14.横线:
<hr width="宽度" size="粗细" color="颜色" align="水平对齐方式left/center默认/right" noshade是否有阴影>
15.预格式化:保留源代码中空格,不忽略源代码中的空格
<pre></pre>
16.忽略HTML标记<xmp></xmp>
17.设置段落缩进<blockquote></blockquote>
18.
无序列表 ul
有序列表 ol
定义列表 dl
目录列表 dir
菜单列表 menu
无序列表
<ul type="disc/circle/square">
<li type="disc/circle/square">
</li>
</ul>
有序列表
<ol type="1/A/a/i/I" start="从第几项开始">
<li>
</li>
</ol>
定义列表:
<dl>
<dt>定义</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dd>解释3</dd>
<dt>定义</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dd>解释3</dd>
<dt>定义</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dd>解释3</dd>
</dl>
19.<img src="图片来源" alt="替换文本" title="全局属性每个标记都会有提示信息" align="图片水平对齐方式left默认/right-----top/middle/bottom图片后面文字的对齐方式" width="像素/百分比" height="像素/百分比">
说明:路径分为 相对路径(从当前文档开始)
绝对路径(从盘符开始)---不可能用
20.移动<marquee bgcolor="背景颜色" behavior="slide一次/scroll循环/alternate来回动" scrollamount="速度" scrolldelay="延迟" direction="移动方向left默认/right/up/down"/></marquee>
21.单元格<tr>行</tr><td>列</td>
<table border="表格边框" width="表格宽度" height="表格高度" bgcolor="背景颜色" background="表格背景图片"cellspacing="单元格之间的距离" cellpadding="单元格里边的内容距离边框的距离" align="表格对齐方式">
<tr align="单元格中水平对齐方式
left/center/right" valign="单元格中内容垂直对齐方式top/middle/bottom ">
<td colspan="跨列合并单元格" rowspan="跨行合并单元格"></td>
<td></td>
<td></td>
</tr>
<tr><td></td>
<td></td>
<td></td>
</tr>
</table>
22.框架集和框架
<frameset cois="竖着分割" rows="横着分割"/>
<frame name="框架的名字" src="连接的资源"/>
<frame name="框架的名字" src="链接的资源"/>
</frameset>
例子:<frameset rows="25,75/*">
<frame name=" " src=" "/>
</frameset>
浮动框架:讲一个独立的HTML页面嵌入到当前页面中
<iframe name=""src="" width="" height=""></iframe>
23.<form name="表单名称" action="数据提交到的地址/脚本/页面" method="get默认/post"></from>
※ method="get/post"
相同点:都是数据提交的方式,提交的数据是相同的
不同点:
①get原理 :数据和HTML文档的头部<head></head>信息一起提交
特点 :大小受到文档头部大小限制
数据附加到url?后面
②post原理:数据和HTML文档正文<body></body>之间信息一起提交
特点:大小没有限制
数据不会附加到url?后面
说明:什么是数据?答:数据是用户填写的或选择的表单项(信息)
表单项:表单里面的项目
输入元素:<input type="text默认"/>输入文本框
"password"密码框
"radio"单选按钮
"checkbox"复选框
"file"文件域
"image"图像域
"hidden"隐藏域
"button"按钮
"reset"重置
"submit"提交
<select></select> <textarea></textarea>
(1)输入文本框:<input type="text" name="" value="默认值" max-length="最大字符数" size="多少个字符的宽度" readonly只读 disabled禁用/>
(2)密码框:<input type="password" name="" max-length="" size="" readonly disabled/>
(3)单选按钮:单选按钮要是同一组的 那么name值相同;如果不同,name值不同。
<input type="radio" name="ri" value="">提示
<input type="radio" name="ri" value="">提示
(4)复选框:多选,name值相同也行,不同也行<input type="checkbox" name="" value="">
(5)文件域:<input type="file" name="">
(6)图像域:代替submit样子,如果你觉得submit不好看,那么你可以使用PS做一个图代替submit。<input type="image" src="">
(7)按钮:<input type="button" name="" value="按钮">
(8)重置按钮:将所有表单项重置为默认值而不是清空<input type="reset" name="" value="">
(9)提交按钮:点击提交按钮后浏览器自动将表单项数据发送给action所以所指地址<input type="submit" name="sub" value="">
(10)select标签;单选下拉菜单和多选列表
①单选下拉菜单:
<select name="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
②多选列表
<select name="" size="大小" multiple多选ctrl shift>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
(11)文本域:例如新浪微博,发表微博。百度贴吧,发布帖子
<textarea name="" cols="多少个字符宽度" rows="多少个字符高度"></textarea>
常用的HTML标记整理的更多相关文章
- (转)jvm具体gc算法介绍标记整理--标记清除算法
转自:https://www.cnblogs.com/ityouknow/p/5614961.html GC算法 垃圾收集器 概述 垃圾收集 Garbage Collection 通常被称为“GC”, ...
- Linux常用命令和快捷键整理:(1)常用命令
前言: Linux常用快捷键和基本命令整理,先上思维导图: 1.ls命令 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限(包括目录.文件夹.文件权限) ...
- CentOS最常用命令及快捷键整理
CentOS最常用命令及快捷键整理 整理了Linux常用命令及快捷键. 常用命令: 文件和目录: # cd /home 进入 '/home' 目录 # ...
- 常用的WinAPI函数整理
常用的WinAPI函数整理 一.进程 创建进程: CreateProcess("C:\\windows\\notepad.exe",0,0,0,0,0,0,0,&s ...
- JVM内存管理------GC算法精解(复制算法与标记/整理算法)
本次LZ和各位分享GC最后两种算法,复制算法以及标记/整理算法.上一章在讲解标记/清除算法时已经提到过,这两种算法都是在此基础上演化而来的,究竟这两种算法优化了之前标记/清除算法的哪些问题呢? 复制算 ...
- HTML的<body>标签详解与HTML常用的控制标记
一.<body>标签: 用于标记网页的主体,body 元素包含文档的所有内容(比如文本.超链接.图像.表格和列表等等.) 1.body标签中可用的属性: bgcolor="颜色值 ...
- <转>GC其他:引用标记-清除、复制、标记-整理的说明
注:本文根据<深入理解Java虚拟机>第3章部分内容整理而成. 对象死亡历程 1.基本的mark&sweep是必须的,后续的都是对他的改进, 2.young代理的survivor就 ...
- 常用的shell命令整理
工作快一年了,shell命令也玩了一年了.还是有点积累的,下面是本人常用的. 1.pwd | xargs -i basename {} 获取当前所在目录的名称 2.ps -ef|grep -w ...
- JVM垃圾收集算法(标记-清除、复制、标记-整理)
[JVM垃圾收集算法] 1)标记-清除算法: 标记阶段:先通过根节点,标记所有从根节点开始的对象,未被标记的为垃圾对象(错了吧?) 清除阶段:清除所有未被标记的对象 2)复制算法: 将原有的内存空间 ...
随机推荐
- [转帖]mysql.sock的作用
mysql.sock的作用 链接:http://blog.itpub.net/28602568/viewspace-1797619/ 标题:mysql.sock的作用 作者:lōττéry©版权所有[ ...
- mysql(5.6及以下)解析json
转自:https://blog.csdn.net/weixin_33979203/article/details/87621768 #json解析函数 DELIMITER $$ DROP FUNCTI ...
- vue 还原Data里面的数据
this.$data包含现有的data数据, this.$options.data()中是原有的data数据 还原代码 Object.assign(this.$data.searchForm, thi ...
- 似乎在梦中见过的样子 (KMP)
# 10047. 「一本通 2.2 练习 3」似乎在梦中见过的样子 [题目描述] 「Madoka,不要相信 QB!」伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Mo ...
- 03.AutoMapper 之反向映射与逆向扁平化(Reverse Mapping and Unflattening)
https://www.jianshu.com/p/d72400b337e0 AutoMapper现在支持更丰富的反向映射支持. 假设有以下实体: public class Order { publi ...
- CPU与GPU,我们应该使用哪个?
CPU与GPU,我们应该使用哪个? CPU与GPU CPU即中央处理器,GPU即图形处理器. 两者的相同之处:两者都有总线和外界联系,有自己的缓存体系,以及数字和逻辑运算单元 两者的区别之处:在于存在 ...
- Linux读写物理内存
一.基础知识 1.打开设备文件: mem是一个字符设备文件,是计算机主存的一个映像.通常只有root用户对其有读写权限.因此只有root用户能进行这些操作. 如果要打开设备文件/dev/mem,需要系 ...
- layui token 过期 重新登陆
这个方法你要全局设置 //jquery全局配置 $.ajaxSetup({ cache: false, crossDomain: true, headers :{' ...
- Android Studio的安装
下载Android Studio(需要翻墙才能安装得快):直接到官网进行下载就可以了.下载地址:https://developer.android.com/ “Android Virtual Devi ...
- canvas在图片上生成文字
newImage(text) { // 生成图片 var imageBox = document.getElementById(&quo ...