HTML详细笔记

### HTML是什么

HTML(Hyper Text Markup Language): 超文本标记语言

超文本: 超级文本、超过文本(其中可以包含除了文本以外的其他数据,例如图片、音频、视频等各种格式)

标记:也叫标签、元素、节点等,就是用尖括号(<>)括起来的一组内容,例如:

```
<head> <body> <div> <span> <table>等
```

HTML是最基础的开发网页的语言。

HTML由W3C组织提供(CSS/xml)

关于HTML的细节:

(1)使用HTML开发的网页文件通常以 .htm或 .html 为后缀!

(2)使用HTML开发的网页文件由浏览器负责解析并显示(浏览器就是一个html解析器)

(3)HTML是文档的一种(txt/word/ppt/pdf等)

总结: HTML就是用于开发网页的一门语言!!

### HTML的结构

**1、案例:编写我的第一个HTML网页,并用浏览器打开**

新建一个txt文档,将后缀名改为.html,代码实现如下:

```html
<!DOCTYPE html>
<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
    	<h1>Hello CGB2003...</h1>
	</body>		
</html>
```

**2、HTML结构详解**

```
(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
	上面是html5.0的声明, 也是目前最常用的版本
(2)<html></html> 根标签, 用于包裹所有的网页内容(除了文档声明)
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放可视化的网页内容. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8" > 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.
```


### HTML语法(了解) 

**1、html标签** 

标签:也叫做标记、元素等,标签分为开始标签,例如:

```html
<head>、<body>
```

和结束标签,例如: 

```html
</head>、</body>
```

开始标签和结束标签之间还可以包含其他内容。

```html
<head>
	<titile>声明网页的标题</title>
    <meta charset="utf-8">
</head>
```

有些标签开始标签和结束标签之间没有内容要包裹,通常可以写成自闭标签,例如:

```html
<br/> <hr/> <input/> <img/> <link/>等
```

**2、html属性**

在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

```html
<div id="d1" class="c1" style="color:red;">这是一个div元素</div>
```

标签上可以声明多个属性,多个属性之间用空格分隔

标签上的属性的值可以使用单引号或者双引号引起来

```html
<meta charset="UTF-8" id="m1">
<meta charset='UTF-8' id='m1'>
```

**3、html注释**

格式: `<!-- 注释内容 -->`

注释的作用: (1)为代码添加解释说明

(2)将一些暂时不需要执行的代码注释

浏览器对于html注释中的内容不会解析,也不会显示!

**4、html空格和换行**

在浏览器中,多个连续的空白字符(空格、制表符tab、换行)会被浏览器显示为一个空格。那么:

如何在网页中做一个换行:可以使用 `<br/>` 标签做换行

如何在网页中做一个空格:可以使用`&nbsp;`或`&emsp;`做空格

补充: HTML中是不区分大小写的!

HTML中对语法要求非常不严格!(比如大小写混用,或者标签只有开始没有结束,或者标签的不合理嵌套),但是我们在书写HTML时要按照规范来写。

HTML标签
--------

### 图像标签

通过img标签可以在网页中插入一副图像

```html
<!-- 
	不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径
<img src="D:/JavaDevelop/WS_CGB2003_WEB/day05-htmlcss/WebContent/imgs/meinv.jpg"/>
 -->
<!-- 
	./: 表示当前目录(当前文件所在的目录),由于当前html在WebContent目录下
	因此 ./叫表示WebContent目录, 另外 ./ 可以省略!
	../: 表示当前目录的上一级目录里(也就是当前目录的父目录)
	../../: 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目录)
 -->
<img src="./imgs/meinv.jpg" width="50%"/>
<img src="./imgs/lpx.jpg"  width="50%"/>
```

其中src属性用于指定图片的路径(图片的路径不要是带盘符的绝对路径,推荐使用相对路径)

width属性用于指定图片的宽度

height属性用于指定图片的高度

### 超链接标签

超链接就是a标签,通过a标签可以在网页中创建指向另外一个文档的超链接

点击超链接可以跳转到另外一个网页(图片/下载路径等),示例:

