一、HTML
程序员文章站
2022-03-26 12:30:40
一、HTML结构 文档声明头： 网站配置： 标题标签： Title 二、头标签（head） head标签都放在头部分之间。这里面包含了：、<meta>、<link>，<style ......</div>
<div class="content">
<h1>一、html结构</h1>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
</body>
</html>
</pre>
</div>
<p>文档声明头： <!doctype html></p>
<p>网站配置： <meta charset="utf-8"></p>
<p>标题标签： <title>title</title></p>
<h1>二、头标签（head）</h1>
<blockquote>
<p>head标签都放在头部分之间。这里面包含了：<code><title>、</code><code><meta></code>、<code><link>，<style></code></p>
<ul>
<li>
<code><title></code>：指定整个网页的标题，在浏览器最上方显示。</li>
<li>
<code><meta></code>：提供有关页面的基本信息</li>
<li>
<code><link></code>：定义文档与外部资源的关系。</li>
<li><style>:定义内部样式表与网页的关系</li>
</ul>
</blockquote>
<p>http-equiv属性</p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;url=oeasys.cn">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--告诉ie浏览器以*模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="ie=edge">
</pre>
</div>
<p>name属性</p>
<blockquote>
<p>用于页面的关键字和描述，关键字可以有多个用 ‘,’号隔开</p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,it网站,developer,programmer,coder,geek,技术社区"> </pre>
</div>
<p> 告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。</p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。"></pre>
</div>
</blockquote>
<p>link<span style="font-family: 'courier new'; font-size: 12px;">定义文档与外部资源的关系</span>置图标</p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon">
</pre>
</div>
<p>链接导入css，css就是修饰标签的</p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><link rel="stylesheet" type="text/css" href=""/>
</pre>
</div>
<h1>三、body中的标签 </h1>
<div class="cnblogs_highlighter">
<pre class="brush: css;"> 分割线<hr>
换行<br>
空格 符号
<u>下划线</u>
<s>中划线</s>
<del>中心删除线</del>
上标<sup>8</sup>下标<sub>6</sub>
<h1>标题标签1</h1>
<h6>标题标签6</h6>
<div>块级标签</div>
<span>内联标签</span>
<!-- 显示文本段落的，不能包含容器标签 -->
<p>这是一个段落</p>
<p align="left">左对齐段落</p>
<p align="center">中对齐段落</p>
<p align="right">右对齐段落</p></pre>
</div>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><a href="http://www.baidu.com">百度一下</a>
<a href="#">跳转到顶部</a>
</pre>
</div>
<div class="cnblogs_highlighter">
<pre class="brush: css;"> <!-- src：链接的图片资源
alt：图片加载失败时显示的文本
不失真：单设置高度或宽度不会失真
-->
<img src="" alt="" width="">
</pre>
</div>
<blockquote>
<pre class="brush: css;">html中：<br> 1、行内标签：<br> （1）在一行内显示<br> （2）不能设置宽高<br> 行内块标签img input<br> （有行内的特点）（可以设置宽高）<br> 2、块级标签：<br> （1）独占一行<br> （2）可以设置宽高<br> 如果不设置宽高，默认的宽是父亲的100%，高度是内容的高度<br> 3、行内标签与块级标签的转换<br> display</pre>
</blockquote>
<h2>列表标签</h2>
<p> </p>
<p id="无序列表ul无序列表中的每一项是li">1、无序列表<code><ul></code>，无序列表中的每一项是<code><li></code></p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
</pre>
</div>
<blockquote>
<ul>
<li>
<code>type="属性值"</code>。属性值可以选： <code>disc</code>(实心原点，默认)，<code>square</code>(实心方点)，<code>circle</code>(空心圆)。</li>
</ul>
</blockquote>
<p><span style="font-size: 1.17em;"> </span></p>
<p id="有序列表ol里面的每一项是li">2、有序列表<code><ol></code>，里面的每一项是<code><li></code></p>
<p> </p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
</pre>
</div>
<blockquote>
<p> <code>type="属性值"</code>。属性值可以是：1(阿拉伯数字，默认)、a、a、i、i。结合<code>start</code>属性表示<code>从几开始</code>。</p>
</blockquote>
<p> </p>
<p> 3、定义列表<code><dl></code></p>
<blockquote>
<p>dt、dd只能在dl里面；dl里面只能有dt、dd。</p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><dl>
<dt>一</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dt>二</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl></pre>
</div>
</blockquote>
<p> dd是描述dt的</p>
<h2> 表格标签</h2>
<div class="cnblogs_highlighter">
<pre class="brush: css;"> <table border="" style="border-collapse:collapse;" cellspacing="" cellpadding="">
<!-- <tr>：行 -->
<!-- <th>：加粗的单元格。相当于<td> + <b> -->
<tr><th>header</th></tr>
<!-- <td>：单元格 -->
<tr><td>data</td></tr>
<!-- 如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
<caption>：表格的标题。使用时和tr标签并列-->
</table>
</pre>
</div>
<p> </p>
<blockquote>
<p><strong><code><table></code>的属性：</strong></p>
<ul><ul><ul>
<li>
<code>border</code>：边框。像素为单位。</li>
<li>
<code>style="border-collapse:collapse;"</code>：单元格的线和表格的边框线合并</li>
<li>
<code>width</code>：宽度。像素为单位。</li>
<li>
<code>height</code>：高度。像素为单位。</li>
<li>
<code>bordercolor</code>：表格的边框颜色。</li>
<li>
<code>align</code>：<strong>表格</strong>的水平对齐方式。属性值可以填：left right center。<br>注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<code><td></code>进行设置）</li>
<li>
<code>cellpadding</code>：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。<br>注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性<code>dir="rtl"</code>，那就指的是内容到右边那条线的距离。</li>
<li>
<code>cellspacing</code>：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0</li>
<li>
<code>bgcolor="#99cc66"</code>：表格的背景颜色。</li>
<li>
<code>background="路径src/..."</code>：背景图片。<br>背景图片的优先级大于背景颜色。</li>
</ul></ul></ul>
</blockquote>
<p> </p>
<blockquote>
<p> <code><tr></code>：行</p>
<p>一个表格就是一行一行组成的嘛。<br><strong>属性：</strong></p>
<ul>
<li>
<code>dir</code>：公有属性，设置这一行单元格内容的排列方式。可以取值：<code>ltr</code>：从左到右（left to right，默认），<code>rtl</code>：从右到左（right to left）</li>
<li>
<code>bgcolor</code>：设置这一行的单元格的背景色。<br>注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。</li>
<li>
<code>height</code>：一行的高度</li>
<li>
<code>align="center"</code>：一行的内容水平居中显示，取值：left、center、right</li>
<li>
<code>valign="center"</code>：一行的内容垂直居中，取值：top、middle、bottom</li>
</ul>
<p> <code><td></code>：单元格</p>
<p><strong>属性：</strong></p>
<ul>
<li>
<code>align</code>：内容的横向对齐方式。属性值可以填：left right center。<br>如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。</li>
<li>
<code>valign</code>：内容的纵向对齐方式。属性值可以填：top middle bottom</li>
<li>
<code>width</code>：绝对值或者相对值(%)</li>
<li>
<code>height</code>：单元格的高度</li>
<li>
<code>bgcolor</code>：设置这个单元格的背景色。</li>
<li>
<code>background</code>：设置这个单元格的背景图片。</li>
</ul>
<p> 单元格的合并</p>
<p>如果要将两个单元格合并，那肯定就要删掉一个单元格。<br>单元格的属性：</p>
<ul><ul><ul>
<li>
<code>colspan</code>：横向合并。例如<code>colspan="2"</code>表示当前单元格在水平方向上要占据两个单元格的位置。</li>
<li>
<code>rowspan</code>：纵向合并。例如<code>rowspan="2"</code>表示当前单元格在垂直方向上</li>
</ul></ul></ul>
<h3 id="caption表格的标题使用时和tr标签并列">
<code><caption></code>：表格的标题。使用时和<code>tr</code>标签并列</h3>
</blockquote>
<p> </p>
<h2>表单标签</h2>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><!-- method：表单数据的提交方式，一般取值：get(默认)和post(应用：登录注册，上传文件) -->
<form action="http://www.baidu.com/s" method="get">
<!-- 表单控件 -->
<!-- <input>：输入标签（文本框） -->
<input type="text" name="wd" id="" value="oeasys" />
<input type="submit" name="" id="" value="提交表单" />
</form>
</pre>
</div>
<blockquote>
<p> </p>
<p><strong>属性：</strong></p>
<ul>
<li>
<code>name</code>：表单的名称，用于js来操作或控制表单时使用；</li>
<li>
<code>id</code>：表单的名称，用于js来操作或控制表单时使用；</li>
<li>
<code>action</code>：指定表单数据的处理程序，一般是php，如：action=“login.php”</li>
<li>
<code>method</code>：表单数据的提交方式，一般取值：get(默认)和post</li>
</ul>
</blockquote>
<p> </p>
<h3 id="input输入标签文本框">
<code><input></code>：输入标签（文本框）</h3>
<div class="cnblogs_highlighter">
<pre class="brush: css;"><input type="text" />
</pre>
</div>
<blockquote>
<p> <strong>属性：</strong></p>
<ul><ul><ul>
<li>
<strong><code>type="属性值"</code></strong>：文本类型。属性值可以是：
<ul>
<li>
<code>text</code>（默认）</li>
<li>
<code>password</code>：密码类型</li>
<li>
<code>radio</code>：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。<br>）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。</li>
<li>
<code>checkbox</code>：多选按钮，名字相同的按钮作为一组进行选择。</li>
<li>
<code>checked</code>：将单选按钮或多选按钮默认处于选中状态。当<code><input></code>标签的<code>type="radio"</code>时，可以用这个属性。属性值也是checked，可以省略。</li>
<li>
<code>hidden</code>：隐藏框，在表单中包含不希望用户看见的信息</li>
<li>
<code>button</code>：普通按钮，结合js代码进行使用。</li>
<li>
<code>submit</code>：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。</li>
<li>
<code>reset</code>：重置按钮，清空当前表单的内容，并设置为最初的默认值</li>
<li>
<code>image</code>：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。</li>
<li>
<code>file</code>：文件选择框。<br>提示：如果要限制上传文件的类型，需要配合js来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。</li>
</ul>
</li>
<li>
<strong><code>value="内容"</code></strong>：文本框里的默认内容（已经被填好了的）</li>
<li>
<code>size="50"</code>：表示文本框内可以显示<strong>五十个字符</strong>。一个英文或一个中文都算一个字符。<br>注意<strong>size属性值的单位不是像素哦</strong>。</li>
<li>
<code>readonly</code>：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。<br>用了这个属性之后，在google浏览器中，光标点不进去；在ie浏览器中，光标可以点进去，但是文字不能编辑。</li>
<li>
<code>disabled</code>：文本框只读，不能编辑，光标点不进去。属性值可以不写。</li>
</ul></ul></ul>
</blockquote>
<p> </p>
<div class="cnblogs_highlighter">
<pre class="brush: css;"> <form action="" method="">
用户名：<input type="text" name="username" src="" /><br>
密码：<input type="password" name="userpawd" /><br>
邮箱：<input type="email"></inpuet><br>
电话：<input type="telf"><br>
网址：<input type="url" name="" id="" value="" /><br>
<!-- number只能输入数字包括小数点
max最大值
min最小值
value默认值-->
数量：<input type="number" max="90" min="20"><br>
<!-- 可以提供更人性化的输入体验，自带删除键x -->
请输入商品名称：<input type="search"><br>
范围：<input type="range" max="89" min="28" value="50" /><br>
颜色拾取：<input type="color" name="" id="" value="" /><br>
时间：<input type="time" name="" id="" value="" /><br>
日期：<input type="date"><br>
<!-- datetime只有苹果浏览器可以使用 -->
日期时间x：<input type="datetime" name="" id="" value="" /><br>
日期时间：<input type="datetime-local" name="" id="" value="" /><br>
月份：<input type="month" name="" id="" value="" /><br>
星期：<input type="week" name="" id="" value="" /><br>
<!-- 提交 -->
<input type="submit" id="" name="" />
</form>
</pre>
</div>
<p> </p>
<h3 id="select下拉列表标签">
<code><select></code>：下拉列表标签</h3>
<p><code><select></code>标签里面的每一项用<code><option></code>表示。select就是“选择”，option“选项”。</p>
<p>select标签和ul、ol、dl一样，都是组标签。</p>
<p><strong><code><select></code>标签的属性：</strong></p>
<ul>
<li>
<code>multiple</code>：可以对下拉列表中的选项进行多选。没有属性值。</li>
<li>
<code>size="3"</code>：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。</li>
</ul>
<p><strong><code><option></code>标签的属性：</strong></p>
<ul>
<li>
<code>selected</code>：预选中。没有属性值。</li>
</ul>
<div class="cnblogs_code" onclick="cnblogs_code_show('51b35393-6d26-4eef-9b15-39d6b048bfd4')">
<div id="cnblogs_code_open_51b35393-6d26-4eef-9b15-39d6b048bfd4" class="cnblogs_code_hide">
<pre class="brush: css;"> 1 <form>
2 <select>
3 <option>小学</option>
4 <option>初中</option>
5 <option>高中</option>
6 <option>大学</option>
7 <option selected="">研究生</option>
8 </select>
9 <br><br><br>
10
11 <select size="3">
12 <option>小学</option>
13 <option>初中</option>
14 <option>高中</option>
15 <option>大学</option>
16 <option>研究生</option>
17 </select>
18 <br><br><br>
19
20 <select multiple="">
21 <option>小学</option>
22 <option>初中</option>
23 <option selected="">高中</option>
24 <option selected="">大学</option>
25 <option>研究生</option>
26 </select>
27 <br><br><br>
28
29 </form></pre>
</div>
</div>
<p> </p>
<p> </p>
<p>其他</p>
<div class="cnblogs_code" onclick="cnblogs_code_show('b37dce8e-091f-4274-9ddb-aeef0f3926fa')">
<div id="cnblogs_code_open_b37dce8e-091f-4274-9ddb-aeef0f3926fa" class="cnblogs_code_hide">
<pre class="brush: css;"> <form id="myform" method="">
<!-- placeholder提示文本，提示占位
autofocus自动获取焦点
autocomplete:自动完成：on打开 off关闭-->
用户名：<input type="text" name="username" placeholder="请输入用户名" autofocus="" autocomplete="on" value="" /><br>
<!-- required必须输入，如果没有输入将会阻止当前的提交
pattern正则验证
-->
手机号：<input type="tel" required="" id="" value="" pattern="^(\+86)?\d{10}$" /><br>
<!-- multiple选择多个文件 -->
文件：<input type="file" name="photo" multiple="">
<!-- 提交 -->
<input type="submit" name="" id="" value="提交" />
</form>
<form action="">
专业：
<select>
<option value ="">前端</option>
<option value ="">java</option>
<option value ="">javascript</option>
<option value ="">csharp</option>
</select>
<br>
<br>
<br>
<br>
专业：
<input type="text" list="sub" name="" id="" value="" />
<datalist id="sub">
<!-- 创建选项值 -->
<option value ="前端移动开发" label="前景非常好"></option>
</datalist>
</form>
<form action="" method="">
用户名：<input type="text" name="username" id="" value="" /><br>
密码：<input type="password" name="userpwd"><br>
加密：<keygen>
<input type="submit" name="" id="" value="提交" />
</form>
<!-- 只能显示，不能修改 -->
<output>只能显示，不能修改</output>
<form action="" method="">
用户名：<input type="text" name="username" id="" value="" /><br>
密码：<input type="password" name="userpwd"><br>
加密：<keygen>
<input type="submit" name="" id="" value="提交" />
</form>
<!-- 只能显示，不能修改 -->
<output>只能显示，不能修改</output>
<!-- max最大值
value：当前进度值-->
<progress max="100" value=100""></porgress>
<!-- 度量器：衡量当前的进度值
high:规定的较高的值
low：规定的较低的值
max：最大值
min：最小值
value：当前度量值-->
<meter max="100" min="0" high="80" low="40" value="30"></meter></pre>
</div>
</div>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/336664.html">
SaltStack--快速入门 </a>
</p>
<p>
下一篇： <a href="/article/336666.html">
WCF系统内置绑定列表与系统绑定所支持的功能 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2095656.html" target="_blank" title="《古刹──姑苏游痕之一》王统照">
<h2>
《古刹──姑苏游痕之一》王统照 </h2>
</a>
</li>
<li>
<a href="/article/2095563.html" target="_blank" title="诸葛亮最初选定一位接班人，悉心培养二十年却英年早逝">
<h2>
诸葛亮最初选定一位接班人，悉心培养二十年却英年早逝 </h2>
</a>
</li>
<li>
<a href="/article/2095592.html" target="_blank" title="设计师必看:设计的一些重要好习惯汇总">
<h2>
设计师必看:设计的一些重要好习惯汇总 </h2>
</a>
</li>
<li>
<a href="/article/2095576.html" target="_blank" title="古代皇帝一般什么情况下会御驾亲征 难道皇帝就不怕遭遇不测吗">
<h2>
古代皇帝一般什么情况下会御驾亲征 难道皇帝就不怕遭遇不测吗 </h2>
</a>
</li>
<li>
<a href="/article/2095606.html" target="_blank" title="Authorware一个闪烁的倒计时的动画效果?">
<h2>
Authorware一个闪烁的倒计时的动画效果? </h2>
</a>
</li>
<li>
<a href="/article/2095524.html" target="_blank" title="在Python中使用CasperJS获取JS渲染生成的HTML内容的教程">
<h2>
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程 </h2>
</a>
</li>
<li>
<a href="/article/2095577.html" target="_blank" title="个人对网站经营到盈利思路感想与CEO一样">
<h2>
个人对网站经营到盈利思路感想与CEO一样 </h2>
</a>
</li>
<li>
<a href="/article/2095533.html" target="_blank" title="山阴公主的“变态”弟弟，集残暴与荒唐于一体的刘子业">
<h2>
山阴公主的“变态”弟弟，集残暴与荒唐于一体的刘子业 </h2>
</a>
</li>
<li>
<a href="/article/2095557.html" target="_blank" title="站长小心：大家注意这一个挂马的">
<h2>
站长小心：大家注意这一个挂马的 </h2>
</a>
</li>
<li>
<a href="/article/2095489.html" target="_blank" title="金门炮战台军战机情况如何？响尾蛇导弹第一次实战">
<h2>
金门炮战台军战机情况如何？响尾蛇导弹第一次实战 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>