前端学习之 HTML

HTML

1、简介

html: hyper text markup language ,超文本标记语言

HTML 1.0 - 1993-06

html2.0 - 1995-11

HTML 3.x - 1997-01

HTML 4.0 -1997-12

HTML 4.01 - 1999-12

HTML 5 - 2014-10

2、HTML 基本网页结构

格式: xxx.html(推荐) xxx.htm

doctype声明

不区分大小写,容错性很强

乱码问题: 英文和数字在任何编码格式下 都不会有乱码(正常显示的);其他的 都依赖于编码类型。

w3c 规定:标准写法有两种

​ < 标签 ></标签 >

​ < 标签 />

w3c 标准 :

<html>
	<!-- 声明式:不能显示 -->
	<head>
		<!-- 设置网页编码 -->
		<meta charset="utf-8" />
		<!-- 关键词: 是否能被搜索引擎搜到 -->
		<meta name="keywords" content="Java, HTML, CSS" />
		<!-- 描述:当搜到本网页时,展示的简介内容... -->
		<meta name="description" content="Java全栈学习之HTML" />
		<!-- 定义网页作者 -->
		<meta name="author" content="Lyon_Mu">
        <!-- 定义网站图标 -->
		<link rel="shortcut icon" href="./imgs/favicon.ico">
		<title>测试页面</title>
	</head>
	<!-- 能够显示的 -->
	<body>
		my context...
		我的内容
	</body>
</html>

3、基本标签

标题标签

<h1> ... <h6>

段落标签

<p> ..</p>

换行标签

<br/>

水平线<hr>

样式标签

​ 加粗<strong></strong> 或者<b> </b>

倾斜<em></em>

   <!-- 能够显示的 -->
   <body>
   	<p>11111111111111111...</p>
   	<p>2222222</p>
   	<h1>1级标题</h1>
   	<h2>2级标题</h2>
   	<h3>3级标题</h3>
   	<h4>4级标题</h4>
   	<h6>6级标题</h6>
   	<br /><br />
   	<hr />
   	hello world <br />
   	<strong>hello world</strong> <br />
   	hello <b>world</b> <br />
   	<em>hello</em><br />
   	<em><strong>world</strong></em> <br />
   	<strong>
   		<em>
   			world
   		</em>
   	</strong>
   </body>

4、 特殊符号、注释

注释

特殊符号 & ... ;

 		&nbsp;	 			空格
&		&amp;		&		and符号,与
“		&quot;		“		引号
©		&copy;		©		版权标志
®		&reg;		»		注册标志
™		&trade;		™		商标标志
“		&ldquo;		“		左双引号
”		&rdquo;		”		右双引号
‘		&lsquo;		‘		做单引号
’		&rsquo;		’		右单引号
«		&laquo;		«		左三角双引号
»		&raquo;		»		右三角双引号
‹		&lsaquo;	‹		左三角单引号
›		&rsaquo;	›		右三角单引号
§		&sect;		§		章节标志
¶		&para;		¶		段落标志
•		&bull;		•		列表圆点(大)
·		&middot;	·		列表圆点(中)
…		&hellip;	…		省略号
|	 				|		竖线
¦		&brvbar;	¦		断的竖线
–		&ndash;		–		短破折号
—		&mdash;		—		长破折号

5、图片

img

<dl>
	<dt>这是图片</dt>
		<dd>
			<img src="./imgs/th.jpg" width="150px" height="100px" />
		</dd>
</dl>

6、链接

普通超链接

锚链接

功能性链接: 邮件

顶部超链接

<p><a href="https://cn.bing.com/">必应搜索</a></p>
<p><a href="Anchor.html#myAnchor">进入Anchor页面</a></p>
<p><a href="mailto:lyonmu@foxmail.com">发送邮件,联系作者</a></p>
<p><a href="#top">返回顶部</a></p>

7、列表

无序列表

ul , li

ul 中的元素可以嵌套,li 中可以嵌套 ul

设置列表的标签符号 type="disc|circle|square"

<ul>
	<li type="circle">我的电脑</li>
	<ul>
		<li type="disc">cpan </li>
			<ul>
				<li type="square">xxx</li>
				<li>xxx</li>
			</ul>
			<li>Dpan </li>
	</ul>
</ul>
有序列表

ol , li

设置列表的标签顺序 type="1|a|A|i|I"

<li>水果</li>
	<ol type="1">
		<li>香蕉</li>
		<li>苹果</li>
		<li>西瓜</li>
	</ol>
<li>语言</li>
	<ol type="a">
		<li>C语言</li>
		<li>Java语言</li>
		<li>Python语言</li>
	</ol>
<li>电脑</li>
	<ol type="A">
		<li>Windows</li>
		<li>Linux</li>
		<li>Mac</li>
	</ol>
<li>企业</li>
	<ol type="i">
		<li>阿里巴巴</li>
		<li>字节跳动</li>
		<li>小米科技</li>
	</ol>
<li>课程</li>
	<ol type="I">
		<li>数据结构</li>
		<li>算法导论</li>
		<li>计算机网络技术</li>
	</ol>
定义列表
<dl>
    <dt>标题</dt>
    <dd>正文内容正文内容</dd>
</dl>

8、表格

<table border="1px">
	<!-- th表头 -->
	<th>8</th>
	<th>8</th>
	<th>8</th>
	<!--表格table,行tr  ,列 td -->
	<tr align="right">
		<td rowspan="2">1-1</td>
		<td colspan="2" align="center">a</td>
	</tr>
	<tr>
		<td valign="middle">2-2</td>
		<td>2-3</td>
	</tr>
	<tr>
		<td>3-1</td>
		<td>3-2</td>
		<td align="center">c</td>
	</tr>
