[前端学习笔记]HTML基础知识整理

最新推荐文章于 2022-08-22 18:24:34 发布

sillyxue

最新推荐文章于 2022-08-22 18:24:34 发布

阅读量405

点赞数 1

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

本文链接：https://blog.csdn.net/sillyxue/article/details/116660519

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML简介、基本标签、图像和超链接的使用、块级和内联元素的区别、列表标签、表格、媒体元素、页面结构、内联框架iframe、表单的重点内容以及盒子模型。提供了丰富的示例和W3C及MDN Web Docs的参考资料，是前端初学者的必备学习资料。

摘要由CSDN通过智能技术生成

HTML

1. HTML简介

全称Hyper Text Markup Language超文本标记语言（超文本：文字、图片、音频、视频、动画等）
1）HTML5：跨平台，世界知名浏览器对HTML5支持
2）W3C万维网联盟：国际中立性技术标准机构。W3C标准包括：

3）HTML基本结构

<!--DOCTYPE文档类型声明标签：告诉浏览器使用什么规范，默认是html-->
<!DOCTYPE html>
<!--lang：en英文网页，zh-CN中文网页-->
<html lang="en">
<!--head网页头部-->
<head>
    <!--meta描述标签，描述网站信息，一般用来做SEO搜索引擎优化-->
    <meta charset="UTF-8">
    <meta name="keywords" content="网站，学习，菜鸟">
    <meta name="discription" content="学习一下做网站～">
    <!--网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body网页主体-->
<body>
Hello world!
</body>
</html>

我的第一个网页

2. 基本标签

1）标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

2）段落标签（分段显示，间距大）

<p>让我对这世界好奇</p>
<p>让我信自己的真理</p>
<p>让我有个永远假期</p>
<p>让我渴睡也可嬉戏</p>

3）换行标签（间距小）

让我对这世界好奇<br/>
让我信自己的真理<br/>
让我有个永远假期<br/>
让我渴睡也可嬉戏<br/>

4）水平线标签

<hr>

5）字体样式标签

粗体：<strong>I love you!</strong>
斜体：<em>I love you!</em>
删除线：<del>我</del>
下划线：<ins>我</ins>

在这里插入图片描述

6）注释和特殊符号（可以输入&；中间夹字母现查）

空&nbsp;&nbsp;&nbsp;格
大于号&gt;
小于号&lt;
版权号&copy;

基本标签

3. 图像标签

图像标签
1）相对地址：右键copy path
2）绝对地址：…/上一级目录

<!--图像标签，必写：src图片路径，alt图片名称-->
<img src="resources/image/1.jpg" alt="猫猫领导" title="悬停文字" width="800" height="500">

4. 超链接标签

超链接标签

<!--target指定窗口打开：_blank新窗口、_self覆盖当前页面、_parent打开的页面只是在父页面中打开、_top打开的页面占据了整个页面-->
<!--空链接#-->
<a href="#">首页</a>
<!--普通链接-->
<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>
<!--图片链接：中间夹图片路径-->
<a href="1.我的第一个网页.html" title="点我跳到第一个页面">
    <img src="resources/image/1.jpg" alt="猫猫领导" width="800" height="500"></a>
<!--下载链接：href写的是一个文件或压缩包时-->
<a href="resources/物联网控制技术.zip">下载文件</a>

1）锚链接：可以跳转到相应的位置，目录跳转就用这个

<!--锚链接：1。需要一个标记 2。跳转到标记 herf=#标记。-->
<!--此时点击“回到顶部”就会到标记为top的位置-->
<a name="top">顶部</a><br/>
<a href="#top">回到顶部</a>
<!--页面间锚标签跳转-->
<a href="4.超链接标签.html#down">跳到超链接学习页面底部</a>

2）邮件链接：

<!--功能链接-邮件链接：跳转到发送邮件页面-->
<a href="mailto:526304893@qq.com">点击邮箱联系我</a>

3） QQ链接：百度搜索QQ推广，里面可以直接复制

<!--功能链接-QQ链接：跳转到QQ聊天页面，QQ推广里直接复制-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="感兴趣就联系我吧" title="感兴趣就联系我吧"/></a>

5. 块元素和行内元素

块元素和行内元素

6. 列表标签

1）有序列表

<!--序号，应用范围：试卷、问答...-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>测试</li>
</ol>

2）无序列表

<!--黑点，应用范围：导航、侧边栏...-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>测试</li>
</ul>

3）自定义列表

<!--dt列表名称；dd列表内容。应用范围：公司网站底部-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>数据结构</dd>
    <dd>计算机网络</dd>
</dl>

列表标签

7. 表格标签

一些属性合并表格

<!--tr行标签，td列标签-->
<!--border边框，cellspacing单元格距离，cellpadding单元格内距，width单元格宽度-->
<table border="1px" cellspacing="0" cellpadding="10">
<!--thead表格头部,tbody表格主体-->
    <thead>
    <tr>
        <!--colspan跨行，rowspan跨列-->
        <!--th表头单元格：加粗居中-->
        <th colspan="3">学生成绩</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">pipi</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">zz</td>
        <td>语文</td>
        <td>60</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>70</td>
    </tr>
    </tbody>
</table>

8. 媒体元素标签（音频、视频）

<!--视频，control显示控制框，autoplay打开自动播放-->
<video src="resources/video/1617755904813990.mp4" controls></video>
<br/>
<!--音频-->
<audio src="resources/audio/昙轩%20-%20海の形.mp3" controls autoplay></audio>

9. 页面结构分析

