前端基础(HTML5)

最新推荐文章于 2024-07-25 11:26:35 发布

kk23345

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量84

点赞数

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

本文链接：https://blog.csdn.net/kkkdjbb/article/details/114853933

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

1.W3C

-> World Wide Web Consortium (万维网联盟)

W3C标准：结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOM、JS）

2.基本标签

块元素：无论内容多少，该元素独占一行。p，h1~6…

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。a，strong，em…

<!-- DOCTYPE: 告诉浏览器我们使用的是什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
    <!-- meta描述性标签，描述网站的一些信息-->
    <!-- meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="1">
    <meta name="description" content="2">
    <!-- title网页标题-->
    <title>Title</title>
</head>
<!--body代表网页主体-->
<body>
<!--h1~6表示标题-->
<h1>1</h1>
<!--段落-->
<p>1</p>
<p>2</p>
<!--水平线-->
<hr/>
<!--换行-->
<br/>
粗体：<strong>1</strong>
斜体：<em>1&nbsp;</em> <br/>
<!--&nbsp;空格 &copy;版权-->
&copy;111 <br/>
<!--img标签
src：图片地址（必填），建议用相对地址。 ../代表上一级目录
alt：图片名字（必填）
-->
<img src="../resources/img/1.jpg" alt="JavaI/O" title="悬停文字" width="200" height="300">
<!--a标签 连接
href：图片地址（必填），表示要跳转到那个页面
target：表示窗口在哪里打开
        _blank 在新标签页中打开
        _self 默认再次页面打开
-->
<!--使用a作为锚标记-->
<a name="top"></a>

<a href="htmlDemo.html" target="_blank">点击跳转</a>
<br/>
<a href="htmlDemo.html">
    <img src="../resources/img/1.jpg" alt="JavaI/O" title="悬停文字" width="200" height="300">
</a>
<br/>
<!--锚链接
1.需要一个标记
2.跳转到锚标记
-->
<a href="#top">回到图片顶部</a>
<a href="down">down</a>
<!--表格table
1.tr 行
2.td 列
-->
<table border="1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td rowspan="2">1-3</td>
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>
<!--视频video 音频audio标签
src：资源路径
controls： 控制条
outoplay：自动播放
-->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<!--iframe内联框架
src : 地址
name：框架标识名
w-h：宽高
-->
<!--<iframe src="http://www.baidu.com" frameborder="0" width="1000px" height="1000px"></iframe>-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="1000px"></iframe>
<a href="https://blog.kuangstudy.com" target="hello">跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97258055&page=12" -->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> -->
<!--</iframe>-->
</body>
</html>

3.页面结构分析

元素名	描述
header	标题头部的内容
footer	标记脚部区域的内容
section	web页面中独立区域
article	独立文章内容
aside	相关内容或引用（侧边栏）
nav	导航栏辅助内容

4.表单语法(get，post)

在这里插入图片描述

<!-- DOCTYPE: 告诉浏览器我们使用的是什么规范 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<h1>注册</h1>
<!--表单
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post 比较安全，可传输大文件
        get 可以在提交的到的url中看到信息，不安全，但高效
-->
<form action="htmlDemo.html" method="get">
    <!--文本输入框：input type="text"
    value="1"          默认初始值
    maxlength="8"      最长能写几个字符
    size="30"          文本框长度
    -->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <!--单选框-->
    <p>性别：
        <!--name必须为同一个值(组的概念)，才会是单选框-->
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
    </p>
    <!--按钮-->
    <p>
        <input type="button" value="点击" name="btn1">
        <input type="image" src="../resources/img/1.jpg" width="100" height="100">
    </p>
    <!--特殊   文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--特殊   下拉框，列表框
    -->
    <p>下拉框：
        <select name="list">
            <option value="china" selected>中国</option>
            <option value="usa">美国</option>
            <option value="eth">瑞士</option>
        </select>
    </p>
    <!--特殊   文本域-->
    <p>反馈：
        <textarea name="textarea" cols="4" rows="5">文本内容</textarea>
    </p>
    <!--邮件验证 初级-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--URL验证-->
    <p>url：
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
    <!--滑块-->
    <p>滑块：
        <input type="range" name="voice" max="100" min="0" step="1">
    </p>
    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点击文字即可锁定到输入框里</label>
        <input type="text" id="mark">
    </p>
    <p>搜索：
        <input type="search" name="search">
    </p>
    <!--提交按钮 清空按钮-->
    <p>
        <input type="submit">
        <input type="reset" value="清空">
    </p>
</form>
</body>
</html>

表单的应用：

- 隐藏域 <p>密码：<input type="password" name="pwd" value="123456" hidden></p>
- 只读  <p>名字：<input type="text" name="username" value="admin" readonly></p>
- 禁用  <input type="radio" value="girl" name="sex" disabled>女

表单初级验证：

placeholder(提示信息，输入框中使用)
required(必须填写或选择，不能为空)
pattern(正则表达式)

<p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>

<p>自定义邮箱：
	<input type="text" name="diymail" 
           pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

kk23345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础(HTML5)

HTML1.W3C2.基本标签3.页面结构分析4.表单语法(get，post)1.W3C-> World Wide Web Consortium (万维网联盟)W3C标准：结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOM、JS）2.基本标签块元素：无论内容多少，该元素独占一行。p，h1~6…行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。a，strong，em…<
复制链接

扫一扫

专栏目录