html常规写法

最新推荐文章于 2022-11-09 09:46:49 发布
最新推荐文章于 2022-11-09 09:46:49 发布
阅读量853 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Dingqiang0424/article/details/73350704
文本标签的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本标签</title>
</head>

<body>
<!--标题标签-->
<h1 align="center">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="center">标题3</h3>

<hr color="#669999" />
<b>b标签</b><br />
<i>i标签</i><br />
<u>u标签</u><br />
<p>
第一段文字
</p>

<p>
第二段文字
</p>

<blockquote>
解释说明上述文字
</blockquote>

<hr />
y=x<sup>2</sup><br />
H<sub>2</sub>O<br />
CaCO<sub>3</sub><br />

<hr />
<pre>
   自动换行。

自动换行
</pre>

<!--编译字体颜色-->

<marquee behavior="slide" bgcolor="#FF0000" direction="down">刘备</marquee>

<bgsound  src="" loop="-1" />
<!--有序列表，按照ABCD顺序排列-->
<ol type="A">
 <li>章子怡</li>
 <li>刘亦菲</li>
 <li>贾玲</li>
</ol>

<hr />

<!--给名字前面加点-->
<ul type="circle">
 <li>章子怡</li>
 <li>刘亦菲</li>
 <li>贾玲</li>
</ul>

<hr />
<dl>
<dt>财务总监</dt>
<dd>财务专员1</dd>
<dd>财务专员2</dd>
<dd>财务专员3</dd>

<dt>技术总监</dt>
<dd>程序员1</dd>
<dd>程序员2</dd>
<dd>程序员3</dd>

</dl>

<hr />

<!--选择地域-->
<select>
<option>宁夏</option>
<option>山东</option>
<option>上海</option>
</select>

<hr />
<span>sapn标签</span>
<div>div标签</div>

</body>
</html>


超链接的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<!--
超链接标签：<a></a>
两个属性：href:设置这个超链接需要连接到的资源
                  target:设置打开资源的方式
       
超链接 ：默认的协议为file://
         
超链接的两个作用：
1：链接到想要连接的资源
2：打锚点<a name="锚点名称"></a>,想去哪里就给哪里打锚点
   如何去到锚点处：<a href="#锚点名称">去到锚点处</a>   
 
-->
<a name="top"></a>
<a href="http://www.baidu.com" target="_blank">超链接</a><br />
<a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a>
<a href="mailto:12345@qq.com">发送邮件</a>
<a href="#content1">第一章节</a>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<a name="content1"></a>
文本第一章
<a href="#top">回到顶部</a>

</body>
</html>

编辑图片的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片标签</title>
</head>
<!--
图片标签：img
图片标签的属性：
src:连接的图片的位置
width：图片的宽度
height:图片的高度
alt:提示文本，当src属性是小的时候，alt属性才生效
title:当鼠标放到这张图片上的时候，会给与一个文字提示

-->
<body>
<img src="b.jpg" alt="隋伯源" width="100" height="100" border="0" usemap="#Map" title="隋伯源"/>
<map name="Map" id="Map">
  <area shape="rect" coords="27,17,64,71" href="2.文本标签.html" target="_blank" />
  <area shape="circle" coords="84,22,11" href="3.超链接标签.html" target="_blank" />
</map>
</body>
</html>


转义字符的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1>标题1</h1>

<!--
使用转义字符将上述的内容展示在页面上
<    &lt;
>    &gt;
&    &amp;
空格  &nbsp;   西部    开源
商标  &reg;
版权  &copy;   给加多宝分别加上版权和商标
-->

&lt;h1&gt;标题1&lt;/h1&gt;<br/>
&amp;<br />
<hr />
西部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开源

<hr />
加多宝<sup>&reg;</sup>
<hr />
加多宝<sup>&copy;</sup>


</body>
</html>



编译表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
table:整张表就用一个table来表示
caption:表的标题
tr:代表表中的一行
td:表中的一个单元格
th:表头，一般用于加粗显示字段名称
border:table标签的一个属性，用来调整表框的宽度
width:调整表的宽度
height:调整表格的高度
align:调整表格的位置

行合并和列合并：
行合并：rowspan
列合并：colspan
-->
<body>
<table border="2" align="center" width="400" height="300">
<caption><h1>成绩统计表<h1></caption>

<tr align="center">
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>

<tr align="center">
<td rowspan="2">隋伯源</td>
<td>语文</td>
<td>90</td>
</tr>

