1,HTML入门
HTML介绍
目标
知道什么是HTML
路径
1. 什么是html
2. html可以做什么讲解
什么是html
超⽂本标记语⾔ ( H yper T ext M arkup L anguage) ，标准通⽤ 标记语⾔下的⼀个应⽤。 HTML 不是⼀种编程语⾔，⽽是⼀种 标记语⾔，是⽹⻚制作所必备的。 超⽂本标记语⾔：功能⽐⽂本强⼤ , 就是指⻚⾯内可以包含图 ⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。 超⽂本标记语⾔ : 语法由标签组成 学习 HTML 的核⼼是标签html可以做什么
设计⻚⾯,做⽹⻚
⼩结
1. 什么是 HTML? 超⽂本标记语法 2. 标记语⾔ 设计⻚⾯ , 做⽹⻚HTML结构和基本语法
⽬标
掌握HTML的结构和基本语法
路径
1. HTML的结构
2. HTML语法规范
3. 标签属性讲解
HTML的结构
⽂档结构介绍： ⽂档声明：⽤于声明当前 HTML 的版本，这⾥的 <!DOCTYPE html>是 HTML5 的声明 html 根标签：除⽂档声明以外，其它内容全部要放在根 标签html 内部 ⽂档头部配置： head 标签，是当前⻚⾯的配置信息， 外部引⼊⽂件, 例如⽹⻚标签、字符集等 ⽂档显示内容： body 标签，⾥边的内容会显示到浏览 器⻚⾯上
HTML语法规范
扩展名是 html 或者 htm html 标签不区分⼤⼩写<p>........</p>
<p>........</p>
--------
<p>........</p>
<p>........</p><p id="1">hello</p>
<br/>标签属性
武器 ( 标签 ) 属性 ( 标签属性 ) 攻击之⽖ +6 点攻击⼒ 倚天剑 +50 点攻击⼒ 15% 暴击 属性是属于标签的，修饰标签，让标签有更多的效果 属性⼀般定义在起始标签⾥⾯。
<font color='red'>hello</font>⼩结
HTML结构
<html>
<head></head>
<body></body>
</html>HTML快速⼊⻔
需求
使⽤ HTML 展示 hello sz85... 字体颜⾊为红⾊步骤
1. 创建⼯程 2. 创建 HTML 3. 定义 font 标签 4. 设置 font 标签的 color 属性为 red实现
使⽤idea创建static web项⽬
File -> new -> Module
选择
static web
设置Module的名称
创建html⽂件
在 static web 项⽬上右键 -> New -> Html File
设置HTML⽂件名称
编写HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--⻚⾯的标题-->
<title>第⼀个html⻚⾯</title>
</head>
<!--⻚⾯的内容-->
<body>
hello world......
</body>
</html>使⽤浏览器访问
把⿏标移动到右上⻆，会浮动出来浏览器按钮，点击 “Chrome” 按钮，使⽤ Chrome 浏览器打开当前⽹⻚
在浏览器上看到效果
HTML常⽤的标签
HTML标签
字体标签<font color="字体颜⾊" size="字体⼤⼩(1~7)"
face="字体⻛格">哈哈</font><hn>标题<hn> n取值1~6, 1是⼀级标题, 2是⼆级标题，3是三级标签，4是四级标签......<p>段落</p><b>内容</b><i>内容</i><hr/><br/><img src="路径">实现文本倾斜效果，强调的程度更强
<em>内容</em>实现文本下划线效果
<u>内容</u>文本输入框；
<input />Ctrl+/: 注释快捷键
单元格标签
表格由<table>标签来定义。
每个表格均有若干行(由<tr>标签定义)
每行被分割为若干单元格(由<td>/<th>标签定义)
<table> 表格
<tr> 表格行
<th>标题</th> 标题单元格
</tr> 表格行
<tr> 表格行
<td>数据</td> 单元格
<td>数据</td> 单元格
</tr> 表格行
</table> 表格
body的属性（注：清除浏览器默认自带的距离）
topmargin="0"
bottom="0"
leftmargin="0"
rightmargin="0"
bgcolor="颜色值"
<form>标签用于声明整个表单，定义数据收集范围，是双标签。基本语法格式<form></form>
下拉列表
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
selected是<option>的属性值，设置下拉菜单的默认选中项。
<select>
<option selected="selected">选项1</option>
</select>