```html
<!-- 跳转到本地的一个网页 -->
<a href="01-第一个网页.html">01-第一个网页.html</a>
<!-- 跳转到百度首页 -->
<a href="http://www.baidu.com">百度一下,你就不知道</a>
<br/>
<!-- 点击图片跳转到tmooc -->
<a target="_blank" href="http://www.tmooc.cn">
	<img alt="tmooc" src="imgs/tmooc.png" />
</a>
```

其中 href 属性用于指定点击超链接后将要跳转到的URL地址

target属性用于指定以何种方式打开超链接

_self:默认值, 表示在当前窗口中打开超链接

_blank:表示在新的窗口中打开超链接

### 表格标签

**1.案例:在网页中插入一个3*3的表格**

```html
<h1>案例:在网页中插入一个3*3的表格</h1>
<table><!-- 用于在网页中定义一个表格 -->
    <tr><!-- 用于定义一个表格行 -->
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>11</td><!-- 用于定义一个单元格 -->
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>
```
**在浏览器中显示效果如下:**

![image-20200315184602647](第二阶段讲义01.assets/image-20200315184602647.png)

**在head标签内添加如下内容:**

```html
<style>
    /* style标签内只能书写css注释和css代码 */
    table{
        border:*2px solid red; /* 为表格添加边框 */
        border-collapse: collapse; /* 设置边框合并 */
        background-color: pink; /* 为表格设置背景颜色 */
        width: 70%; /* 为表格设置宽度 */
        /* margin-left: 15%; */
        /* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
        margin-left: auto;
        margin-right: auto;
    }
    td,th{
        border:2px solid red; /* 为单元格添加边框 */
        border-collapse: *collapse*; /* 设置边框合并 */
        padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
    }
    h1{
        /* border: 2px solid blue; */
        text-align: *center*; /* 设置元素中的内容水平居中 */
    }
</style>
```

**再次刷新浏览器显示效果为:**

![](第二阶段讲义01.assets/1ddd002a483c10386ecb086b0a9d3cc3.png)

**2、表格标签介绍**

```
table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格(th中的文本默认居中,并且加粗)
```

**3、练习:使用表格标签在网页中生成一个表格,如下图:**

要求如下:

```
(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题
```

![](第二阶段讲义01.assets/9c1b6d984a6bbc1686b06afbe3f7c9eb.png)

### 表单标签

**1、表单的作用: 用于向服务器提交数据**

向服务器提交数据的两种方式:

**(1)通过表单向服务器提交数据**

![](第二阶段讲义01.assets/7ce4e5ec4aad8a37b48b07bf89e1fc81.png)

表单中可以包含表单项标签,在表单项中可以填写数据(比如用户名、密码等),填写完成后通过提交表单,可以将表单中的数据提交给相应的服务器。

**(2)通过超链接向服务器提交数据**

```html
http://www.baidu.com?username=张三&pwd=123&like=篮球

<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>
```

在地址栏URL地址的后面通过问号(?)可以拼接参数,参数可以有多个,多个参数之间用`&`分隔,参数还分为参数名(例如:username/pwd/like)以及参数值(例如:张三/123/篮球),在回车后访问百度服务器的同时,就可以将问号后面拼接的参数一并带给百度服务器。

**2、表单标签**

```html
<form action="url地址" method="提交方式"></form>
```

其中action属性用于**指定表单的提交地址,**例如,将action指向百度服务器,就意味着将来填写完表单后,提交表单将会把表单中的数据提交给百度服务器。

method="GET/POST" 属性是用于**指定表单的提交方式**,常用的就是GET和POST提交。

### 表单项标签

1、`input`元素:

