一、HTML简介
什么是HTML
- HTML:HyperText Markup Language,超文本 标记/标签 语言。
- 作用:用于编写网页的
HTML的语法特点
- HTML文件后缀名是:
.html
或者.htm
- HTML文件由一堆标签组成:
- 标签:
<关键字>内容</关键字>
,<关键字/>
自闭合标签- 标签可以嵌套,但是最外层的根标签是
html
- 标签可以嵌套,但是最外层的根标签是
- 属性:写在开始标签上,用于对标签做进一步修饰
- 标签:
- 不需要编译,可以使用浏览器直接打开
- 不区分大小写
HTML的文档结构
- 根标签:html
- 根标签里有:
- head:网页的头,对网页的配置,比如网页标题、字符集等等
- body:网页的内部,会显示到浏览器页面上
使用idea编写HTML
- File-new-Module,选择
Static Web
- 补全目录:
css
放样式文件,js
放js文件,img
放图片文件
- 创建HTML文件,使用浏览器打开html文件
二、HTML文字排版标签
- 文字排版相关的标签有:
- 标题标签:h1~h6
- 横线标签:hr
- 段落标签:p
- 换行标签:br
- 文字标签:font
- 粗体字标签:b
- 斜体字标签:i
<h1>helloworld1</h1>
<h2>helloworld2</h2>
<h3>helloworld3</h3>
<h4>helloworld4</h4>
<h5>helloworld5</h5>
<h6>helloworld6</h6>
展示结果:
- 特点:
- 默认加粗
- 内置字号:h1最大,h6最小
- 独占一行
2. 横线标签
<hr color="red" size="20px" width="500px" align="left"/>
- 属性:
- color:横线的颜色
- size:横线的粗细
- width:横线的长短
- algin:横线的水平位置。left / center(默认)/ right
3. 段落和换行
<p>
一个p标签,是一个段落。段落之间有空白的间隔;
如果要换行,写<br/>后边内容会另起一行显示,行之间没有空白间隔
</p>
4. 文字标签
<font color="red" size="7" face="华文彩云">helloworld7</font>
<i>这是斜体字</i>
<b>这是粗体字</b>
- font标签的属性
- color:文字的颜色
- size:文字的大小,最小1,最大7,默认3
- face:文字的字体
三、HTML图片标签
<img src="../img/mm.jpg" height="500px" title="美女" alt="漂亮"/>
- 属性
- src:图片的路径,必须
- width:图片显示的宽度
- height:图片显示的高度。通常只加width或者只加height,图片会等比例缩放显示,而不会变形
- title:鼠标悬浮提示
- alt:图片加载不出来时,显示的文字描述
四、HTML清单和超链接
1.超链接标签
- 点击能够页面跳转
<a href="http://www.baidu.com">点我跳转到百度</a>
- 属性:
- href:跳转的路径
- target:在哪显示新页面,常用值有:
- _self:在当前窗口显示(原页面被覆盖掉)
- _blank:在新窗口显示
2. 清单标签/列表标签
- 每行一个条目,前边有标记符号
<!-- 无序清单:ul+li -->
<ul type="square">
<li>Alibaba</li>
<li>Tencent</li>
<li>Amazon</li>
<li>Netease</li>
</ul>
<!-- 有序清单:ol + li -->
<ol type="A">
<li>烤鸭</li>
<li>烧鸡</li>
<li>乳鸽</li>
<li>包子</li>
</ol>
- ul标签的type属性:每个清单项前边的符号类型,常用值有:
disc
:小圆点,默认值circle
:小圆圈square
:小方块
- ol标签的type属性:每个清单项前边的序号类型,常用值有:
1
:阿拉伯数字序号a/A
:英文字母序号i/I
:罗马数字序号
五、HTML表格
1. 基本表格
<table border="1" width="500px" bgcolor="yellow" cellspacing="0" align="center">
<tr align="center">
<td align="right">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>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>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
- table标签:表格本身
- align:表格本身的水平位置
- tr标签:表格里的行
- align:行里内容的水平位置
- td标签:行里的单元格
- align:单元格里内容的水平位置
- th标签:行里的表头单元格,是一种特殊的td,用法和td完全一样,自带样式:加粗并居中
- caption标签:表格里的标题
2. 单元格合并
- 用到的单元格(td、th)的属性有:colspan, rowspan
- 步骤:
- 确定用哪个属性:跨行用rowspan,跨列用colspan
- 确定属性值是几:要合并几个单元格,值就是几
- 确定属性加在哪:加在要合并的单元格中,最前边的那个单元格上
- 删除被合并掉的单元格
<!--
举例:创建一个4行4列的表格,其中:
1-1 和 1-2 合并 colspan="2"
2-4 和 3-4 合并
3-2、3-3、4-2、4-3 合并
-->
<table border="1" width="500px" cellspacing="0" align="center">
<tr>
<td colspan="2">1-1</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td rowspan="2">2-4</td>
</tr>
<tr>
<td>3-1</td>
<td colspan="2" rowspan="2">3-2</td>
</tr>
<tr>
<td>4-1</td>
<td>4-4</td>
</tr>
</table>
展示结果:
六、HTML表单
form标签
- 代表表单本身,要把表单项写到form标签内部才会生效
- form标签的属性:
- name:表单的名称
- action:表单提交的路径
- method:表单提交的方式,常用的有get和post
<form action="#" method="get" name="myform">
<!-- 在这里写表单项 -->
</form>
input标签
- 输入项标签,不同type属性,会有不同的显示效果和不同的作用
- input标签的属性:
- type:input的类型,不同type是不同的表单项
- name:表单项的名称,如果表单项数据要提交,就必须有name属性
- value:表单项的值,作用随着type属性值而改变
- disabled:表单项禁用,不可修改值,也不会被提交
- readonly:表单项只读,不可修改值,但会被提交
- input的不同类型:
<!-- 文本框:value属性是默认值 -->
用户名:<input type="text" name="username" value="lisi"> <br>
<!-- 密码框:value属性是默认值 -->
密码:<input type="password" name="password"> <br>
<!-- 单选按钮:name属性应该相同;value是选项的值,选中哪个选项,就提交哪个选项的值;checked表示选中了 -->
性别:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女 <br>
<!-- 复选框:name属性应该相同;value是选项的值,选中哪个选项,就提交哪个选项的值;checked表示选中了 -->
爱好:<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="code">编程
<input type="checkbox" name="hobby" value="friend" checked>交友 <br>
<!-- 按钮:普通按钮,value是按钮上显示的文字 -->
<input type="button" value="普通按钮">
<!-- 按钮:提交按钮,value是按钮上显示的文字 -->
<input type="submit" value="提交按钮">
<!-- 按钮:重置按钮,value是按钮上显示的文字 -->
<input type="reset" value="重置按钮"> <br>
<!-- 按钮:图片提交按钮,value是图片显示不出来时的文字 -->
<input type="image" src="#" value="图片提交按钮"> <br>
<!-- 文件选择框,value无效 -->
<input type="file" name="file">
<!-- hidden:隐藏域,不显示到页面上,但是会提交的表单项 -->
<input type="hidden" name="hidden" value="隐藏域的值">
展示结果:
select标签
- 下拉框标签select,要和子标签option配合实现下拉框
- select标签:下拉框
- name:表单项的名称,如果表单项的数据要提交,就必须有name属性
- option标签:下拉选项
- value:下拉选项的值,选中哪个选项,就提交哪个选项的值
- selected:表示下拉选项是被选中状态
<select name="address">
<option value="gd">广东省</option>
<option value="gx">广西省</option>
<option value="hn">湖南省</option>
<option value="hb" selected>湖北省</option>
</select>
textarea标签
- 文本域标签,用于输入多行文本
- 属性:
- name:如果表单项数据要提交,就必须要有name属性
- rows:文本域的高度,可以显示几行(有浏览器兼容性问题)
- cols:文本域的宽度,可以显示几列(有浏览器兼容性问题)
- textarea标签没有value属性,它的默认值要写在标签体里
<textarea rows="5" cols="10" name="signature">没有value属性,默认值写在这里</textarea>
get提交和post提交的区别
- get提交,参数会显示到地址栏;post提交,参数不会显示到地址栏
- get提交,不安全;post提交,相对安全
- get提交,有长度限制;post提交,没有长度限制
- 在实际开发中,尽量使用POST方式提交数据
七、HTML其它
颜色的写法
- 颜色的名称,比如:
red, blue, green, ...
- 十六进制的色码,比如:
#FF0000
。如果六位数字一样,可以简写,比如:#666666
简写成:#666
尺寸的写法
- 固定像素,比如:
500px
- 百分比,比如:
50%
。 注意:根据父容器计算的百分比
路径的写法
- 绝对路径:
- 带盘符的路径(在web应用里是禁用的),比如:
C:\a.jpg
- url网址(要求是联网的),比如:
http://www.xxx.com/aa.jpg
- 以
/
开头的路径(在web核心里有少量使用)
- 带盘符的路径(在web应用里是禁用的),比如:
- 相对路径:
- 以
./
开头的,从当前文件夹里查找。./
可以省略不写 - 以
../
开头的,从上级文件夹里查找
- 以
特殊字符的写法
- 有些字符是HTML 语法里需要使用的,比如:
>
<
等等,这些字符就是特殊字符。 - 要使用实体字符代替特殊字符
< & > © ♠ ♣ ♥ ♦
< & > © ♠ ♣ ♥ ♦