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

5>.普通按钮:button

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>