(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

```html
<input type="text" name="username"/>
```

(2)密码输入框(比如:密码/确认密码等)
```html
<input type="password" name="pwd"/>
```
(3)单选框(比如:性别/部门等)
```html
<input type="radio" name="gender"/>男
```
(4)复选框/多选框(比如:爱好/岗位等)
```html
<input type="checkbox" name="like"/>
```
(5)普通按钮(比如:换一张图片)
```html
<input type="button" value="换一张"/>
```
普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为

(6)提交按钮(比如:提交/注册/登录)
```html
<input type="submit" value="提交/注册/登录"/>
```
提交按钮用于提交表单中的数据到服务器中!

2、`select、option`标签:

```html
<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>
```
select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置当前option选项默认被选中

3、`textarea`多行文本输入区域:

```html
<textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea>
```
cols属性: 用于设置文本输入框的列数(宽度)

rows属性: 用于设置文本输入框的行数(高度)

placeholder属性: 设置输入框中的提示消息!

### 表单细节问题

**1、提交表单时,表单中的数据为什么没有被提交?**

对于表单中的表单项标签,只要是需要向服务器提交数据,该表单项上必须添加name属性;如果表单项标签上没有name属性,在表单提交时,该项将会被忽略。例如:
```html
<input type="text" name="username"/>
<input type="password" name="psw"/>
```
**2、如何让多个单选框只能有一个被选中?**

要求多个单选框必须具有相同的name属性值,如果多个单选框name属性值相同,则说明是一个组的内容,一个组中的单选框只能选择其中的一个!
```html
<td>性别:</td>
<td>
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</td>
```
**3、为什么单选框、复选框选择某一项后提交的值都是on?**

因为单选框、复选框只能选择,不同于用户名、密码输入框,可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on),例如:
```html
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
```
**4、如何设置单选框或复选框默认选中某一项?**

可以在单选框或复选框标签上添加一个checked="checked"属性,就可以让当前单选框或复选框默认被选中。例如:
```html
<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球
```
**5、如何设置下拉选框默认选中某一项?**

在option标签上添加一个selected="selected"属性,可以让当前option选项默认被选中,例:
```html
<select name="city">
    <option>北京</option>
    <option>上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>
```
**6、下拉选框中option选项上的value属性的作用是什么?**

```html
<select name="city">
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option selected="selected">广州</option>
	<option>深圳</option>
</select>
```
如果某一个选项被选中,并且该选项上添加了value属性,在提交表单时,将会提交value属性的值。

如果某一个选项被选中,该选项上没有添加value属性,在提交表单时,将会提交标签中的内容

注册表单案例
------------
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {
	border: 2px solid red; /* 为表格添加边框 */
	border-collapse: collapse; /* 设置边框合并 */
	background-color: lightgrey; /* 为表格设置背景颜色 */
	/* margin-left: 15%; */
	/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
	margin-left: auto;
	margin-right: auto;
}

td, th {
	border: 2px solid red; /* 为单元格添加边框 */
	border-collapse: collapse; /* 设置边框合并 */
	padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}

h1 {
	/* border: 2px solid blue; */
	text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<body>
	<h1>欢迎注册</h1>
	<form action="#">
		<table>
			<tr>
				<!-- 用户名输入框 -->
				<td>用户名:</td>
				<td><input type="text" name="username" /></td>
			</tr>
			<tr>
				<!-- 密码输入框 -->
				<td>密码:</td>
				<td><input type="password" name="pwd" /></td>
			</tr>
			<tr>
				<!-- 性别单选框 -->
				<td>性别:</td>
				<td><input type="radio" checked="checked" name="gender"
					value="male" />男 <input type="radio" name="gender" value="female" />女
				</td>
			</tr>
			<tr>
				<!-- 爱好复选框/多选框 -->
				<td>爱好:</td>
				<td><input type="checkbox" name="like" value="basketball" />篮球
					<input type="checkbox" checked="checked" name="like"
					value="football" />足球 <input type="checkbox" name="like"
					value="volleyball" />排球</td>
			</tr>
			<tr>
				<!-- 城市下拉选框 -->
				<td>城市:</td>
				<td><select name="city">
						<option value="beijing">北京</option>
						<option value="shanghai">上海</option>
						<option selected="selected">广州</option>
						<option>深圳</option>
				</select></td>
			</tr>
			<tr>
				<!-- 自我描述 多行文本输入框 -->
				<td>自我描述:</td>
				<td><textarea name="description" cols="30" rows="5"
						placeholder="请输入描述信息..."></textarea></td>
			</tr>
			<tr>
				<!-- 提交按钮 -->
				<!-- colspan: 设置单元格横跨的列数 -->
				<td colspan="2" style="text-align: center;"><input
					type="submit" value="提交" /></td>
			</tr>
		</table>
	</form>
</body>
</html>
```

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值