</table>

水平移动 align="left|center|right"

垂直移动 valign="top|middle|bottom"

跨行 rowspan="n"

跨列 colspan="n"

9、表单

		<!--method:表单提交方式  get(地址栏显示参数值,默认) , post(不显示,推荐) 
						size: 文本框/密码显示的长度
						maxlength:实际能够输入内容的长度
					文件:2个一起写,
						input type="file"
						enctype="multipart/form-data"
						隐藏域:type="hidden"。前台不显示,但真实存在
		-->
		<form action="./Anchor.html" method="get" enctype="multipart/form-data">
			<!--表单元素的标注 -->
			<label for="shenyang">沈阳</label>
			<input type="checkbox" id="shenyang" />

			<!-- 语义化表单-->
			<fieldset>
				<legend>用户信息</legend>
				Helo<input />
				Helo<input />
			</fieldset>
			<br />
			<br />
			<br />

			<input type="file" name="file" />
			<input type="hidden" value="1">
			认证名:<input readonly="readonly" name="realname" value="穆清" type="text" /> <br />
			用户名:<input name="username" size="10" maxlength="4" value="穆清" type="text" /> <br />
			密码:<input name="password" size="2" type="password" /><br />
			兴趣爱好:<br />
			足球<input checked="checked" name="hobby" type="checkbox">
			篮球<input name="hobby" type="checkbox">
			乒乓球<input name="hobby" checked="checked" type="checkbox">
			<br />
			计划旅游的城市<br />
			西安<input name="city" type="checkbox">
			北京<input name="city" checked="checked" type="checkbox">
			上海<input name="city" type="checkbox">
			<br />
			性别:<br /><input name="sex" checked="checked" type="radio" /><input name="sex" type="radio" />
			<input value="注册" type="submit" />
			<input value="恢复默认值" type="reset" /><br />
			<input type="button" value="按钮" disabled="disabled" />
			<select>
				<option>西安</option>
				<option selected="selected">成都</option>
				<option>深圳</option>
			</select>
			<br />
			个人说明:<br />
			<textarea cols="30" rows="5">
							这是编写默认值的地方....
			</textarea>
		</form>

10、html5 新支持的表单标签

视频:

<video>:每一个<video>对应一个视频文件; 
    如果考虑浏览器兼容问题,则可以编写多个视频资源,然后嵌套在一个<video><!-- 
	<video src="./xxx.webm" controls ></video>
	<video src="./xxx.wvm" controls ></video>
	<video src="./xxx.mp4" controls ></video>
	-->
	<video controls >  
	<source src="./xxx.webm"  type="video/webm"/>
	<source src="./xxx.mp4" type="webm/mp4" />		
</video>	

音频:

<audio>

注意 type 问题:

一般而言,文件的后缀 就是 type,但个别不一致,如下

			<audio controls autoplay >
				<source src="./xxx.mp3" type="audio/mpeg" />
				<source src="./xxx.ogg" type="audio/ogg" />
			</audio>

html5 有很多标签自带正则校验

<form action="resources/b.html">
	用户名(必填):<input type="text"  required /><br/>
	电话(必填):<input type="text" required pattern="^1[358]\d{9}$" /> <br/>
	<!--type="email"会初步校验 内容是否为邮箱,如果不是 就会终止提交 -->
	邮箱(必填):<input type="email" required /><br/>
	请输入网址:<input type="url" /><br/>
	请输入数字:<input type="number" min="0" max="100" step="10"/><br/>
	数字滑块:<input type="range" min="0" max="100" step="10"/><br/>
	搜索:<input type="search" placeholder="请输入商品名" /><br/>
	<input type="submit" value="提交">
</form>

正则表达式:https://www.runoob.com/regexp/regexp-syntax.html

11、页面布局

<body>
		<header><h1>表示网页的头部 </h1></header>
		<section><h1>网页中的某一块区域</h1></section>
		<article>网页的文章</article>
		<aside>网页的侧边栏</aside>
		<nav>网页的导航</nav>
		<footer><h1>表示网页的底部</h1></footer>
</body>

12、内联框架 iframe

<a href="https://www.baidu.com"  target="my_iframe">点我进百度</a>
<a href="https://www.163.com"  target="my_iframe">点我进网易</a>
<a href="Anchor.html"  target="my_iframe">点我进Anchor.html</a>
---
<iframe src="https://www.baidu.com" name="my_iframe" width="1200px" height="500px"></iframe> <br/>
---
<br/>
<a href="https://www.baidu.com"  target="_self">点我进百度</a><br/>
<a href="https://www.baidu.com"  target="_self">点我进百度(在当前页面打开)</a>
<a href="https://www.baidu.com"  target="_blank">点我进百度(在新窗口中打开)</a>
<br/>
<iframe src="https://www.baidu.com" name="iframe1" width="1200px" height="500px"></iframe><br/>
<iframe src="https://www.163.com/" name="iframe2"></iframe><br/>
<iframe src="Anchor.html" name="iframe3"></iframe>	

a 标签的值: _blank:新打开一个窗口

_self:在当前页面打开(默认值)

iframe 的 name 值:把当前 a 的 href 值赋值给 iframe 的 src 值

  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    89 引用 • 284 回帖 • 86 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    125 引用 • 443 回帖

赞助商 我要投放

回帖
请输入回帖内容 ...