JavaWeb 之 HTML基础知识-CSDN博客

本文链接：https://blog.csdn.net/young_1004/article/details/102926438

HTML标签：

1、概念：是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本：

使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

标记语言：

由标签构成的语言， <标签名称>如 html,htm

标记语言不是编程语言

2、快速入门

语法：

1.html文档后缀名 .html 或 .htm

2.标签分为

1.围堵标签：<html></html>

2.自闭合标签：<br/>

3.标签可以嵌套

4.在开始标签中可以定义属性，属性是由键值对构成的，值需要使用引号引起来（单双都可以）

5.html不区分大小写，但是建议小写

代码：

<html>

    <head>

        <meta charset="utf-8">

        <title>title</title>

    </head>

    <body>

        <font color="red">hello world</font><br/>

        <font color="green">hello world</font>

    </body>

</html>

3、标签学习：

1.文件标签：构成html最基本的标签

* html: html文档的根标签

* head: 头标签，指定html文档的一些属性，引入外部资源

* title: 标题标签

* body: 体标签

* <!DOCTYPE html> html5中定义文件类型

2.文本标签：和文本有关的标签

* <h1> to <h6>：标题标签,字体大小逐渐变小

* <br>：换行标签

* <hr>：一条横线

* <p> ：段落标签

* <b> ：字体加粗

* <I> ：斜体

* <center>：居中

*<font>:字体标签

*属性

*color:颜色

*size:大小

*face:字体

*属性定义：

*color：

1.英文单词：red, green,blue

2.rbg(值1，值2，值3)：值的范围：0～255 如 rbg(0,0,255)

3.#值1值2值3：值的范围：00～FF 如 #FF00FF

*width:

1.数值：300px(像素)

2.百分比：相对于父容器

3.图片标签

<img src = “./image/1.jpg”>

*相对路径：./：代表当前路径

../：代表上一级路径

4.列表标签

*有序列表

* ol

* li

*无序列表

* ul

* li

5.链接标签

<a href=“"target="_blank"></a>

6.<span>和<div>

7.语义化标签

 <header></header>

 <footer></footer>

8.表格标签

*<table>: 定义表格

*width：宽度

*border：边框

*cellpadding: 定义边框与内容距离

*cellspacing：定义单元格之间距离

*bicolor：背景色

*align：对齐方式

*<tr>: 定义行

*<thead>

*<tbody>

*<tfoot>

*<td>: 定义列

*<colspan>：合并列

*<rowspan>：合并行

9.表单标签

*<form>：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围（表单属性要想被提交，得指定 name 属性）

<html>

    <head>

        <meta charset="utf-8">

        <title>表单标签</title>

    </head>

    <body>

        <form action="###" method="get">

            姓名：<input name="username" /><br/>

            密码：<input name="password" /><br/>

            <input type="submit" value="提交" />

        </form>

    </body>

</html>

效果：

属性：

*action ：指定提交URL

*method：指定提交方式

get:

1.请求参数会在地址栏中显示

2.请求参数大小有限制

3.不太安全

post:

1. 请求参数不会在地址栏中显示

2. 请求参数大小没有限制

3. 较为安全

10.表单项标签：

*input：可以通过 type 的属性值改变元素的展示样式

* text：文本输入框，默认值 (placeholder：可以提示信息)

* label：label 的 for 属性一般会和 input 的 id 属性对应，对应之后点击 label 区域，会让 input 输入框获取焦点

* password：密码输入框

* radio：单选框

*注意：

1.要想让单选框实现单选效果，则多个单选框的name属性值必须一样

2.一般会给每一个单选框提供value属性，指定其被选后提交的值

3.checked属性可以指定默认值

*checkbox：复选框

*file：文件选择框

*color：取色器

*button：一个按钮

*submit：提交

*select：下拉列表

11.下拉列表：

省份：<select name="province">

                    <option>请选择</option>

                    <option>北京</option>

                    <option>上海</option>

                    <option>陕西</option>

                 </select>

12.textarea：文本域

自我描述： <textarea rows="5" cols="10" name="desc"></textarea>

4、实战：注册页面

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>注册页面</title>

    </head>

    <body>

        <form action="#" method=post">

            <table border="1" align="center" width="500" cellspacing="2" cellpadding="2">

                <tr>

                    <td><label for="username">用户名：</label></td>

                    <td><input type="text" name="username" id="username"></td>                

                </tr>

                <tr>

                    <td><label for="password">密码：</label></td>

                    <td><input type="password" name="password" id="password"></td>                

                </tr>

                <tr>

                    <td><label for="email">email：</label></td>

                    <td><input type="email" name="email" id="email"></td>                

                </tr>

                <tr>

                    <td><label for="name">姓名：</label></td>

                    <td><input type="text" name="name" id="name"></td>                

                </tr>

                <tr>

                    <td><label for="tel">手机号码：</label></td>

                    <td><input type="text" name="tel" id="tel"></td>                

                </tr>

                <tr>

                    <td>性别：</td>

                    <td><input type="radio" name="gender" value="male">男

                    <input type="radio" name="gender" value="felmale”>女        </td>

                </tr>

                <tr>

                    <td><label for="birth">出生日期：</label></td>

                    <td><input type="date" name="birth" id="birth"></td>                

                </tr>

                <tr>

                    <td colspan="2" align="center"><input type="submit" value="登录"/></td>                

                </tr>

            </table>

            

        </form>

    </body>

</html>

效果：