常用HTML标签表(入门)和使用
| 标签样式 | 是否为void(空元素) | 作用 | 归属 |
|---|---|---|---|
| <html> | 否 | 标记HTML文件(浏览器读取的内容)的头和尾 | [HTML本体] |
| <head> | 否 | 标记头部(内部内容使用规范写法的话,内容不会显示在网页中) | [HTML本体] |
| <body> | 否 | 标记身体(网页内容部分) | [HTML本体] |
| <script> | 否 | 标记一个脚本区域 | 任何 |
| <style> | 否 | 标记一个样式设置区域 | <head> |
| <link> | 是 | 链接一个CSS | <head> |
| <title> | 否 | 创造网页标题(浏览器顶部或者说标签页部分显示的内容) | <head> |
| <meta> | 是 | 指定字符编码 | <head> |
| <h1> | 否 | 指定一个标题 | <body> |
| <h2> | 否 | 同<h1> | <body> |
| <p> | 否 | 指定一个段落 | <body> |
| <em> | 否 | 强调一个内容 | <body> |
| <ul> | 否 | 创造一个无序列表(没有序号) | <body> |
| <ol> | 否 | 创造一个有序列表( 有序号) | <body> |
| <li> | 否 | 创造一个列表元素(<ol>,<ul>的内容) | <ul/ol> |
| <a> | 否 | 创造一个链接 | <body> |
| <b> | 否 | 创造一个标题(比<h1>的字体粗) | <body> |
| <br> | 是 | 换行 | <body> |
| <hr> | 是 | 创造一个分割线 | <body> |
| <img> | 是 | 显示一张链接位置的图片 | <body> |
| <div> | 否 | 创造一个逻辑区 | <body> |
| <span> | 否 | 创造一个小逻辑区 | <body> |
| <table> | 否 | 创造一个表格 | <body> |
| <th> | 否 | 指定表格的表头 | <body> |
| <td> | 否 | 指定表格的其他行 | <body> |
| <tr> | 否 | 指定一个列 | <body> |
| <caption> | 否 | 指定表格标题 | <body> |
| <from> | 否 | 建立一个表单 | <body> |
| <input> | 是 | 创建一个文本框/按钮等交互工具 | <body> |
| <textarea> | 否 | 创建一个长文本区 | <body> |
| <select> | 否 | 创建一个表单 | <body> |
| <option> | 否 | 创建一个表单项 | <select> |
[这里会忽略一些基本的元素(不知道怎么用的还是放弃吧):<html>/<head>/<body>/<style>]
<script>
<script language="[脚本名称]" type="text/[脚本名称(仅JS)]">
<!--当使用在JavaScript时-->
<script language="JavaScript" type="text/JavaScipt"></script>
<!--当使用在PHP时-->
<script language="php"></script>
<!--拓展:php的另一种标记方式-->
<?php echo "就是这样...";?>
<link>
<link type="text/css" rel="stylesheet" src="[文件路径(css/...)]">;
<!--假设css文件存放在:css,文件名为:1.css-->
<link type="text/css" rel="stylesheet" src="css/1.css">
<title>
<title>[标题内容]</title>
<title>这是标题</title>
<meta>
[PS:这是前期可以用到的,要其他<meta>的使用,你需要看看别的!!]
meta charset="[字符编码]">
<!--如若使用中文写html,必须使用字符编码,否则会有火星文-->
<meta charset="utf-8">
<h1(h2)>
<h1|h2|...>这是页内标题</h1|h2|...>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>
<p>[段落内容]</p>
<p>这是段落<em>这是强调的文本</em> </p>
[<p>附属:<em>]
列表:<ul>/<ol>/<li>
<ul|ol><li>这是列表内容</li></ul|ol>
<!--无序列表-->
<ul>
<li>这是列表内容(也就是列表元素)</li>
</ul>
<!--有序列表-->
<ol>
<li>这是列表内容(也就是列表元素)</li>
</ol>
<a>
<a href="[文件路径/锚点id]" target="_black"[这是用来告诉处理器:跳转时另外建立标签页用的,可以不加] download="[下载文件名称(平常不需要使用,除非你想让用户点击后下载)]" title="[悬停在链接上弹出的字]">[链接显示内容]</a>
<!--情况1:普通链接,不用创建新标签页(设跳转的文件位置在:see,文件名为:index.html)-->
<a href="see/index.html" title="跳转到see/index.html">跳转</a>
<!--情况2:普通链接,需要创建新标签页(同上)-->
<a href="see/index.html" target="_black" title="跳转到see/index.html">跳转</a>
<!--情况3:下载链接(设下载的文件位置在:file,文件名为:xe.zip,下载文件名称为:压缩包.zip)-->
<a href="file/se.zip" download="压缩包.zip" title="下载 压缩包.zip">下载</a>
<!--情况4:锚点-->
<a href="#top" title="返回顶部">返回"top"部分</a>
<div id="top">首页</div>
注意,<a>不要忽略title元素,因为这是给用户增加体验用的;设置<a>的显示内容需要确切的告诉用户:这是用来跳转的!!!因为这是让盲人可以方便浏览网站的细节(细节决定成败)!
<b>
同<p>使用方法一致,不过功能是用来做粗标题(像上面的标题<b>)
实用的空元素-<br>/<hr>
<!--<br>和<hr>可以用于body的任何地方-->
<b>第一部分</b>
<p>-?-:9116:-?>2<<br>101010<p>
<hr><br>
<b>第二部分</b>
<p>申请调用 9116的二进制<br>42</p>
<!--这是虚拟文本,不过以后我可能会开发一个语言,参照这种语法也说不定哦-->
<img>
img src="[显示图片的路径(.jpg/.gif/...)]" alt="[图片描述]"
<!--假设我们要链接的图片位置是:images,文件名为:index_img.jpg-->
<ing src="images/index_img.jpg" alt="这是首页的图片">
注意<img>后面的alt,这可是为盲人和不了解图片的人存在的!
逻辑区:<span>/<span>
span和div没有好设置的。
不过在这里讲讲span和div的区别。
首先,div适用于大区块,而span适合多区块设置。
像这样:
<!--div-->
<div id="aa">
<p>这是一个段落</p>
<span>麦克</span> <span>无难不青春</span>
<span>杰森</span> <span>以法为器</span>
<span>小明</span> <span>我们是命运共同体</span>
</div>
如果说我们把span换成div,那么问题来了:太麻烦了。因为
div是适用大区块的。
因为在设置CSS的时候,我们可以采用伪类为span设置样式:上面就是一个例子。中间没有多余的<span>,可以使用上述的方法。
/*我想让演讲人变成红色,用30px大小的字体;把他们演讲的话题变成蓝色*/
span:ntn-child(2n){
font: 30px Verdana,Helvetice,Arial,sans-serif;
color: red;
}
span:ntn-child(2n+1){
font: 20px Verdana,Helvetice,Arial,sans-serif;
color: blue;
}
/*设n(任何数)为3,那么2n=6,得偶;2n+1=7,得奇*/
敲黑板,div是不能这样做的!
而且如果只是做一个鲜明的逻辑分区,<div>是不建议用太多的。
敲黑板,肯定有人会杠:“我用类不就好了吗?”其实呢,div是大逻辑区,不要把功能用混。如果是小网页的话还好,要是是那种需要长久使用还要维护的,这些细节才更要注意。
表格家族 <table>/<th>/<td>/<tr>/<caption>
[这个也没有好设置的,唯一要注意的是CSS(为了表示对新手的友好,我还是把大体代码挂出来吧)]
<table>
<caption>这是表格标题</caption>
<th>
<tr>这是表 头第一列</tr>
<tr>这是表 头第二列</tr>
</th>
<td>
<tr>这是第二行第一列</tr>
<tr>这是第二行第二列</tr>
</td>
</table>
至于CSS,可以套下面的模版:
/*有错记得在评论区挂出来!!谢谢!!*/
table {
margin: 0px 20px;
border: thin solid black;/*black可以改,这是边框颜色*/
caption-size: botton;/*这是表格标题存放的位置,这里指定了把标题放在表单下面*/
}
th,td {
border: thin dotted gray;
padding: 5px;
}
caption {
font-size: italic;
padding-top: 8px;
}
"重武器"表单 <from>/<input>/<select>-<option>
[<option>是<select>的下属元素]
<from action="[发送到路径的文件(PHP,Asp...)]" method="POST(GET)">
<input type="[交互类型]" id="[id名称]" value="[输出内容]">
<select> <option value="[输出内容]">[菜单中显示内容]</option> </select>
<textarea name="[名称,可以不理]" rows="[默认高度数(填数字)]" cols="[默认列宽数(填数字)]"> </textarea>
<input>的type类型
- type=“text”
- type=“subimit”
- type=“radio”
- type=“checkbox”
- type=“number”
- type=“date”
- type=“email”
- type=“tel”
- type=“url”
10.type=“button”
介绍
text:创建一个文本框(<taxtarea>可以让用户调节大小)
submit:创建一个提交按钮
radio:创建一个单选框
checkbox:创建一个复选框
number:创建一个数字选择框
date:创建一个日期输入控制组件
email:创建一个邮箱输入控制组件
tel:创建一个电话输入控制组件
url:创建一个链接输入组件
button:创建一个按钮
file:创建一个发送文件的控制组件
<!--radio需要有统一的name(value随需要输入)-->
<input type="radio" name="a" value="这是第一个选项">a<br>
<input type="radio" name="a" value="这是第二个选项">b<br>
<!--checkbox也需要有统一的name,不过可以多选-->
<input type="checkbox" name="b" value="这是第一个多选项">a<br>
<input type="checkbox" name="b" value="这是第二个多选项">b<br>
<!--button有多种使用方法,我更倾向onclick(创建一个JS函数)操作-->
<input type="button" id="btnGet" name="btnGet" onclick="load()">
<!--其他就只需要照着type来操作了-->
关于 <input>可用的 布尔值:
1.multple 表单多选
2.placeholder 文本提示(输入内容后消失)
3.required 强调输入值
4.checked 默认选择
text:placeholdar,required
select:multple
option:checked
如若有不妥,请在评论区说明。感谢您坚持不懈的观看和学习。祝您在这条路上有所作为！
扫一扫
5969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
