HTML

一、HTML 简介

Hyper Text Markup Language 超文本标记语言

超文本

包括文本、图片、音频、视频等等...
标记语言

是一门 独立的 语言
保存在以 .html 或者 .htm 结尾的文件中
不需要编译，运行在浏览器中，由浏览器的引擎进行解释和运行

关于浏览器引擎：

IE、Chrome（谷歌）、Firefox （火狐）、Safari (Mac )

不同浏览器对于同样的代码可能具有不同的解释方式

浏览器的兼容性问题

二、HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>HelloWorld</h1>
</body>
</html>

三、HTML语法

HTML 由一系列的标签组成

1、标签的语法

<标签名></标签名> 一对正反标签 或者 <标签名 /> 空标签

2、一个完整的标签

<标签名标签属性名="值" 标签属性名="值" > 标签内容 </标签名>

四、一个完整的HTML

<!--这是HTML注释方式-->
<!-- 
	HTML的文档声明 
	用于声明该文件的基本信息（HTML版本）
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	在当前主流浏览器版本下，该声明已经没有实际意义了
-->
<!DOCTYPE html>
<!-- 
	HTML文件的根标签
	一个HTMl 文件 有且仅有一个根标签
	这个根标签必须是html
-->
<html lang="en">
	<!-- 
		HTMl的头部
		用于声明HTML的基本属性
			包括
			1、字符集
			2、标题
			3、引入的css文件
			4、引入的js文件
	 -->
	<head>
		<!-- 用于声明字符集为UTF-8 
			该设置 并不是设置文件的字符集
			而是 告诉浏览器 用哪个字符集 识别文件内容
		-->
		<meta charset="utf-8" />
		<title>第一个HTML文件</title>
		安静的黑胡椒安静的黑胡椒安静的黑胡椒
	</head>

	<!-- 是HTML文件的正文
			真正在浏览器中显示的区域

		浏览器具有强大的  容错 和 纠错 能力
		即： HTML 语言语法要求不严格
			1、大小写不敏感
	-->
	<body>
		安静的黑胡椒
		<h1>安静的黑胡椒</h1>

		<!-- 以下写法仅仅用于解释 语法要求不严格
			实际开发中  禁止这样写
		 -->
		<H1>安静的黑胡椒</H1>
		<h1>安静的黑胡椒</H1>
		<h1>安静的黑胡椒<H1>
	</body>
</html>

浏览器中的内容

对原始HTML文档解析后的结果

五、HTML 常用标签

1、标题标签

从 h1 到 h6 表示六个级别的标题，从大到小

标题标签独占一行 --> 行级元素

<h1>111</h1>
aaaaaaa
<h2>111</h2>
<h3>111</h3>
<h4>111</h4>
<h5>111</h5>
<h6>111</h6>

2、HTML实体（entity）

在浏览器中输出一些特殊符号

当a=9时，6<a 并且 a>7 一定成立

实体名称	作用
>	>
<	<
	空格
©	©
&	&

具体详见W3School实体

3、几个常用空标签

标签	作用
br	换行
hr	水平线

4、格式化标签

所有字体样式标签，已经不建议使用，后期会由css替代

aaaaaa
<b>aaaaa</b>
<i>aaaaaa</i>
<u>aaaaaa</u>
CO<sub>2</sub>
4<sup>2</sup>
<del>aaaaa</del>
<pre>
	<!--预览标签，原样显示-->
</pre>
<center>
	无条件居中
</center>

5、块和段落标签

标签本身没有太多特性，作为容器使用

div

独占一行，行级元素（块级元素）
p（段落）

独占一行，行级元素（块级元素 block）
span

不独占一行，行内元素（inline）

6、图片标签

标签名

img
属性
1. src
  
  用于表示图片的地址
  
  相对路径、绝对路径、网络地址
2. alt
  
  当图片加载失败的时候，显示的文字
用法

<img src="assets/1.png" alt="" />
<hr>
<!-- 在文件系统中，坚决不使用 -->
<img src="D:\webSpace\01-html\assets\1.png" alt="">
<hr>
<img src="http://bbs.itany.com/data/attachment/block/73/73beb5f34c469a79e8f3fd320c7de1a6.jpg" alt="">
<!-- 当图片加载失败的时候，显示的文字 -->
<img src="http://bbs.itany.com/1.jpg" alt="图挂了">
<!--src 写  图片的 base64 编码-->
<img src="data:xxxxxxxxxxxxxxxxxxxxxxx" >

7、超链接

标签名

a
属性
1. href
  
  指定跳转路径
  
  可以是相对路径（另一个html文件）也可以是网络地址
  
  特殊值
