html常规写法

最新推荐文章于 2024-09-22 11:12:26 发布
最新推荐文章于 2024-09-22 11:12:26 发布
阅读量819 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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
关注
html格式标准写法,web前端HTML、CSS书写规范（必记）
weixin_34526937的博客
06-07 1881
1.规范目的：使开发流程规范化，代码简洁、美观。2.文件规范：文件名用英文单词，多个单词用驼峰命名法。例如：MaginLeft...一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。例如：ad、ads、adv、banner、sponsor、gg、guangg、guanggao等3.HTML书写规范：为每个HTML页面的第一行添加标准模式(standardmo...
css的各种浏览器兼容写法
Y0admin的博客
07-21 1386
这里我们不会去关注太多细节问题， 比如哪个css样式需要我们去兼容等，主要从4个方面讨论一下大的解决思路，分别是：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件。 CSS初始化 前端的小伙伴一定遇到过因为默认样式导致的错乱问题，而且每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化（覆盖默认样式）。相信很多朋友也都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0。 *{ margin: 0; padding:
【html】html写法
qq1518572311的博客
12-10 1426
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 &lt;html&gt; &lt;head&gt; &lt;h1&gt;head&lt;h1&gt; 标签title 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。 同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。 &lt;...
HTML入门教程（非常详细）_html的教程
最新发布
2401_87299595的博客
09-22 2063
属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：attr 表示属性名，value 表示属性值。属性值必须使用双引号" "或者单引号' '包围。注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。一个标签可以没有属性，也可以有一个或者多个属性。
Html书写规范
azhen5222的博客
11-07 146
#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基本写法
m0_58724783的博客
11-09 666
1. 框架集：结构化设计思想： 2. frameset不能放在body中 3.rows、cols分别实现将分框按照上下和左右结构来部署 4.如果需要和的target配合使用_parent，当框架集有两个以上层次的 5.必须要做框架分层 6列： 1. 2. 3. src属性 4.
html标准写法
weixin_30546189的博客
03-27 146
1 <!--doctype指定文档类型htm--> 3 <!doctype html> 4 <html> 5 <header> 6 <!--设置字符集 utf-8--> 7 <meta charset="utf-8"> 8 <style> 9 ...
详解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"可能是项目的...
从头学前端-36：HTML原生表单
一碗周
12-09 1228
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第三十六篇-《表单》 本系列文章在掘金首发，编写不易转载请获得允许 写在前面 本篇文章将来介绍HTML中原生表单的内容。 HTML表单主要作用你是用于收集不同类型的用户输入并与服务端进行交互。 HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指.
PHP的html实现xpath解析,php用xpath解析html的代码实例讲解
weixin_28792813的博客
03-10 788
php用xpath解析html的代码实例讲解实例1$xml = simplexml_load_file('https://forums.eveonline.com');$names = $xml->xpath("html/body/p/p/form/p/p/p/p/p[*]/p/p/table//tr/td[@class='topicViews']");foreach($names as $...
HTML规范及正确写法
07-05
HTML规范，写出优秀规范的HTML代码
html的写法规范,HTML代码写法规范
weixin_39947961的博客
06-03 398
HTML代码写法规范1.页面内码标识顺序llll页面标题_栏目名_频道名_山东教育资源网l……ll2.所有页面必须注明“Title”名称3. 中必须标明bgcolor 属性，无背景色时附值 “#ffffff”4.项尽量填入和之间l例： …5.对引号的用法l除特定标识的字符串外不得使用引号6.对16进制数的标识一定要加 “#“7.使用、等格式控制时需加注，但在标题列表结构中可以单独使用8.所有ht...
html书写规范
weixin_33975951的博客
03-27 187
2019独角兽企业重金招聘Python工程师标准>>> ...
***网Web前端开发规范(初稿)
01-16 203
这几天一直在梳理关于前端方面的开发规范，现在暂时梳理了HTML的开发规范，暂且放置于此！ 规范目的： 使开发流程更加规范化 文件命名规范：(需审批) 1.项目命名 全部采用小写方式， 以下划线分隔。 例：my_project_name 2.目录命名 参照项目命名规则； 有复数结构时，要采用复数命名法。 例：scripts, styles, images, dat...
html常规标签总结
在路上...Try Fly
02-23 1860
html中的标签： 超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。 html标签的大小写无关的，推荐使用小写。 特点： 1. 由尖括号包围的关键词，通常是成对出现的，比如<div>和</div> 2. 标签对中的第一个标签是开始标签，第二个标签是结束
HTML-常规标签
夜影鬼手的专栏
07-18 326
练习     123 清洁哈哈哈哈哈哈哈你好哈 456 　这不是西游记的任何章节，这是悟空的故事，彼时孙悟空（彭于晏 饰）还不是震撼天地的齐天大圣，他只是只桀傲不驯的猴子。天庭毁掉他的花果山以掌控众生命运，他便决心跟天庭对抗，毁掉一切戒律。在天庭，孙悟空遇到不能爱的阿紫（倪妮 饰），一生的宿敌杨戬（余文乐 饰），和思念昔日爱人阿月（郑爽 饰）的天蓬（欧豪
html推荐写法
Lgw_zuiyouxiu的博客
07-23 254
推荐写法 语法的宽松不是好事，只会带来混乱，推荐遵循以下书写规则 1、包含可选的html、head、body元素 有助于将页面内容与其他页面信息分离 2、双标记书写结束标记 3、标签全部小写 输入轻松，不会让人触目惊心 4、为属性加引号 没有引号的话，一个无效字符就会破坏整个页面 /* 老的浏览器可能不...
HTML样式与事件试题解析
选项a正确，因为用户可以通过CSS来个性化他们的页面，独立于浏览器的常规设置。然而，选项b错误，因为样式表是可以重用的，可以应用于多个文档，提高代码的复用性。选项c也是错误的，一个样式表可以链接到多个文档，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值