前端学习之 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 css javascript
html 版本
html 和 xhtml 的区别
html 内容的语义化

<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、基本标签

标题标签

段落标签

换行标签

<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

HTML

1、简介

2、Html 基本网页结构

3、基本标签

4、特殊符号、注释

5、图片

6、链接

7、列表

无序列表

有序列表

定义列表

8、表格

9、表单

10、html5 新支持的表单标签

11、页面布局

12、内联框架 iframe

相关帖子

前端开发

HTML5 （第一章 HTML 基础）

认识 HTML

重绘和重排

移动前端开发——网页适配并响应不同的分辨率的设备

关于渐进学习的想法 -- 随手记

supermemo【知识树】【概念】和【链接】的作用和使用

欢迎来到这里！

前端学习之 HTML

HTML

1、简介

2、Html 基本网页结构

3、基本标签

4、 特殊符号、注释

5、图片

6、链接

7、列表

无序列表

有序列表

定义列表

8、表格

9、表单

10、html5 新支持的表单标签

11、页面布局

12、内联框架 iframe

相关帖子

前端开发

HTML5 （第一章 HTML 基础）

认识 HTML

重绘和重排

移动前端开发——网页适配并响应不同的分辨率的设备

关于渐进学习的想法 -- 随手记

supermemo【知识树】【概念】和【链接】的作用和使用

欢迎来到这里！

4、特殊符号、注释