【前端】html的8个常用标签

HTML

html

超文本链接(标记)语言

H5

HTML v5

get/post/delete/put ------ restful 网络规划

Web开发

结构+样式+动作

架构 + 装饰 + 交互(动作)

装饰做好了--> UI工程师

标签

文本相关

图片、图像、声音

导航

表格*

列表

表单标签*

布局标签

H5扩展

入门内容

页面构成 = 文字 图片 有时加上视频

可以修改页面内容


构建页面

标签 <>

标签类型

  1. 单标签(/可写 可不写)

    </x>
    

    图片

    < hr/ >

  2. 双标签

    <x> 文本内容 </x>

CSS -- 老早之前是标签+属性

文本标签

<h1>~<h6>
<p> </p>

xxx.html


hr标签


换行标签 br

br - - break(分隔) 放在行上,标签内。

<br/>

特殊符号

&符号

空格(英文)

&nbsp ; ------ 一个空格 不断行的空白

其他

HTML 原代码	显示结果	描述
&lt;	<	小于号或显示标记
&gt;	>	大于号或显示标记
&amp;	&	可用于显示其它特殊字符
&quot;	"	引号
&reg;	®	已注册
&copy;	©	版权
&trade;	™	商标
&ensp;	 	半个空白位
&emsp;	 	一个空白位
&nbsp;		不断行的空白


´	&acute;	©	&copy;	>	&gt;	µ	&micro;	®	&reg;
&	&amp;	°	&deg;	¡	&iexcl;		&nbsp;	>>	>>
¦	&brvbar;	÷	&divide;	¿	&iquest;	¬	&not;	§	&sect;
•	&bull;	½	&frac12;	<<	<<	¶	&para;	¨	&uml;
¸	&cedil;	¼	&frac14;	<	&lt;	±	&plusmn;	×	&times;
¢	&cent;	¾	&frac34;	¯	&macr;	"	&quot;	™	&trade;
€	&euro;	£	&pound;	¥	&yen;				
„	&bdquo;	...	...	·	&middot;	›	&rsaquo;	ª	&ordf;
ˆ	&circ;	"	"	---	&mdash;	'	'	º	&ordm;
†	&dagger;	‹	&lsaquo;	--	&ndash;	‚	&sbquo;	"	"
‡	&Dagger;	'	'	‰	&permil;	­	&shy;	˜	&tilde;
≈	&asymp;	⁄	&frasl;	←	&larr;	∂	&part;	♠	&spades;
∩	&cap;	≥	&ge;	≤	&le;	″	&Prime;	∑	&sum;
♣	&clubs;	↔	&harr;	◊	&loz;	′	&prime;	↑	&uarr;
↓	&darr;	♥	&hearts;	−	&minus;	∏	&prod;	‍	&zwj;
♦	&diams;	∞	&infin;	≠	&ne;	√	&radic;	‌	&zwnj;
≡	&equiv;	∫	&int;	‾	&oline;	→	&rarr;		
α	&alpha;	η	&eta;	μ	&mu;	π	&pi;	θ	&theta;
β	&beta;	γ	&gamma;	ν	&nu;	ψ	&psi;	υ	&upsilon;
χ	&chi;	ι	&iota;	ω	&omega;	ρ	&rho;	ξ	&xi;
δ	&delta;	κ	&kappa;	ο	&omicron;	σ	&sigma;	ζ	&zeta;
ε	&epsilon;	λ	&lambda;	φ	&phi;	τ	&tau;		
Α	&Alpha;	Η	&Eta;	Μ	&Mu;	Π	&Pi;	Θ	&Theta;
Β	&Beta;	Γ	&Gamma;	Ν	&Nu;	Ψ	&Psi;	Υ	&Upsilon;
Χ	&Chi;	Ι	&Iota;	Ω	&Omega;	Ρ	&Rho;	Ξ	&Xi;
Δ	&Delta;	Κ	&Kappa;	Ο	&Omicron;	Σ	&Sigma;	Ζ	&Zeta;
Ε	&Epsilon;	Λ	&Lambda;	Φ	&Phi;	Τ	&Tau;	ς	&sigmaf;

图片img

单标签


放入本地图片

