05_Java Web——HTML

最新推荐文章于 2024-07-22 17:27:18 发布

子平Zziping

最新推荐文章于 2024-07-22 17:27:18 发布

阅读量2.4k

点赞数

分类专栏： Java Web学习笔记文章标签： html5

本文链接：https://blog.csdn.net/qq_45926462/article/details/124295623

版权

Java Web学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

HTML简介

HyperText Markup Language：超文本标记语言

W3C标准：网页主要由三部分组成

结构：HTML
表现：CSS
行为：JavaScript

<!--HTML文件基本结构-->
<html>
    <head>
        <title></title>     <!--指定html文档的标题-->
    </head>
    <body>          <!--主体的位置-->
    
    </body>
</html>
<!--
    标签不区分大小写
    语法松散
-->

基础标签

<h1> - <h6>：标题  
<font>：定义文本字体、尺寸、颜色
<b>：定义粗体文本
<i>：定义斜体文本
<u>：定义文本下划线
<center>：定义文本居中
<p>：定义段落
<br>：定义拆行
<hr>：定义水平线

转义字符:
&lt;        <
&gt;        >
&amp;       &
&quot;      "
&reg;       已注册标识
&copy;      版权标识
&trade;     商标
&nbsp;      不断行的空白

<!--
    html表示颜色：
        1. 英文单词
        2. rgb(值1,值2,值3)     0~255
        3. #值1值2值3       0~255
-->

图片音频视频标签

<!--
    URL:资源路径指定方式
        1. 绝对路径：完整的路径
        2. 相对路径：相对位置关系
            ./xxx   相同目录，./可以省略
            ./xxx/xxxx
            ../xxx/xxxx
    尺寸单位：
        1. px：像素
        2. %：占父元素的百分比
-->
    <img src="" height="" width="">       <!--定义图片-->
        <!--
            src：URL
            height：定义图片高度
            width：定义图片宽度
        -->
    <audio src="" controls="controls">     <!--定义音频-->
        <!--
            src：URL
            controls：显示播放控件
        -->
    <video src="" controls="controls">     <!--定义视频-->
        <!--
            src：URL
            controls：显示播放控件
            height：定义视频高度
            width：定义视频宽度
        -->

超链接标签

    <a href="" target="">
        <!--
            href：指定访问资源的URL
            target：
                _self：默认值，在当前页面打开
                _blank：在空白页面打开
        -->

列表标签

    <!--有序列表-->
    <ol type="">
        <li></li>   <!--列表项-->
        <li></li>
    </ol>
    <!--无序列表-->
    <ul type="">
        <li></li>
        <li></li>
    </ul>
    <!--
        type：设置项目符号
    -->

表格标签

    <table>     <!--定义表格-->
    <!--
        border：规定表格边框的宽度
        width：规定表格的宽度
        cellspacing：规定单元格之间的空白
    -->
    <tr>        <!--定义行-->
    <!--
        align：定义表格行的内容对齐方式
    -->
    <td>        <!--定义单元格-->
    <!--
        rowspan：规定单元格可横跨的行数
        colspan：规定单元格可横跨的列数
    -->
    <th>        <!--定义表头单元格-->

<table border="1px" cellspacing="0px" width="500">
    <tr align="center">
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>Ziping</td>
        <td>21</td>
    </tr>
    <tr align="center" rowspan="2" colspan="2">
        <td>2</td>
        <td>Ziping</td>
        <td>21</td>
    </tr>
    <tr align="center">
        <td>3</td>
        <td>Ziping</td>
        <td>21</td>
    </tr>
</table>

布局标签

    <div>       <!--定义html文档中的一个区域部分-->
    <!--占一整行-->
    <span>      <!--用于组合行内元素-->
    <!--不会占整行-->

表单标签

    <form>      <!--定义表单-->
    <!--
        action：规定当提交表单时向何处发送表单数据，URL
            * 表单项数据想要被提交，必须指定表单项的name属性
        method：规定用于发送表单数据的方式
            get（默认值）：浏览器会将数据直接附在表单的action URL之后，大小会有限制
            post：浏览器会将数据放到http请求消息体中，大小无限制
    -->

表单项标签

    <input>         <!--输入-->
    <!--
        type属性：
            text（默认值）：定义单行输入字段
            password：定义密码字段
            radio：定义单选按钮
            checkbox：定义复选框
            file：定义文件上传按钮
            hidden：定义隐藏的输入字段，如：id
            submit：定义提交按钮，提交按钮会把表单数据发送到服务器
            reset：定义重置按钮，重置按钮会清除表单中的所有数据
            button：定义可点击按钮
    -->

    <select>        <!--下拉列表-->
        <option>        <!--定义下拉列表项-->

    <textarea>      <!--文本域-->

<form action="#" method="post">
    <!--隐藏字段，不在表单中显示，但数据会提交-->
    <input type="hidden" name="id" value="1">

    <!--使用label标签实现文本与输入框的关联：点击文本可选中输入框-->
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    <!--
        使radio的name属性一致达到互斥的效果
        使用value属性指定提交的值，不使用value属性的话，提交的值为on
    -->
    性别：
    <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"><label for="female">女</label><br>

    <!--
        使checkbox的name属性一致表示为一组
        使用value属性指定提交的值，不使用value属性的话，提交的值为on
    -->
    爱好：
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">游戏
    <input type="checkbox" name="hobby" value="2">电影<br>

    头像：
    <input type="file" name="avatar"><br>

    语言：
    <select name="language">
        <option value="1" value="php">php</option>
        <option value="2" value="java">java</option>
        <option value="3" value="c++">c++</option>
    </select><br>

    个人描述：
    <textarea name="description" cols="20" rows="5"></textarea><br>
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="按钮">
</form>

子平Zziping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
05_Java Web——HTML

HTML简介HyperText Markup Language：超文本标记语言W3C标准：网页主要由三部分组成结构：HTML表现：CSS行为：JavaScript<html> <head> <title></title>  </head> <body> .
复制链接

扫一扫