Java Web(六)：HTML

最新推荐文章于 2022-07-08 11:23:25 发布

启帆远航

最新推荐文章于 2022-07-08 11:23:25 发布

阅读量174

点赞数

分类专栏： # java web 文章标签： html 前端 java

本文链接：https://blog.csdn.net/yu1755128147/article/details/102572544

版权

java web 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一、简介

HTML（HyperText Markup Language）称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

二、HTML语法

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

2、标签的类别

围堵标签：有开始标签和结束标签。如 <html> </html>
自闭合标签：开始标签和结束标签在一起。如 <br/>

3、标签嵌套

需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>

4、在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

5、html的标签不区分大小写，但是建议使用小写。

三、常见标签

1、基础标签：构成html最基本的标签

<!DOCTYPE html>：html5中定义该文档是html文档
html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：定义文档的标题
body：定义文档的主体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

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

注释：

<h1> to <h6>：标题标签
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线，有如下几个属性：

color：颜色

width：宽度

size：高度

align：对其方式

center：居中

left：左对齐

right：右对齐

<b>：字体加粗
<i>：字体斜体
<font>：字体标签
<center>：文本居中，属性如下：

color：颜色

size：大小

face：字体

<h1>
    Introduction
</h1>
<hr color="#ffd700">

<p>
    <font color="#FF0000">Vivamus a massa.</font><b><i>Donec iaculis felis id neque.</i></b>Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate.
    Nulla et augue.Sed eu nunc quis pede tristique suscipit. Nam sit amet justo vel libero tincidunt dignissim. Cras magna velit, pellentesque mattis, faucibus vitae,
    feugiat vitae, sapien.Fusce ac orci sit amet velit ultrices condimentum. Integer imperdiet odio ac eros. Ut id massa. Nullam nunc. Vivamus sagittis varius lorem.
</p>

<p>
    Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum.
</p>

<p>
    Vestibulum eleifend, enim ut molestie pulvinar, purus est fringilla augue, ut tristique nunc neque a libero.
</p>
<hr color="#ffd700">

<font color="gray" size="2">
    <center>
        Copyright © 2048 Your Company Name<br>
        Web Tech Template http://www.templatemo.com/preview/templatemo_205_web_tech
    </center>
</font>

color属性定义

英文单词：red,green,blue
rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
#值1值2值3：值的范围：00~FF之间。如： #FF00FF

width属性定义

数值：width='20' ,数值的单位，默认是 px(像素)
数值%：占比相对于父元素的比例

4、图片标签<img>

4.1、属性

src：规定显示图像的 URL。
alt：规定图像的替代文本。

4.2、实例

<img src="images/templatemo_rss.png" alt="rss" />

5、列表标签

属性

type：规定列表的项目符号的类型，属性值可以是：disc（默认值，实心圆）、circle（空心圆）、square（实心方块）

5.1、无序列表<ul>

<ul type="disc">
    <li>Home</li>
    <li>Web 2.0</li>
    <li>Wordpress</li>
    <li>Graphics</li>
    <li>Inspirations</li>
    <li>Freebies</li>
</ul>

5.2、有序列表<ol>

<ol type="circle">
    <li>Free Flash Files</li>
    <li>Free CSS Templates</li>
    <li>Web Design Tips</li
    <li>Flash XML Galleries</li>
    <li>Inspiring Flash Websites</li>
</ol>

6、表格标签<table>

<table>：定义表格

属性

border：规定规定围绕表格的边框的宽度。
cellpadding：规定单元边沿与其内容之间的空白。
cellspacing：规定单元格之间的空间。
bgcolor：规定规定表格的背景颜色。
align：规定表格相对于周围元素的对齐方式。

<tr>：定义表格中的行。

<th>：定义表格中的表头单元格。

<td>：定义表格中的单元。

<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
	<tr>
		<th>编号</th>
		<th>姓名</th>
		<th>成绩</th>
	</tr>
	<tr>
		<td>1</td>
		<td>小龙女</td>
		<td>100</td>
	</tr>
	<tr>
		<td>2</td>
		<td>杨过</td>
		<td>50</td>
	</tr>
</table>

7、链接标签<a>

7.1、属性

href：规定链接指向的页面的 URL。

target：规定在何处打开链接文档，常用的属性值：_blank（在新窗口中打开被链接文档）、_self（默认，在相同的框架中打开被链接文档）

7.2、实例

<a href="http://validator.w3.org/check?uri=referer">XHTML</a>
<a href="#">Maecenas adipiscing elementum ipsum.</a>
<a href="#" target="_blank">Donec mollis aliquet ligula.</a>

8、样式/节标签

8.1、<div>

<div> 是一个块级元素，它的内容自动地开始一个新行。

8.2、<span>

<span> 用来组合文档中的行内元素。

8.3、<header>

定义文档的页眉（介绍信息）。

8.4、<footer>

定义文档或节的页脚（页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等）。

9、表单标签

9.1、<form>：定义供用户输入的 HTML 表单。

9.2、<input>：定义输入控件。

type属性：规定 input 元素的类型，属性值

text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
password：定义密码字段。该字段中的字符被掩码。
radio：定义单选按钮；要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样，并会给每一个单选框提供value属性，指定其被选中后提交的值。
checkbox：定义复选框。
file：定义输入字段和 "浏览"按钮，供文件上传。
hidden：定义隐藏的输入字段。
submit：定义提交按钮。提交按钮会把表单数据发送到服务器。
button：定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
image：定义图像形式的提交按钮。

9.3、<select>：定义选择列表（下拉列表）。

9.4、<textarea>：定义多行的文本输入控件。

    <!--定义表单 form-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <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><label>性别</label></td>
                <td><input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>

            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>

            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td><input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg">
                </td>
            </tr>

            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>

启帆远航

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web(六)：HTML

一、简介HTML（HyperText Markup Language）称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。二、HTML语法1、html文档后缀名 .html 或者 .htm...
复制链接

扫一扫

专栏目录