<tr align="center">
<td>数学</td>
<td>60</td>
</tr>

<tr align="center">
<td>石明浩</td>
<td>语文</td>
<td>70</td>
</tr>

<tr align="center">
<td>韩卓成</td>
<td>语文</td>
<td>80</td>
</tr>

<tr align="center">
<td colspan="2">平均分</td>
<td>70</td>
</tr>

</table>

</body>
</html>

from表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
    <form>   就是一个表单
    <input type="text">  单行输入域
    <input type="password"/>  密码输入域
    <input type="radio"/> 单选按钮
    <input type="checkbox"/> 多选按钮
    <select/>  下拉选项
    <input type="hidden"/>   隐藏域，不会显示到html页面上，但可以携带数据。
    <input type="file"/>  文件选择器
    <textarea></textarea>  多行输入域
    <input type="submit"/>  提交按钮
    <input type="button"/> 普通按钮
    <input type="reset"/> 重置按钮
注意：
form表单里面有两个属性需要大家注意：
action="表单需要提交到哪个路径"
method=get/post

如果是get方式提交file:///C:/Users/Administrator/Desktop/8.form表单.html?username=jack&password=jack
之前的url路径?username=jack&password=jack,如果是get方式提交的话，我们的提交参数会被绑定在url路径中

如果post方式提交：我们的所有的提交参数会被封装在请求体中
-->
<body>
<form action="5.转义字符.html" method="post">
用户名:<input type="text" value="请输入用户名" name="username"/><br />
密码:<input type="password" name="password"/><br />
性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />
兴趣爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby"  value="乒乓球"/>乒乓球<br />
学历:
<select name="xueli">
<option value="benke">本科</option>
<option value="shuoshi">硕士</option>
<option value="boshi">博士</option>
</select><br />
<input type="hidden" /><br />
上传一张你的靓照:<input type="file" name="file"/><br />
请简单做一个自我介绍：<textarea rows="5" cols="10"></textarea><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>



表与from表单混合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table border="1" width="300" height="200" bgcolor="#FF0000" align="center">
<form action="8.form表单.html" method="get">
<tr>
<td>用户名</td>
<td><input type="text" name="username" value="请输入用户名" /></td>
</tr>

<tr>
<td>密码</td>
<td><input type="password"  name="password"/></td>
</tr>

<tr>
<td>性别</td>
<td><input type="radio" value="男" name="gender" />男<input type="radio" name="gender" value="女" />女</td>
</tr>

<tr>
<td>爱好</td>
<td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓"/>乒乓</td>
</tr>

<tr align="center">
<td colspan="2"><input type="submit" value="注册" /><input type="reset" value="重置" /></td>
</tr>

</form>
</table>

</body>
</html>






