javaEE-9.HTML入门
目录
一.什么是html
二.认识html标签
1.标签的特点:
2.html文件基本结构
3.标签的层次结构
三、html工具
四、创建第一个文件
五.html常见标签
1标题标签h1-h6
2.段落标签:p
3.换行标签:br
4.图片标签:img
图片路径有1三种表示形式:
5.超链接:a
链接的几种形式:
6.表格标签
1>.
2>.
3>.
属性:
7.表单标签
8.form标签
9.input 标签
包含的属性:
常用类型：
1>.文本框:text
2>.密码框:password
3>.单选框:radio
4>.复选框:checkbox
6>.提交按钮:submit
10.select标签:下拉菜单
11.textarea标签:文本域
12.无语义标签:div , pain
六.实现用户注册页面
参考代码:
一.什么是html
HTML(Hyper Text Markup Language):超⽂本标记语⾔.
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.
标记语⾔: 由标签构成的语⾔
HTML的标签都是提前定义好的, 使⽤不同的标签, 表⽰不同的内容. 类似⻜书⽂档, Word⽂档
二.认识html标签
html代码都是由“标签”构成的。
1.标签的特点:
标签名放到< >中.如<h1>
大部分标签是成对出现的,如<h1></h1>,叫做"双标签",开始标签和结束标签之间写标签的内容;
少部分是单独出现的,如</br>,叫做"单标签".
开始标签中会带有一些属性,用来修饰标签的内容.
2.html文件基本结构
<html>
<head>
<title>文件标题</title>
</head>
<body>
</body>
</html>html是文件的根标签，head中用来写页面的属性，body写页面的内容，title是写页面的标题
3.标签的层次结构
父子关系，兄弟关系
像上面的html和head，head和title就是父子关系；head和body就是兄弟关系。
标签之间就构成了一个DOM树：
三、html工具
编写html代码，可以用Visual Studio Code（简称"VS Code"）工具来写。
官网：Visual Studio Code - Code Editing. Redefined，进行下载安装。
四、创建第一个文件
在VS code中，创建文件xxx.html,开始一个新的文件
输入!加回车,就会快速生成一个html框架,
head种是一些已经设置好的属性,body中是写页面中要显示的内容.
让在页面中显示:你好,标题为前端
VS不是自动保存的,代码写完后,要ctrl+s进行保存,也可以设置一下,进行自动保存:文件-自动保存:
代码写完之后,找到创建的html文件的位置,双击,就能在浏览器中显示代码效果:
运行效果:
更新完善代码后,直接刷新浏览器界面就行,不用再次双击html文件.
五.html常见标签
1标题标签h1-h6
.标题标签都是换行,加粗，从h1到h6,数字越大,标题的字体越小
2.段落标签:p
在html代码中,空格,换行,回车都是无效的,要想使用,要特定的标签来实现.
<p>段落标签</p>
p标签描述的段落没有首行缩进的效果,要想实现,需要用别的方法实现.
3.换行标签:br
br是一个单标签,若想进行换行,可在代码结尾写<br/>
z在代码中换行,是不起作用的:
影片《哪吒之魔童闹海》票房突破54.14亿元，
进入中国影史票房榜前三，
同时成为中国影史春节档票房冠军
在想要换行的位置加上<br/>:
影片《哪吒之魔童闹海》票房突破54.14亿元，<br/>
进入中国影史票房榜前三，<br/>
同时成为中国影史春节档票房冠军<br/>
页面效果:
<br/>也可以写成<br>,<br/>是规范写法.
br标签是比较紧凑的,不像p标签那样带有⼀个很⼤的空隙:
4.图片标签:img
img标签必须带有src属性,表示图片路径:
<img src="1.jpg">
图片路径有1三种表示形式:
1.相对路径：以html文件所在位置为基准，找到图片位置。上面的就是相对路径
同级目录，直接写文件名就行；
下级目录，就以当前html文件所在位置，逐级写文件的位置：
当前文件在AA文件中：AA/文件名
<img src="AA/1.jpg">上级目录: ../ 表示上一级,逐级向上写
<img src="../AA/1.jpg">
2.绝对路径:
一个完整的磁盘路径:
<img src="c:\Users\86195\OneDrive\桌面\图片\1.jpg">3.网络路径:
网络路径就是网络中图片的路径,并没有在自己的设备上:
<img src="http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280">
5.超链接:a
<a href="https://www.baidu.com">百度</a>
点击就会跳转到指定页面.
href:链接路径,必须存在,
target:打开方式:默认是_self,从当前页面跳转;若是_black,指打开新的页面.
<a href="https://www.baidu.com" target="_blank">百度</a>
链接的几种形式:
1.外部链接:href中引用其他网站的链接,上面的就属于外部链接.
<a href="https://www.baidu.com">百度</a>
2.内部链接:⽹站内部⻚⾯之间的链接.写相对路径即可.
在html文件路径下,再创建一个文件:2.html
<a href="2.html" target="_blank">跳转2.html</a>
3.空链接：#代表链接占位
<a href="#">空链接</a>
6.表格标签
1>.<table></table>
表示一个表格
2>.<tr></tr>
表示表格的一行
3>.<td></td>
表示表格中的一个单元格
table包含tr,tr 包含td.
属性:
表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使⽤CSS⽅式来设置.
这些属性都要放到table标签中.
• align 是表格相对于周围元素的对⻬⽅式.默认左对齐,align="center" (不是内部元素的对⻬⽅式)
• border 表⽰边框.1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框.
• cellpadding:每个单元格的内容距离单元格边框上下左的距离,默认1像素
• cellspacing:单元格之间的距离.默认为2像素
• width/height:设置尺⼨.
<table align="center" border="3" cellpadding="20" cellspacing="30" width="300" height="100">
<tr>
<td>好好</td>
<td>学习</td>
</tr>
<tr>
<td>天天</td>
<td>向上</td>
</tr>
<tr>
<td>加油</td>
<td>努力</td>
</tr>
</table>
7.表单标签
表单是让⽤⼾输⼊信息的重要途径.
分成两个部分:
• 表单域:包含表单元素的区域.重点是form标签.
• 表单控件:输⼊框,提交按钮等.重点是input标签.
下面这些属于表单标签:
8.form标签
form标签的功能是 将form标签内部的内容提交.
描述了要把数据按照什么⽅式,提交到哪个⻚⾯中
<form action="hello2.html">
<!-- form 的内容 -->
</form>9.input 标签
各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框.
包含的属性:
type(必须存在)：标签的种类:button,checkbox,text,file,image,password,radio等.
name：给Input标签起个名字.(尤其是对于按钮类型的,名字相同的按钮为一组)
value：Input中的默认值
checked：默认被选中
placeholder：占位符
常用类型：
1>.文本框:text
文本框: <input type="text">
2>.密码框:password
密码框:<Input type="password"><br/>
3>.单选框:radio
<input type="radio" name="单选">单选1
<input type="radio" name="单选">单选2
注意: 单选框之间必须具备相同的name属性,才能实现多选⼀效果.
4>.复选框:checkbox
<input type="checkbox" name="复选">复选1
<input type="checkbox" name="复选">复选2
<input type="checkbox" name="复选">复选3
5>.普通按钮:button
<input type="button">普通按钮
当前点击了没有反应.需要搭配JS使⽤
6>.提交按钮:submit
<input type="submit">确认提交
提交按钮需要放到form标签中使用,提交的是form标签中的内容
10.select标签:下拉菜单
需要与option 标签搭配使用,option中写菜单内容,
option中的属性selected为selected时,该选项为默认选项
<select >
<option selected="selected">上海</option>
<option>北疆</option>
<option>河南</option>
<option>北京</option>
</select>
11.textarea标签:文本域
可以设置文本域的长度和宽度:
<textarea rows="3" cols="10"></textarea>
⽂本域中的内容,就是默认内容,
注意,空格也会有影响. rows 和 cols也都不会直接使⽤,都是⽤css来改的.
12.无语义标签:div , pain
这两个标签没有什么特点,主要是用来获取并选中要为其设置的内容的.且是用处非常大的.
div独占一行大格子;span不独占一行,是一个小格子.
<div>
<span>haha</span>
<span>haha</span>
<span>haha</span>
</div>
<div>
<span>diid</span>
<span>diid</span>
<span>diid</span>
</div>
<div>
<span>tete</span>
<span>tete</span>
<span>tete</span>
</div>
六.实现用户注册页面
页面内容:
参考代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
</table>
<input type="button" value="提交"><br/>
已有账号?<br/>
<a href="#">登录</a>
</body>
</html>