```
# ---> 跳转到当前页面（不跳转） 但是浏览器地址栏上的地址末尾会追加一个#
javascript:void(0) ---> 真正意义上的什么也不做
#另外一个html标签的id属性的值  --> 锚记
```
2. target
  
  目标，以何种方式打开href对应的页面
  1. blank / _blank
    
    在新窗口打开页面
    
    blank：在新窗口打开，当要打开的窗口已经存在，显示并刷新该窗口
    
    _blank: 在新窗口打开，不论是否已经打开过
  2. _parent / IFRAME_NAME 了解
    
    配合iframe一起使用，
    
    在iframe中的a标签 target 为 _parent 时，在父页面打开连接。
    
    a标签 target 为 iframe标签 name 属性的值时，在iframe中打开连接。
用法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body id="bd">


	<a href="http://bbs.itany.com">跳转到论坛</a>
	<a href="04-img.html">跳转到04-img.html</a>
	<a href="#">跳转到#</a>
	<a href="javascript:void(0)">跳转到javascript:void(0)</a>
	
	<a href="#a">to a</a>
	<a href="#b">to b</a>
	<a href="#c">to c</a>

	<h1 id="a">aaaa</h1>
	<h1 id="b">bbbb</h1>
	<h1 id="c">cccc</h1>
	<a href="#" style="position: fixed;right: 10px;bottom: 10px">
		回到顶部
	</a>
  
  	<a href="http://bbs.itany.com" >没有target</a>
	<br>
  	<!--当要打开的窗口已经存在，显示并刷新该窗口-->
	<a href="http://bbs.itany.com" target="blank">blank</a>
	<br>
	<a href="http://bbs.itany.com" target="_blank">_blank</a>
	<!-- 制作图片链接 -->
  	<a href="">
  		<img src="">
  	</a>
</body>
</html>

8、列表

大多数情况下，用于网页的菜单导航

标签

ul > li

ol > li
ol的属性
1. type
  
  1 数字（默认值）
  
  a 小写字母
  
  A 大写字母
  
  i 小写罗马数字
  
  I 大写罗马数字
2. reversed
  
  倒叙
3. start
  
  从几开始编号
用法

<!-- ul>li 无序列表 -->
	<!-- ul>li{xxx$}*4 -->
	<ul>
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ul>
	<!-- ctrl + shift + d -->
	<!-- ol>li有序列表 -->
	<ol type="">
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>
	

	<ol type="I">
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>

	<ol type="i">
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>

	<ol type="A">
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>

	<ol type="a">
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>

	<ol type="1" >
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>
	
	<!-- 在HTML5 中 如果属性名等于属性值，可以省略等号以及等号右边的内容 -->
	<!-- <ol type="1" reversed="reversed"> -->
	<ol type="1" reversed>
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>
	
	<ol type="1" start="3">
		<li>xxx1</li>
		<li>xxx2</li>
		<li>xxx3</li>
		<li>xxx4</li>
	</ol>

9、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 表格标签 -->
	<!-- 
		表示一个表格 
			width: 表示表格的宽度  
					可以是数值（单位是像素  分辨率）
					也可以是 百分比 相对于 父容器
			height: 高度，用法和width 一致
			border:
					边框  值是数字  表示边框的宽度 
			cellspacing
				     单元格之间的距离
			cellpadding
					 单元格内部距离文字的空间
	-->
	<table width="100%" height="200" border="1" cellspacing="0" cellpadding="5">
		<!-- 表格标题  -->
		<caption>用户信息表</caption>
		<!-- 表头 : 该标签可以不写
			该标签表示表头，语义标签
		-->
		<thead>
			<!-- 一行 -->
			<tr>
				<!-- 一列、一个单元格 -->
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>


		<!-- 表格数据 -->
		<tbody>
			<tr>
				<td>1</td>
				<td>zs</td>
				<td>22</td>
				<td>m</td>
			</tr>
			<tr>
				<td>2</td>
				<td>ls</td>
				<td>33</td>
				<td>f</td>
			</tr>
			<tr>
				<td>3</td>
				<td>gblasdasdadsw</td>
				<td>44</td>
				<td>m</td>
			</tr>
		</tbody>


	</table>



	<h1>跨行、列</h1>
	
	<hr>

	<table
		border="1"
		width="100%"
		height="200"
		cellspacing="0"
		cellpadding="5"
	>
		
		<tr>
			<td>1-1</td>
			<td>1-2</td>
			<td>1-3</td>
			<td>1-4</td>
			<!-- 跨4行 -->
			<td rowspan="4">1-5</td>
		</tr>

		<tr>
			<td rowspan="3">2-1</td>
			<td>2-2</td>
			<td>2-3</td>
			<td>2-4</td>
		</tr>

		<tr>
			<td>3-1</td>
			<td>3-2</td>
			<td>3-3</td>
		</tr>
		<tr>
			<td>4-1</td>
			<td>4-2</td>
			<td>4-3</td>
		</tr>

		<tr>
			<!-- 跨5列 -->
			<td colspan="5">5-1</td>
		</tr>
	</table>
