HTML5基础知识

大力萌萌怪

已于 2023-03-19 20:42:45 修改

阅读量116

点赞数

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

于 2023-03-19 20:40:27 首次发布

本文链接：https://blog.csdn.net/qq_40649588/article/details/129656089

版权

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基本结构

HTML：Hyper Text Markup Language（超文本标记语言）
W3C标准：万维网联盟
- 结构化标准语言（HTML，XML（配置文件））
- 表现标准语言（CSS）
- 行为标准（DOM（文档对象模型）、ECMAScript（JavaScript））
常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm

快捷操作

ctrl+/ ：注释快捷键
p+Tab键：自动补全标签

网页基本标签

标题标签<h1></h1>
段落标签<p></p>
换行标签<br/>
水平线标签<hr/>
注释
粗体<strong></strong>
斜体<em></em>

特殊符号

空格 
大于>
小于<
版权符号©

<!--!DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签，描述网页的一些信息-->
<!-- meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="Java学习">
    <meta name="description" content="来这个地方可以学习Java">

<!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
Hello,World!
<!--段落标签-->
<p>业精于勤，荒于嬉；</p>
<p>行成于思，毁于随。</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
业精于勤，荒于嬉；<br/>
行成于思，毁于随。<br/>
<!--粗体、斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<!--特殊符号-->
空格：
空&nbsp;&nbsp;&nbsp;格
<br/>
大于：&gt;
<br/>
小于：&lt;
<br/>
版权符号：&copy;哈哈哈
<!--
特殊符号记忆方式
& ;
可以直接在系统查找到
-->
</body>
</html>

图像标签`<img src="" alt="">`

<body>
<!--img学习
src：图片地址（必填）
     相对地址，绝对地址
     ../  上一级目录
alt：图片名字（必填）
     title 悬停文字
     width 宽度
     height 高度
     空格一下可以看到其它设置
-->
<img src="../resource/image/1.jpg" alt="风景" title="悬停文字" width="300" height="250">
</body>

超链接`<a href=""></a>`

<!--a 标签
href:（必填）链接路径
target:表示窗口在哪里打开
       _blank在新标签打开
       _self在自己网页中打开（默认）
title:悬停文字
-->
<a href="01_第一个网页.html" target="_blank">点击我跳转到我的第一个网站</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
<br/>
<a href="01_第一个网页.html">
    <img src="../resource/image/1.jpg" alt="风景" title="悬停文字" width="300" height="250">
</a>

锚链接

可以在不同网页间跳转

<!--使用name作为标记-->
<a name="top">顶部</a>


<!--锚链接
1.需要一个锚标记
2.跳转到标记
需要 #
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>

功能性链接

<!--功能性链接
邮件链接：mailto
QQ链接
-->
<a href="mailto:2376260614@qq.com">点击联系我</a>

块元素行内元素

块元素
- 无论多少内容，该元素独占一行
- (p、h1-h6……)
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- (a.strong.em)

列表

有序列表`<ol><li><li></ol>`

<!--有序列表
应用范围：试卷、问答
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/C++</li>
</ol>

无序列表`<ul><li></li></ul>`

<!--无序列表
应用范围：导航，侧栏
-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/C++</li>
</ul>

自定义列表`<dl><dt></dt><dd></dd>……</dl>`

<!--自定义列表
dl:标签
dt:列表名称
dd：列表内容
-->
<dl>
  <dt>学科</dt>
  <dd>Java</dd>
  <dd>Python</dd>
  <dd>运维</dd>
  <dd>前端</dd>
  <dd>C/C++</dd>

  <dt>位置</dt>
  <dd>哈尔滨</dd>
  <dd>石家庄</dd>
  <dd>成都</dd>
</dl>

表格`<table></table>`

行<tr></tr>
列<td></td>
跨行<td rowspan="2">2-1</td>

跨列<td colspan="3">1-1</td>

<!--table标签
行tr
列td
-->
<table border="1px">
  <tr>
<!--    colspan 跨列-->
    <td colspan="3">1-1</td>
    <td>1-4</td>
  </tr>
  <tr>
