Javaweb-HTML

最新推荐文章于 2024-10-01 23:46:18 发布

C_yuu

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量897

点赞数 11

分类专栏： Javaweb 文章标签： html 前端

本文链接：https://blog.csdn.net/duxjebdu/article/details/141497800

版权

Javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

HTML基本结构

html是由头部声明，html整体框架，内部由head头和body主体组成

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>基本结构</title>
    </head>
    <body>
        内容
    </body>
</html>

<!-- 页面html声明 H5声明-->
<!DOCTYPE html>
<!-- 代表整个页面标签，一个页面只有一个html标签 -->
<html>
    <!--head就是头部标记-->
    <head>
        <!-- meta配置标签 
charset代表页面的编码方式 
name名称 
author作者 
description整个页面的描述 
keywords关键字，提供给搜索引擎的搜索提示语句 
content设置内容-->
        <meta charset='utf-8'>
        <!-- 设置页面标题 -->
        <title>基本结构</title>
        <!-- 外部引入css样式或者引入图标 -->
        <link rel="icon" herf="../CnYuu.jpg">
    </head>
    <body>
        内容
    </body>
</html>

文本段落标签

标题标签：h1 h2 h3 h4 h5

块元素，数字越大，字体越小，默认加粗

段落标签：p

块元素，p标签元素与所有其他块标签中间都会有一定间隙

换行元素

单标记，换行

水平线标签

单标记，块元素

图片标记

通过img标签可以在文档中显示图片

属性

src：指定图片地址【相对路径从你的项目开始，绝对路径不知道为什么显示不出图片】

alt：图片无法加载时替换文本

title：鼠标放到图片上显示文字

width、height：设置图片的尺寸

border：设置图片边框

视频音频标记

视频标签：video、embed

音频标签：audio

属性

autoplay：视频就绪后马上播放

controls：向用户展示控件【例如播放按钮】

height：设置播放器高度

loop：循环播放

muted：静音

poster：视频正在加载时的图片，知道用户点击播放按钮

preload：页面加载时加载视频，并且预备播放，如果碰到autoplay忽略该属性

src：要播放的视频的URL

width：设置视频播放器的宽度

超链接

定义超链接的标签为a标签，当前页面跳转到指定位置，一般跳转到另一个页面

属性

href：定义超链接打开的网址

title：定义鼠标放上去的提示文本

name：为a标签取名，一般在锚点链接中定义锚点【锚点：当前页面的跳转】

target：定义超链接打开的行为*_blank:*新窗口中打开 *_parent:*在父窗口中打开 *_self:*默认

*_top:*在当前窗体打开链接，并替换当前的整个窗体 *_iframename:*iframe中打开

列表

无序列表

小黑点，用ul标签包裹

有序列表

数字，用ol标签包裹

自定义列表

dl、dt、dd标签设置自定义列表，无标记

dl包裹，dt在前，dd在后

<dl>
    <dt>aa</dt>
    <dd>aa</dd>
</dl>

滚动标签

marquee标签

属性

direction：滚动方向

heigh：滚动高度

width：滚动宽度

scrollamount：滚动速度

behavior：滚动方式

表格属性

table标签包裹

table中包含的标签

tr：行

td：列

th：表格中表头单元格，表头的列

caption：表格中的标题

thead：表格中表头的内容，包裹在tr外部

tbody：表格中主体的内容，包裹在tr外部

tfoot：表格中页脚内容，包裹在tr外部

<table>
    <caption>表格标题</caption>
    <thead>
    <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>页脚</td>
        <td>页脚</td>
        <td>页脚</td>
    </tr>
    </tfoot>
</table>

表单标签

form标签用于为用户输入创建HTML表单，用于向服务器传输数据。

属性

enctype：设置表单的编码方式

method：设置表单的请求方式【post、get… …】

action：设置表单提交的地址

常用表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="https://baidu.com">
    <!-- label点击焦点自动转移至其包裹或者for指向id的表单元素 -->
    <label for="username">姓名：</label>
    <!-- 文本输入框 -->
    <input type="text" id="username">
    <br>
    <label>
        <!-- 密码输入框，输入的数据会被隐藏 -->
        密码：<input type="password">
    </label>
    <br>
    <label>
        <!-- 单选表单，可以用name使两个按钮进行单选，checked可以设置开始是否被选中（多选也是） -->
        单选：<input type="radio" name="dx" checked><input type="radio" name="dx">
    </label>
    <label>
        <!-- 多选表单 -->
        多选：<input type="checkbox"><input type="checkbox">
    </label>
    <br>
    <label>
        <!-- 数字表单，右侧会有一个可以加减的按钮 -->
        数字：<input type="number">
    </label>
    <br>
    <label>
        <!-- 会验证表单内容是否为邮箱 -->
        邮箱：<input type="email">
    </label>
    <br>
    <label>
        <!-- 日期表单 -->
        日期：<input type="date">
    </label>
    <br>
    <label>
        <!-- 时间表单 -->
        <input type="time">
    </label>
    <br>
    <label>
        <!-- 月份表单，没有日的日历 -->
        <input type="month">
    </label>
    <br>
    <label>
        <!-- 一年第几周表单 -->
        <input type="week">
    </label>
    <br>
    <label>
        <!-- 带时间的日历表单 -->
        <input type="datetime-local">
    </label>
    <br>
    <label>
        <!-- 一个可以滑动的滑动条表单 -->
        <input type="range">
    </label>
    <br>
    <label>
        <!-- 按钮表单 -->
        <input type="button" value="按钮表单">
    </label>
    <br>
    <label>
        <!-- file表单 -->
        <input type="file">
    </label>
    <br>
    <label>
        <!-- 颜色表单 -->
        <input type="color">
    </label>
    <br>
    <label>
        <!-- url表单，会验证url -->
        url：<input type="url">
    </label>
    <br>
    <label>
        <!-- 电话表单 -->
        电话：<input type="tel">
    </label>
    <br>
    <label>
        <!-- 搜索表单，后面带一个可以清空的按钮 -->
        <input type="search">
    </label>
    <br>
    <label>
        <!-- 提交表单，表单全部合法才会提交跳转form中的action -->
        <input type="submit">
    </label>
    <br>
    <label>
        <!-- 时间表单 -->
        <input type="time">
    </label>
    <br>
    <label>
        <!-- 重置表单 -->
        <input type="reset">
    </label>
    <br>
    <label>
        <!-- 图片表单 -->
        <input type="image" alt="" src="../CnYuu0.jpg">
    </label>
    <label for="s"></label>
    <!--下拉框表单-->
    <select name="s" id="s">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>
    <label for="t"></label>
    <!-- 多行文本表单，cols代表列数多宽，rows代表行数多长 -->
    <textarea name="t" id="t" cols="30" rows="10"></textarea>
    <br>
</form>
</body>
</html>

属性

name：为表单设置名字

value：为表单设置默认值

placeholder：输入框的提示语句

maxlength：设置输入框的最长字节

minlength：设置输入框的最短字节

id：设置id名称

checked：单选或者多选表单被选中状态

required：必须填写，不填写无法提交表单

pattern：正则验证

readonly：只读

disabled：不可用

enabled：可用的

autofoucus：自动获取焦点

datalist：输入框的提示内容，类似下拉框