</body>
</html>

10、表单标签

0、注意

对于所有的表单组件，
    1、强烈建议都提供name属性（Servlet）
    2、提交到java代码中的值是value属性的值
    		2-1 所有需要用户输入的内容 输入的值就是value值
      		2-2 所有用户选择的内容  必须指定value属性的值

朗读并背诵全文

表单标签
一般情况下，所有的表单组件（组成表单的标签）
都放在form中（但是不是绝对的）
如果单独使用表单组件一定会配合 JavaScript 代码

1、表单标签

<!-- 
		form 标签属性
			action ： 表单提交地址
			method :  表单提交方式  get/post  99.999% 值为post
			enctype:  当出现文件上传的时候，需要设置该属性
					  值为 multipart/form-data   

	 -->
	<form action="#" method="post" >
	</form>

2、文本框

<!-- 
文本框 
    type:text  表示文本框
    placeholder： 当文本框中没有内容的时候的 提示消息
-->
<input type="text" id="username" name="username" placeholder="提示消息" value="老王" />

3、密码框

<input type="password" name="password">

4、单选按钮

<!-- 单选按钮
    必须制定相同的name属性值
    才构成一组单选按钮
    checked ： 默认选中
-->
<input id="sex_f" type="radio" name="sex" value="f" checked> 
<!-- 不改变文字样式
for 属性的值  是另一个表单组件的id的值
-->
<label for="sex_f">女</label>

<input id="sex_m" type="radio" name="sex" value="m"> 
<label for="sex_m">男</label>

5、复选框

<input type="checkbox" name="hobby" value="eat" id="eat">
<label for="eat">吃饭</label>
<input type="checkbox" name="hobby" value="sleep" id="sleep" checked>
<label for="sleep">睡觉</label>
<input type="checkbox" name="hobby" value="coding" id="coding">
<label for="coding">写bug</label>

6、数值框

<input type="number" />
<input type="number" min="4" max="22" />
<input type="number" min="4" max="22" step="4" />

7、电子邮件

<input type="email" />

8、范围

<input type="range" max="22" min="2" step="3">

9、日期

<input type="date">	
<input type="time">

10、文件选择器

<input type="file">

11、拾色器

<input type="color">

12、隐藏域

<input type="hidden" value=2>

13、只读

<input type="text" value="2323-fab3423-a4f5de" readonly>

14、下拉菜单

<label for="city">城市</label>
<select name="city">
  <!-- 下拉选项 value 是真正的值  
		正反option中间的内容 是给用户看的 -->
  <option value="-1">--请选择--</option>
  <option value="nj">南京</option>
  <!-- 默认选中项 -->
  <option value="bj" selected>北京</option>
  <option value="tj">天津</option>
</select>

15、文本域

<!-- 文本域 
  1.cols  列数
  2.rows  行数
  3.textarea 正反标签中间不能有空格 回车等等 
-->
<textarea name="" id="" cols="30" rows="10">哈哈</textarea>

16、几个按钮

提交按钮：默认行为： 提交表单
按钮上默认文字是提交，可以使用value 重置
<br>
  <input type="submit" >
  <input type="submit" value="注册">
  <button>我也是按钮，默认submit</button>
<br><br>

普通按钮，配合js使用，本身无效果
<button type="button">我也是按钮，设置为button</button>
<input type="button" value="abc">

<br><br>
<input type="reset" >
<input type="reset" value="重置按钮，会重置表单">

posted @ 2019-11-08 19:10 神里的雾切阅读(188) 评论(0) 收藏举报

刷新页面返回顶部

BUG征服者

HTML

HTML

一、HTML 简介

二、HelloWorld

三、HTML语法

1、标签的语法

2、一个完整的标签

四、一个完整的HTML

五、HTML 常用标签

1、标题标签

2、HTML实体（entity）

3、几个常用空标签

4、格式化标签

5、块和段落标签

6、图片标签

7、超链接

8、列表

9、表格标签

10、表单标签

0、注意

1、表单标签

2、文本框

3、密码框

4、单选按钮

5、复选框

6、数值框

7、电子邮件

8、范围

9、日期

10、文件选择器

11、拾色器

12、隐藏域

13、只读

14、下拉菜单

15、文本域

16、几个按钮

公告