Dingqiang0424
关注
linux nginx/apache伪静态常见写法大全和转换
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
08-06 574
nginx写法。
从头学前端-36：HTML原生表单
一碗周
12-09 1276
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第三十六篇-《表单》 本系列文章在掘金首发，编写不易转载请获得允许 写在前面 本篇文章将来介绍HTML中原生表单的内容。 HTML表单主要作用你是用于收集不同类型的用户输入并与服务端进行交互。 HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指.
HTML规范及正确写法
07-05
HTML规范，写出优秀规范的HTML代码
【html】html写法
qq1518572311的博客
12-10 1461
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 &lt;html&gt; &lt;head&gt; &lt;h1&gt;head&lt;h1&gt; 标签title 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。 同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。 &lt;...
Html书写规范
azhen5222的博客
11-07 188
#cnblogs_post_body ol { padding-left: 0px; } body { line-height: 1.6; } body, th, td, button, input, select, textarea { font-family: \5fae\8f6f\96c5\9ed1,arial; _font-family: arial,\5...
HTML基本写法
南城猿的博客
11-09 700
1. 框架集：结构化设计思想： 2. frameset不能放在body中 3.rows、cols分别实现将分框按照上下和左右结构来部署 4.如果需要和的target配合使用_parent，当框架集有两个以上层次的 5.必须要做框架分层 6列： 1. 2. 3. src属性 4.
html标准写法
weixin_30546189的博客
03-27 170
1 <!--doctype指定文档类型htm--> 3 <!doctype html> 4 <html> 5 <header> 6 <!--设置字符集 utf-8--> 7 <meta charset="utf-8"> 8 <style> 9 ...
为什么有人把script写在html后面，这种写法是否正确，会造成什么影响
最新发布
07-23
我们讨论的是为什么有人把script标签放在HTML文档的后面，以及这种写法是否正确，会造成什么影响。 首先，我们需要了解浏览器解析HTML文档的过程： 1. 浏览器从上到下解析HTML文档，构建DOM树。 2. 当遇到script...
详解JavaScript的另类写法
11-22
在JavaScript中进行数值取整，除了常规的`Math.ceil()`和`Math.floor()`方法外，还有另类的取整方式。双波浪线`~~`和按位或运算符`|0`可以用来快速舍去小数部分，将数字转换为整数。例如，`~~1.23`和`1.23|0`都会...
insetos_fantasticos：不提供任何常规JavaScript脚本的ES6 da Origamid
02-13
" insetos_fantasticos：不提供任何常规JavaScript脚本的ES6 da Origamid" 这个标题暗示了我们正在探讨一个关于JavaScript ES6特性的项目，特别是与Origamid相关的教程或课程。"Insetos_fantasticos"可能是项目的...
html的写法规范,HTML代码写法规范
weixin_39947961的博客
06-03 429
HTML代码写法规范1.页面内码标识顺序llll页面标题_栏目名_频道名_山东教育资源网l……ll2.所有页面必须注明“Title”名称3. 中必须标明bgcolor 属性，无背景色时附值 “#ffffff”4.项尽量填入和之间l例： …5.对引号的用法l除特定标识的字符串外不得使用引号6.对16进制数的标识一定要加 “#“7.使用、等格式控制时需加注，但在标题列表结构中可以单独使用8.所有ht...
***网Web前端开发规范(初稿)
01-16 258
这几天一直在梳理关于前端方面的开发规范，现在暂时梳理了HTML的开发规范，暂且放置于此！ 规范目的： 使开发流程更加规范化 文件命名规范：(需审批) 1.项目命名 全部采用小写方式， 以下划线分隔。 例：my_project_name 2.目录命名 参照项目命名规则； 有复数结构时，要采用复数命名法。 例：scripts, styles, images, dat...
html书写规范
weixin_33975951的博客
03-27 209
2019独角兽企业重金招聘Python工程师标准>>> ...
html常规标签总结
在路上...Try Fly
02-23 1906
html中的标签： 超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。 html标签的大小写无关的，推荐使用小写。 特点： 1. 由尖括号包围的关键词，通常是成对出现的，比如<div>和</div> 2. 标签对中的第一个标签是开始标签，第二个标签是结束
html格式标准写法,web前端HTML、CSS书写规范（必记）
weixin_34526937的博客
06-07 1976
1.规范目的：使开发流程规范化，代码简洁、美观。2.文件规范：文件名用英文单词，多个单词用驼峰命名法。例如：MaginLeft...一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。例如：ad、ads、adv、banner、sponsor、gg、guangg、guanggao等3.HTML书写规范：为每个HTML页面的第一行添加标准模式(standardmo...
HTML-常规标签
夜影鬼手的专栏
07-18 353
练习     123 清洁哈哈哈哈哈哈哈你好哈 456 　这不是西游记的任何章节，这是悟空的故事，彼时孙悟空（彭于晏 饰）还不是震撼天地的齐天大圣，他只是只桀傲不驯的猴子。天庭毁掉他的花果山以掌控众生命运，他便决心跟天庭对抗，毁掉一切戒律。在天庭，孙悟空遇到不能爱的阿紫（倪妮 饰），一生的宿敌杨戬（余文乐 饰），和思念昔日爱人阿月（郑爽 饰）的天蓬（欧豪
html推荐写法
Lgw_zuiyouxiu的博客
07-23 276
推荐写法 语法的宽松不是好事，只会带来混乱，推荐遵循以下书写规则 1、包含可选的html、head、body元素 有助于将页面内容与其他页面信息分离 2、双标记书写结束标记 3、标签全部小写 输入轻松，不会让人触目惊心 4、为属性加引号 没有引号的话，一个无效字符就会破坏整个页面 /* 老的浏览器可能不...
HTML书写规范
denglangcheng82460的博客
05-07 129
HTML书写规范 1、文档声明 (1)XHTML1.0 过渡型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (2)HTML5 <!DOCTYPE ...
nginx conf常见写法
04-03
我需要结合这些引用，但用户的问题更偏向于常规的Nginx配置，所以可能需要适当关联。 接下来，我需要整理常见的Nginx配置实践。通常包括虚拟主机配置、负载均衡、SSL设置、静态文件处理、反向代理、日志管理、安全...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值