<!--    rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>
</table>

媒体元素

<body>
<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resource/video/片头.mp4" controls autoplay></video>

<audio src="../resource/audio/片头.mp3" controls autoplay></audio>
</body>

页面结构

元素名	描述
header	标记头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面的一块区域)
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
  <h2>网页头部</h2>
</header>

<section>
  <h2>网页主体</h2>
</section>

<footer>
  <h2>网页脚部</h2>
</footer>
</body>
</html>

内联框架`<iframe></iframe>`

<!--iframe
src：地址
w-h：宽度、高度
name
-->
<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px" height="1000px"></iframe>

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<!--可以通过a，向内联框架嵌入网站-->
<a href="01_第一个网页.html" target="hello">点击跳转</a>

表单元素结构、属性`<form></form>`

属性	说明
type	指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素名称(所有input都需要一个name属性，否则无法上传信息)
value	元素初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中
readonly	只读
disabled	禁用
hidden	隐藏域，值还在

初级验证

安全、减轻压力
常用方式
- placeholder：提示信息
- required：要求不能为空非空判断
- pattern：正则表达式

表单

<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post、get 提交方式
       get方式提交可以在URL看到提交信息，不安全、高效
       post方式提交比较安全，传输大文件，可以在网络-负载看到
-->
<form action="01_第一个网页.html" method="get">
    
</form>

文本框

<!--  文本输入框 input type="text"-->
  <p>名字：<input type="text" name="username" maxlength="8" placeholder="请输入用户名" required></p>

密码框

<!--  密码框 input type="password"-->
  <p>密码：<input type="password" name="psw"></p>

单选框

<!--  单选框标签
input type="radio"
value：单选框的值
name：表示组，name一样表示一个组，才能是单选
-->
  <p>性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
  </p>

多选框

<!--  多选框checkbox
input type="checkbox"
-->
<p>爱好：
  <input type="checkbox" value="sleep" name="hobby">睡觉
  <input type="checkbox" value="code" name="hobby">敲代码
  <input type="checkbox" value="chat" name="hobby">聊天
  <input type="checkbox" value="game" name="hobby">游戏
  <input type="checkbox" value="boy" name="hobby">男孩
</p>

按钮

<!--  按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
  <p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="../resource/image/1.jpg" width="50px" height="50px">
  </p>
  <p>
    <input type="submit">
    <input type="reset" value="清空表单">
  </p>

文件域

<!--  文件域
input type="file"
所有的input都需要一个name属性，否则上传不了提交不了
-->
  <p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
  </p>

邮箱验证

<!--  邮件验证-->
  <p>邮箱：
    <input type="email" name="email">
  </p>

<!--  URL-->
  <p>URL：
    <input type="url" name="url">
  </p>

数字

<!--  数字-->
  <p>商品数量：
    <input type="number" name="number" max="100" min="0" step="1">
  </p>

滑块

<!--  滑块-->
  <p>音量：
    <input type="range" name="voice" min="0" max="100" step="1">
  </p>

搜索框

<!--  搜素框-->
  <p>搜索：
    <input type="search" name="search">
  </p>

下拉框、列表框

<!--  下拉框 列表框
selected 默认选定
-->
  <p>下拉框：
    <select name="列表标签" id="">
      <option value="china">中国</option>
      <option value="us">美国</option>
      <option value="eluosi">俄罗斯</option>
      <option value="ruishi" selected>瑞士</option>
    </select>
  </p>

文本域

<!--  文本域
cols rows
-->
  <p>反馈：
    <textarea name="textarea" cols="50" rows="20">文本内容</textarea>
  </p>

鼠标可用性

<!--增强鼠标可用性
label指向id所在位置
-->
  <label for="mark">你点我试试</label>
  <input type="text" id="mark">

自定义邮箱

<!--  自定义邮箱-->
  <p>自定义邮箱
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
  </p>

大力萌萌怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础知识

HTML5基本标签
复制链接

扫一扫

专栏目录