注释快捷键:c + /

<!-- 注释内容-->

video视频标签

双标签

导航标签a标签

可以跳转.

表格标签

table,thread,tr(table row),th,tbody,td(table date),tfoot.

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签案例</title>
	</head>
	<body>
		<h1>表格标签</h1>
		<hr />
		
		<table border="1" width = 100% height = "200px">
	<!-- 		边框宽度默认是1 -->
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>专业</th>
					<th>学校</th>
					<th>图片</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>杨喻媚</th>
					<th>女</th>
					<th>18</th>
					<th>化学</th>
					<th>西北农林科技大学</th>
					<!-- 行扩容 -->
					<!-- 引入本地图片 =>""/'' -->
					<th rowspan="3"><img src="../img/yym.jpg" width="100%"height=300px /></th>
				</tr>
				
				<tr>
					<th>杨喻媚</th>
					<th>女</th>
					<th>18</th>
					<th>药学</th>
					<th>西北农林科技大学</th>
					<th>-</th>
				</tr>
				
				<tr>
					<th>杨喻媚</th>
					<th>女</th>
					<th>18</th>
					<th>药学</th>
					<th>西北农林科技大学</th>
					<th>-</th>
				</tr>
			</tbody>
			<tfoot>
				<!-- 列扩容------> -->
				<tr>
					<td colspan=""></td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

扩容正好相反 colspan

表单标签

可以跳转.



form

html 复制代码
<from action = "url地址">

</from>

button 按钮

html 复制代码
<button> 提交 </button>

input

按钮

html 复制代码
<imput type = "submit" />
html 复制代码
<from action = "https://www.bilibili.com/">

<button>跳转</button>
<input type = "submit" value = "提交按钮">

</from>
html 复制代码
						<tr>
							<td><label>入职日期:&nbsp;&nbsp;&nbsp;&nbsp;</label>
							</td>
							<td>
								<input type="date" />
							</td>
						</tr>
						<tr>
							<td><label>工作经验:&nbsp;&nbsp;&nbsp;&nbsp;</label>
							</td>
							<td>
								<input type="number" />
							</td>
						</tr>
						<tr>
							<td><label>工作照片:&nbsp;&nbsp;&nbsp;&nbsp;</label>
							</td>
							<td>
								<input type="file"  />
							</td>
						</tr>
						<tr>
							<td><label>自我介绍:&nbsp;&nbsp;&nbsp;&nbsp;</label>
							</td>
							<td>
								<textarea rows="5"></textarea>
							</td>
						</tr>
html 复制代码
		<form action="#">
			<fieldset>
				<legend>员工</legend>
				
				<table border='1' width='500px'>
					<tbody>
						<tr>
							<td>
								<label>用户名:&nbsp;</label>
							</td>
							<td>
								<input type="text" placeholder="用户名"/>
							</td>
						</tr>
						<tr>
							<td>
								<label>密码&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<input type="password" placeholder="密码"/>
							</td>
						</tr>
						<tr>
							<td>
								<label>性别&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<input type="radio" name="gender"/>男
								<input type="radio" name="gender"/>女
							</td>
						</tr>
						<tr>
							<td>
								<label>专业&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<select >
									<option >1</option>
									<option >2</option>
									<option >3</option>
									<option >4</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>
								<label>爱好&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<input type="checkbox" name="hobby"/>篮球
								<input type="checkbox" name="hobby"/>足球
								<input type="checkbox" name="hobby"/>跳绳
								<input type="checkbox" name="hobby"/>游戏
							</td>
						</tr>
						<tr>
							<td>
								<label>日期&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<input type="date" >
							</td>
						</tr>
						<tr>
							<td>
								<label>工龄&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<input type="number" />
							</td>
						</tr>
						<tr>
							<td>
								<label>照片&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<input type="file" />
							</td>
						</tr>
						<tr>
							<td>
								<label>简介&nbsp;&nbsp;&nbsp;:&nbsp;</label>
							</td>
							<td>
								<textarea rows="s"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
				
				<input type="submit" value="提交"/>
			</fieldset>
		</form>

HBuilder官网

准备工作

相关推荐
yngsqq10 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing44 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue