一、概述
1.概念:HTML:(HyperText Markup Language)超级文本标记语言
- 超文本:指页面内容可以包含图片、链接等非文字内容;
- 标记:指使用标签的方法将需要的内容包起来;
2.作用:HTML用于编写网页,显示数据;一般网页内容包括HTML、CSS、JavaScript等语言代码;
- HTML:显示;
- CSS:美化;
- JavaScript:交互;
3.特点:
- HTML文件不需要编译,直接使用浏览器阅读即可;
- HTML文件的扩展名是*.html (推荐)或 *.htm;
- HTML的标签:
1)标签是预定义好的,我们只要了解其功能,直接拿过来使用即可
2)标签的名字是不区分大小写的
3)通常情况下标签由开始标签< a >、结束标签< /a >组成,< a > Hello World < /a > 标签之间的文本叫做内容
4)如果没有内容,以/结尾,写成 < a/ > 自闭合标签 - HTML的元素:
元素指的是从开始标签到结束标签之间所有的代码 - HTML的属性:
属性用来修饰标签的 - HTML的注释:
html使用< !-- 内容-- > 进行注释 - HTML的语言设置:
< meta charset=“UTF-8” >
4.示例:
<html> // 只要是HTML网页,要求 必须有一个根标签HTML
<head> //head标签,叫头标签,保存网页中的最重要的信息,而且这些信息打开网页是开不见
<meta> //meta标签保存页面重要信息,编码,关键字等
<title> //title标签保存网页的标题
</head>
<body> //body标签保存网页主体内容
//...
</body>
</html>
二、基本元素
示例:
<html>
<head>
<meta charset = UTF-8>
</head>
<body>
<h2>AMD</h2>
<img src="file://C:/Users/Administrator/Pictures/temp/amd1.png"/>
<img src="http://how2j.cn/example.gif" title="猪猪" alt="显示的是一张图片"/>
<img src="./amd1.PNG"/>
<hr size = "1px">
<b><i> 加粗斜体 </i></b>
<ol type="1">
<li><a href="https://www.amd.com/zh-hans" target="_blank">介绍</a></li>
<li>代码</li>
</ol>
<ul type="circle">
<li>介绍</li>
<li>代码</li>
</ul>
<p>AMD表示,这款处理器是世界上第一款7nm主流CPU,也将成为世界上第一款支持PCI-E 4.0 X16的主流CPU。</p>
新处理器由两块芯片封装而成:<br>
<p>一块为台积电制造的7nm 8核心芯片,另一块为前女友GlobalFoundries制造的14nm I/O芯片,集成了双通道内存控制器和PCI-E通道等外围电路。</p>
<del>过期内容已删除</del>
<pre>
public class HelloWorld {
...
}
</pre>
<table border="2px" align="center" bgcolor="#7fffd4" width="1280" >
<tr align="center">
<td>RX Vega 系列</td>
<td>RX 500 系列</td>
<td>RX 400 系列</td>
</tr>
<tr align="center">
<td>RX VEGA 64</td>
<td>RX 580</td>
<td>RX 480</td>
</tr>
<tr align="center">
<td rowspan="2">RX VEGA 56</td>
<td>RX 570</td>
<td>RX 470</td>
</tr>
<tr align="center">
<td>RX 560</td>
<td>RX 460</td>
</tr>
</table>
</body>
</html>
1.标题标签< h1 >-< h6 >
标题为粗体并且自动换行,使用< h1 > 到 < h6 > 表示由大到小的标题;
2. 水平线标签 < hr >
属性 size:水平线的高度
属性 noshade:设置纯色效果
属性 width:设置宽度
3. 字体标签< font >
属性size:字体大小 有值1-7, 其中7最大
属性color:字体颜色,颜色有两种表示 a.英文单词 b.#RGB #ff0000
属性face:设置字体,比如微软雅黑,宋体
4. 换行标签< br >
换行:< br >
5. 段落标签< p >
段落:< p >,特点:自动换行,上下留白
6.粗体标签< b > / < strong >
第一种方式< b > :b是bold的缩写,仅仅表示该文本是粗体的,并不暗示这段文字的重要性;
第二种方式< strong > :strong虽然也是粗体,但是更多的是强调语义上的加重,提醒用户该文本的重要性,推荐使用strong;
7.斜体标签< i > / < em >
第一种方式< i > :i是italic的缩写,仅仅表示该文本是斜体的,并不暗示这段文字的重要性;
第二种方式< em > :em 是 Emphasized的缩写,虽然也是斜体,但是更多的是强调语义上的加重,提醒用户该文本的重要性;
8.删除效果标签< del >
< del >即删除标签 :delete的缩写;
9.预格式标签< PRE >
需要在网页上显示代码的时候使用< PRE >;
10.图像标签< img >
10.1 路径格式:< img src=“路径”/ >
10.2 绝对路径:
- 引用网站地址: < img src=“http://how2j.cn/example.gif”/ >
- 引用本地地址: < img src=“file://C:/Users/Administrator/Pictures/temp/amd1.png”/ >
10.3 相对路径:
两种路径格式: - ./表示本文件夹 < img src="./amd1.PNG"/ >
- …/上一层文件夹
10.4 属性:
- 属性width:图片宽度,可以使用像素,也可以百分比
- 属性height:图片高度,可以使用像素,也可以百分比
- 不要同时设置宽度和高度都使用百分比,图片会等比例放大或者缩小,否则会失真
- 属性atl:图片显示有问题时的代替文本
- 属性title:鼠标移动到图片上面时显示的文字
11.列表标签 < ul > < ol >
< ul >:无序列表(unordered)
< ol >:有序列表(ordered)
列表标签想要显示必须有列表项标签< li >
属性type:
ol中type的取值: 1(默认的) a A i I
ul中type的取值: circle(空心圆点) disc(小黑点,默认的) square(小方点)
12.超链接标签< a >
- 属性href: 表示点击后跳转的页面
- 属性target:表示点击后网页的打开位置
值:_self 在本页面直接打开
_blank 在新页面打开
framename 指定的框架打开
13. 表格标签< table >
子标签:< tr > 表示行标签
子标签:< td >表示行中的单元格
-
table标签的属性:
border:边框的粗细,像素单位 px
align:水平对齐方式,有左对齐left 、右对齐right 、中间对齐center
width:宽度,像素单位px
bgcolor:设置整个表格的背景色,tr和td也有bgcolor -
align属性
用在table上表示整个表格的对齐方式
用在tr上表示行中所有单元格内容的对齐方式
用在td上表示某一个单元格内容的对齐方式 -
< td >:合并单元格的属性
rowspan: 跨行合并,属性具体的值表示跨几行
colspan:跨列合并,属性具体的值表示跨几列
14. < div > 和< span >
这两种标签都是布局用的,这种标签本身没有任何显示效果,通常是用来结合css进行页面布局;
二、表单元素
1.表单标签< FORM >
< form >用于向服务器提交数据;
- 属性:method
值:get或post
get和post的区别:
get是form默认的提交方式,如果通过一个超链访问某个地址(get方式),如果在地址栏直接输入某个地址(get方式),提交数据会在浏览器显示出来,不可以用于提交二进制数据,比如上传文件;
post 必须在form上通过 method="post"显示,指定提交数据不会在浏览器显示出来,可以用于提交二进制数据,比如上传文件;
- 属性action:定义一个 URL,当点击提交按钮时,向这个 URL 发送数据。
2.输入域标签< input >
-
type属性:
1)text(默认):文本输入域,显示的文本内容(20个字符)
2)password:密码输入框,显示的是*号代替文本
3)radio:单选框
4)checkbox:复选框
5)button:普通按钮,不具备提交form的效果
6)reset:重置按钮,可以把输入框的改动复原
7)submit:提交按钮,用于提交form,把数据提交到服务端
8)image:图片按钮,使用图像作为按钮进行form的提交
9)hidden:隐藏域,数据会提交,但是页面上看不见
10)file:文件上传组件 -
name属性:
1)命名标签;
2)分组就是设置name属性相同:多个单选框,都在一个分组里,同一时间,只能选中一个单选框;
3)标签的name属性进行赋值的才能提交数据; -
value属性:
1) 给按钮上的文字赋值;
2) 当标签是单选框或者复选框,那么每一个选项必须有value值,否则提交时的值都是on; -
注意:
< input > 标签很特别,一般是不需要写成< input / >或者< input >< /input > 这样,并且 这样的写法也是满足标准的;
3.文本域标签< textarea >
文本域可以有多行,并且可以有滚动条
- 属性cols:设置高度
- 属性rows:设置宽度
4.下拉列表标签< SELECT >
需要配合< option >使用
5.按钮标签 < BUTTON >
< button >< /button >即按钮标签与< input type=“button” >不同的是,< button >标签功能更为丰富,按钮标签里的内容可以是文字也可以是图像,如果button的type=“submit” ,那么它就具备提交form的功能;
6.标签的显示默认值设置
type=text:标签的默认值通过value属性设置
type=passowrd:标签的默认值通过value属性设置
type=radio:标签的默认值通过checked属性设置 checked=checked"" 或者 checked=“true” 或者 checked
type=checkbox:标签的默认值通过checked属性设置 checked=checked"" 或者 checked=“true” 或者 checked
< textarea >:标签的默认值就是写在开始和结束标签之间的内容
< select >:标签的默认值在子标签option中加上selected=“selected” 或者 selected
7. 注册界面的简单设计(HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
账号:<input type="text" name="user" placeholder="请输入用户名"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
确认密码:<input type="password" name="confirm" placeholder="请再次输入密码"><br>
Email: <input type="text" name="email" placeholder="请输入邮箱"><br>
真实姓名:<input type="text" name="realname"><br>
男:<input type="radio" name="sex" value="boy" checked="checked">
女:<input type="radio" name="sex" value="girl"><br>
生日:
<select name="birth">
<option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option>
</select> 年
<select name="year">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
</select>月
<select>
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>
</select>日<br>
手机:<input type="text" name="phone"><br>
个人签名:<textarea rows="2" cols="50"></textarea><br>
<input type="reset" value="重置信息">
<input type="submit" value="提交"><br>
</form>
</body>
</html>