页面结构

<body>
<!--页面结构-->
<header>
   <h2>页面头部</h2>
</header>
<hr>
<section>
   <h3>页面主体</h3>
</section>
<hr>
<footer>
   <h2>页面底部</h2>
</footer>
</body>

10. 内联框架iframe

在当前页面内联其他页面
iframe

<!--frameborder有无边框，默认为1有边框-->
<!--1.在页面中内联百度搜索页面-->
<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="400px"></iframe>
<br/>
<!--2.设置name标识，通过a标签的target属性显示-->
<iframe src="" name="hello"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

内联框架

11. 表单（重点）

1）基本结构

input常用属性：

<!--表单元素：input、select、textarea-->
<h1>注册</h1>
<!--method提交方式:post（比较安全，可以传输大文件），get（在URL中可以看到提交的信息不安全，高效）-->
<!--value设定初始值，maxlength最大长度，size初始宽度，readonly只读不可改，hidden隐藏可以用默认值，required不能为空-->
<form action="1.我的第一个网页.html" method="get" >
       <p>用户名：<input name="username" type="text" value="xuefeng" readonly maxlength="8" size="20"></p>
       <p>密码&nbsp;&nbsp;&nbsp;：<input name="pwd" type="password" size="20" value="123456" hidden></p>
     <!--单选框radio：name形成组，value单选框的值，checked默认选中-->
       <p>性别：
           <input name="sex" type="radio" value="boy" id="nan" checked disabled><label for="nan">男</label>
           <input name="sex" type="radio" value="girl" id="nv"><label for="nv">女</label>
       </p>

       <!--多选框checkbox:checked默认选中-->
       <p>爱好
           <input name="hobby" type="checkbox" value="sleep">睡觉
           <input name="hobby" type="checkbox" value="code" checked>敲代码
           <input name="hobby" type="checkbox" value="game">打游戏
           <input name="hobby" type="checkbox" value="chat">聊天
       </p>
<!--按钮button:value设定按钮上面的字,type(button\image\submit\reset)-->
       <p>
           <input name="bt1" type="button" value="点击变美">
      <!--图片按钮有自动提交功能,和submit一样的效果-->
           <input name="bt2" type="image" src="resources/image/1.jpg">
       </p>

       <!--下拉框/列表框：select标签，selected默认选中-->
       <p>国家：
           <select name="country">
               <option value="China">中国</option>
               <option value="American">美国</option>
               <option value="England" selected>英国</option>
               <option value="Indian">印度</option>
           </select>
       </p>

       <!--文本域：textarea标签,cols列数rows行数-->
       <p>反馈：
           <textarea name="feedback" cols="50" rows="10">请输入你的反馈，例如：站主真美。</textarea>
       </p>
       <!--文件域：type为file-->
       <p>
           <input name="files" type="file" >
           <input name="upload" type="button" value="上传">
       </p>

       <!--邮件验证:判断格式是否是..@..-->
       <p>邮箱：
           <input name="email" type="email" required>
       </p>
       <!--正则表达式pattern邮箱验证：正则表达式百度查常用的即可-->
       <p>自定义邮箱：
           <input name="diymail" type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
       </p>
       <!--URL验证：-->
       <p>URL:
           <input name="url" type="url">
       </p>
       <!--数字验证:min和max可以规定最大最小值,step步长-->
       <p>商品数量：
           <input name="number" type="number" max="100" min="0" step="1">
       </p>

       <!--滑块(音量):min和max可以规定最大最小值-->
       <p>音量：
           <input name="voice" type="range" max="100" min="0">
       </p>
       <!--搜索框search-->
       <p>搜索：
           <input name="search" type="search" id="mark" placeholder="请输入要查找的内容">
       </p>
       <!--增强鼠标可用性label-->
       <p>
           <label for="mark">点我定位到搜索框</label>
       </p>

       <p>
           <input name="submit" type="submit">
           <input name="reset" type="reset" disabled>
       </p>
</form>

表单应用

2）表单应用

readonly只读，不可改
disabled禁用，不可选
hidden隐藏域
提高鼠标可用性：点击文字到相应的输入框

<p>搜索：
    <input name="search" type="search" id="mark" placeholder="请输入要查找的内容">
</p>
<!--增强鼠标可用性：label标签-->
<p>
    <label for="mark">点我定位到搜索框</label>
</p>

3）表单验证

placeholder提示信息
required不能为空
pattern正则表达式验证

<!--正则表达式pattern邮箱验证：正则表达式百度查常用的即可-->
<p>自定义邮箱：
    <input name="diymail" type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>

12. 盒子标签

<!--div分割分区，span跨度跨距，一般与CSS同用方便设置样式-->
<div>div是一个超大的盒子，我自己独占一行</div>span是小盒子，一行可以放多个:<br/>
<span>搜狐</span>
<span>新浪</span>
<span>百度</span>

13. 查阅文档

W3C官网
分享一个Mac版的本地W3C参考文档资源：
链接: https://pan.baidu.com/s/171Frg6_614FWO_IXC08dKw 密码: ain2
MDN Web Docs

sillyxue

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
[前端学习笔记]HTML基础知识整理

HTML1. HTML简介全称Hyper Text Markup Language超文本标记语言（超文本：文字、图片、音频、视频、动画等）1）HTML5：跨平台，世界知名浏览器对HTML5支持2）W3C万维网联盟：国际中立性技术标准机构。W3C标准包括：3）HTML基本结构<!DOCTYPE html><ht
复制链接

扫一扫

专栏目录