html常规写法

最新推荐文章于 2022-11-09 09:46:49 发布
原创 最新推荐文章于 2022-11-09 09:46:49 发布 · 853 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文本标签的写法

<!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 573
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 187
#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 1974
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
<think>好的，我现在需要帮用户解答关于Nginx配置文件常见写法的问题。首先，用户提到了系统级指令，要求使用中文回答，并且要生成相关问题，同时引用给定的参考资料。我需要确保回答结构清晰，分步骤说明，并且符合用户提到的格式要求，比如数学表达式用$...$，独立公式用$$...$$，不过这里可能用不上太多数学公式，但要注意LaTeX的正确使用。 首先，用户想了解Nginx配置的常见实践和例子。根据他们提供的引用，引用[1]提到了ngxtop，这可能与日志分析有关，而引用[2]是关于Ingress Controller的，可能涉及Kubernetes中的Nginx配置。我需要结合这些引用，但用户的问题更偏向于常规的Nginx配置，所以可能需要适当关联。 接下来，我需要整理常见的Nginx配置实践。通常包括虚拟主机配置、负载均衡、SSL设置、静态文件处理、反向代理、日志管理、安全加固等。此外，可能还需要提到性能优化，比如gzip压缩、缓存设置。这些部分需要分点说明，每个部分给出示例代码块，并引用相关部分。 例如，虚拟主机配置部分，可以展示server块的写法，监听端口和server_name的设置。然后静态文件服务部分，展示如何配置location块处理静态资源。反向代理部分，用proxy_pass的例子。负载均衡需要定义upstream，并在server块中引用。SSL配置需要证书路径和协议设置。安全方面可能包括隐藏版本号、限制访问等。日志管理可以提到access_log和error_log的配置，以及使用ngxtop分析日志，这里可以引用引用[1]。 同时，需要注意每个示例代码块的正确性，语法是否正确，比如结尾的分号，大括号的位置等。另外，用户可能对性能优化和安全措施特别感兴趣，因此需要详细说明这些部分，并给出实际例子。 生成的相关问题需要围绕用户可能进一步询问的方向，比如如何优化性能、安全最佳实践、负载均衡配置、SSL证书管理、日志分析工具等，结合提供的引用，可以提出关于Ingress Controller的使用（引用[2]）和日志分析工具ngxtop（引用[1]）的问题。 最后，检查是否符合所有系统级指令，特别是引用标识的正确添加，确保在提到日志分析时引用[^1]，在涉及Kubernetes或Ingress时引用[^2]。同时，保持回答结构清晰，分点明确，代码示例正确，语言简洁明了。</think>Nginx配置文件的常见写法遵循模块化设计原则，主要通过$server{}$块、$location{}$块和全局配置实现功能分层。以下为7个关键实践要点及示例： ### 一、虚拟主机基础配置 ```nginx server { listen 80; server_name example.com www.example.com; root /var/www/html; index index.html index.htm; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; } ``` 该配置定义了一个监听80端口的虚拟主机，通过$server_name$指定域名，$root$设置网站根目录 ### 二、静态文件服务优化 ```nginx location /static/ { alias /data/static/; expires 30d; add_header Cache-Control "public"; gzip on; gzip_types text/css application/javascript; } ``` 通过$expires$设置缓存时间，$gzip$启用压缩，可降低带宽消耗约40% ### 三、反向代理配置 ```nginx location /api/ { proxy_pass http://backend_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ``` 代理头设置确保后端服务能获取真实客户端信息 ### 四、负载均衡实现 ```nginx upstream backend { least_conn; server 10.0.0.1:8080 weight=3; server 10.0.0.2:8080; server 10.0.0.3:8080 backup; } server { location / { proxy_pass http://backend; } } ``` $least_conn$算法优先分配请求到连接数最少的节点，$backup$参数定义备用服务器 ### 五、SSL安全配置 ```nginx server { listen 443 ssl; ssl_certificate /etc/ssl/certs/example.com.crt; ssl_certificate_key /etc/ssl/private/example.com.key; ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers EECDH+AESGCM:EDH+AESGCM; # 强制HSTS add_header Strict-Transport-Security "max-age=63072000" always; } ``` 禁用旧版TLS协议，使用现代加密套件提升安全性 ### 六、访问控制 ```nginx location /admin/ { allow 192.168.1.0/24; deny all; auth_basic "Restricted Area"; auth_basic_user_file /etc/nginx/.htpasswd; } ``` 结合IP白名单和基础认证实现双重保护 ### 七、日志分析集成 通过配置$log_format$可生成结构化日志： ```nginx log_format json_analytics escape=json '{' '"time":"$time_iso8601",' '"host":"$host",' '"status":"$status",' '"request_time":"$request_time"' '}'; access_log /var/log/nginx/access.log json_analytics; ``` 这种格式便于使用ngxtop等工具进行实时流量分析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值