Html5学习笔记

最新推荐文章于 2024-06-20 11:37:30 发布
最新推荐文章于 2024-06-20 11:37:30 发布
阅读量343 收藏 10
点赞数 10
分类专栏： 前端 文章标签： html5 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75648436/article/details/136589922
版权 
<!DOCTYPE html>
<html lang="en">
<!--当前语言是英语-->

<head>
    <meta charset="UTF-8"><!--编码格式是utf-8-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>welcome</title>
</head>

<style>
    p {
        display: block;
        color: rgb(207, 118, 118);
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
    }
</style>

<body>
    <h1 align="left">一级标题</h1>
    <h2 align="right">二级标题</h2>
    <h3 align="center">三级标题</h3>
    <!--<h1属性>，align分布位置，左右中-->
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--h$*6一键生成h1到h6的标题-->

    <p>我是一个段落</p>
    <!--<p> 段落-->
    <p>你好<br />我好开心</p>
    <!--<br>换行，/加不加都行-->
    <hr color="red" width="500px" size="10px" align="left">
    <!--<hr>水平线，width是长度，size是高度，
        align默认居中，只有左右，px是像素-->

    <img src="1.jpg" alt="柯南" width="400px" title="柯南">
    <!-- <img>图片
        图片和源码必须在同一个文件夹下，
        src后面输入图片的路径名称,直接访问，相对路径
        alt:规定图像的代替文本，当图片无法显示将显示该文本
        width:规定宽度
        height：规定高度
        一般只规定宽度
        title:鼠标悬停在图片上的提示
    -->

    <img src="./phone/1 (1).jpg" alt="" width="400px">
    <!--两者相对关系，两者在同一路径下可以直接访问
    子级关系：/
    父级关系：../
    同级关系：./（可以省略）-->

    <!--网络地址-->

    <img src="D:\柯南\1 (2).jpeg" alt="" width="400px">
    <!--绝对路径-->

    <!--超链接：<a>
    超链接可以是一个字，一个词，一组词，一幅图，
    我们可以点击这些内容跳转到新的文档或者当前文档中的某个部分    
    
    href属性描述链接的地址，
    默认情况下，链接：
    一个未被访问过的链接显示蓝色字体并带有下划线
    访问过的链接显示紫色并带有下划线
    点击链接时，链接显示为红色并带有下划线
    -->
    <a href="https://www.itbaizhan.com/">百战程序员</a>

    <!--文本标签
    <em> 定义着重文字
    <b> 定义粗体文本
    <i>定义斜体
    <strong>定义加重语气
    <del>定义删除字
    <span>元素没有特定的含义
        段落代表一段文本，文本标签一般表示文本词汇-->
    <em>em快乐</em>
    <b>b快乐</b>
    <i>i快乐</i>
    <strong>strong快乐</strong>
    <span>span快乐</span>
    <del>del快乐</del>

    <!--有序列表 <ol>包含<li>
        列表可嵌套-->
    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>蔬菜
            <ol>
                <li>茄子</li>
                <li>西红柿</li>
            </ol>
        </li>
    </ol>
    <!--<ol>属性type
        1:列表用数字（1，2，3）标号
        a:小写字母
        A:大写字母
        i:小写罗马数字
        I：大写罗马数字-->

    <!--无序列表 <ul>+<li>
        <ul>type属性，
            disc默认实心圆
            circle空心圆
            square小方块
            none不显示    
    -->
    <ul type="square">
        <li>青菜</li>
        <li>菠菜</li>
        <li>黄瓜</li>
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
            </ul>
        </li>
    </ul>
    <!--ul>li*5-->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>


    <!-- 表格标签
        表格：<table>
        行：<tr>
        单元格（列）：<td>

            属性：
            border:设置表格的边框
            width:设置表格的宽度
            height:设置表格的高度
    -->
    <table border="1" width="100px" height="200px">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    <!--3行2列的表格-->
    <!--table>tr*2>td*3{文本信息}-->
    <table border="3" width="150px" height="100px">
        <tr>
            <td>苹果</td>
            <td>苹果</td>
            <td>苹果</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>苹果</td>
            <td>苹果</td>
            <td>苹果</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>苹果</td>
            <td>苹果</td>
            <td>苹果</td>
            <td>苹果</td>
        </tr>

    </table>
    <!--单元格合并
    水平合并：colspan="x"  ：
            保留左，删除右
    竖直合并：rowspan="x"
            保留上，删除下
        4个单元格，保留左上
    合并几个单元格，x=几
-->
    <p>合并单元格5,6,7:colspan</p>
    <p>合并单元格4,8:rowspan</p>

    <table border="30" width="500px" height="300px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td rowspan="2">单元格4,8</td>
        </tr>
        <tr>
            <td colspan="3">单元格5,6,7</td>



        </tr>
    </table>

    <!--form表单
        表单由容器和控件组成，一般包括输入框，按钮等（即控件）
        表单就是容器，容纳控件

        action:服务器地址
        name:表单名字
        method：（get和post不同）
            get提交数据可以看到，post看不到
            get提交少量数据，post提交大量数据

        表单元素：表单标签，表单域，表单按钮
    -->
    <form>
        <input>
        <input type="submit">
        <!-- <button>按钮</button>-->
        <!--按钮可以叫input,button-->
    </form>

    <form>
        用户名：<input type="text">
        <!--文本域-->
        密码：<input type="password">
        <!--密码框，不会明文显示-->
        <input type="submit" value="登录">
    </form>

    <table border="20" width="1000px" height="300px">
        <tr>
            <td>块级元素</td>
            <td>内联元素</td>
        </tr>
        <tr>
            <td>块元素会在页面中独占一行（自上向下垂直排列）</td>
            <td>行内元素不会独占页面中的一行，只占自身的大小</td>
        </tr>
        <tr>
            <td>可以设置width,height属性</td>
            <td>行内元素设置width,height属性无效</td>
        </tr>
        <tr>
            <td>一般块级元素可以包含行内元素和其他块级元素</td>
            <td>一般内联元素包含内联元素，不包含块级元素</td>
        </tr>
        <tr>
            <td>常见块级元素 div,form,h1~h6,hr,p,table,ul</td>
        </tr>
        <tr>
            <td>常见内联元素：a,b,em,i,span,strong</td>
        </tr>
        <tr>
            <td>行内块级元素（不换行，能够识别宽高）：button,img,input</td>
        </tr>
    </table>

    <!--div容器标签，让内容模块更加清晰-->
    <div id="header"></div>
    <div id="nav"></div><!--导航-->
    <div id="article">
        <div id="section"></div>
    </div>
    <div id="silder"></div>
    <div id="footer"></div>

    <!--h5新增标签-->
    <header></header><!--头部-->
    <nav></nav><!--导航-->
    <article><!--代表一个独立的，完整的相关内容块，
        例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等-->
        <section></section>
        <!--定义文档中的节，例如章节，页眉，页脚-->
    </article>
    <aside></aside><!--侧边栏-->
    <footer></footer><!--脚部-->


</body>

</html>

happly girl
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5学习笔记
m0_61721166的博客
03-08 8887
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
Web前端基础Html5学习笔记详细（2）
Fightingdddd的博客
06-29 4673
阿树想说 挺困的，，Html 换个方式记单词，还好阿树的词汇量自我感觉不错，对学习英语的兴趣也依然不减。 总结了一些比较重要的也是需要记的东西。资料源网，我比较喜欢用自己比较记得住的方式整理。 Html5学习笔记（1） ...
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2032
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
HTML5学习笔记-01-html语义化标签
欢迎访问我的主页：https://www.bookbook.cc
06-30 8674
一、URl 二、网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别 2.1 声明英文网站 2.2 声明中文网站 三、meta 3.1 keyword 表示搜索关键字 3.2 description 网站摘要 3.3 Viewport 响应式声明 四、语义化标签 4.1 header 头部区域 4.2 footer 尾部区域 4.3 nav 导航区域 4.4 article(文章) 主内容区域 4.5 section(部分) 定义文档中相似的区域 4.6 asi
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
前端之HTML学习笔记一
m0_53211178的博客
02-28 8149
目录 1.网页 1.1网页的概念 1.2HTML的概念 1.3网页的形成 2.常用的浏览器 3.web标准 3.1为什么需要web标准 3.2web标准的构成（重点） 1.网页 1.网页 1.1网页的概念 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以.htm或.
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
HTML学习笔记
清雨染墨衣
01-13 5790
html学习笔记，包含了常见的20-30个html标签，所有标签掌握之后便可以自己写些简单的html页面
HTML5+CSS3 学习笔记 17
A_bad_horse的专栏
04-07 2053
视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425 视频记录298-326 网站制作流程 学习品优购项目的目的 模块化开发 favicon 图标 ...
QML学习笔记总结
洪源兄
02-04 9037
这个博客是我记录我自学Qt5 的QML语言的时候一些总结和个人理解概述，也是这个专栏的置顶文章，主要的帮助链接基本在这个专栏内部，主要的参考资料就是Qt 官方的帮助文档，这个官方的帮助文档相当详细，总的来说，QML 学习的成本不大，学习入门也很简单，语法也很清晰，QML真的更加快速的描述这个界面相关的构建方法。这个博客也会持续更新，也作为学习阶段性总结的一个监督方式吧。
html5学习笔记
01-17
HTML5学习笔记 HTML5是一种新型的网页标记语言，它提供了许多新的特性和元素，旨在提高网页的可用性、可读性和可访问性。本笔记将对HTML5的基本结构、标记、语义元素、表单、媒体元素和Canvas API进行详细的介绍。 ...
HTML5学习笔记.docx
05-06
本笔记主要聚焦于HTML5的一些基本元素和特性，以及CSS中的常见样式规则和技巧，旨在帮助中低级开发者提升技能。 首先，HTML5是超文本标记语言的最新版本，它引入了许多新的语义化标签，如、、等，这些标签使得网页...
HTML5学习笔记.pdf
11-09
HTML5 学习笔记 HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。 HTML5 中的新特性包括： * ...
HTML5 WebSocket：实时通信的新篇章
最新发布
艾恩小灰灰的博客
06-20 483
WebSocket是一种在单个TCP连接上进行全双工通信的协议。与传统的HTTP请求-响应模型不同，WebSocket允许服务端主动向客户端推送数据，而无需客户端事先发起请求，从而实现了真正的双向实时通信。这一特性对于在线游戏、即时通讯、实时交易系统等应用场景至关重要。WebSocket的出现，为Web应用的实时交互提供了强大支持，极大地提升了用户体验。然而，开发者在使用WebSocket时也需注意安全问题，比如防止跨站脚本攻击(XSS)、确保数据传输的安全性等。
HTML5和CSS3总结
m0_47449012的博客
06-19 587
HTML5是最新的HTML标准，它的主要目标是提供所有内容而不需要任何像flash，silverlight等的额外插件，这些内容来自动画、视频、富GUI等。HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的。几乎所有的浏览器Safari、Chrome、Firefox、Opera、IE都支持HTML5。HTML5没有使用SGML或者XHTML，它是一个全新的东西，因此不需要参考DTD。仅需放置的文档类型代码告诉浏览器识别这是HTML5文档。
充电学习—7、BC1.2 PD协议
wangyongh的博客
06-18 473
PD（portable device，便携式设备）中有个检测VBUS是否有效的电路，电路有个参考值，高于这个值认为VBUS有效，参考值不固定，一般在0.8V~4V之间。首先将PD+即设备的DP拉高至0.6V，然后检测PD-即设备DM的电压，如果小于规定的参考电压，则端口是数据口SDP；首先将PD-拉高至0.6V，然后检测PD+的电压，如果小于参考电压，则端口是CDP；PD快充充电时，DCP协议识别过程，首次检测和二次检测符合BC1.2规定，初始VBUS是5V，识别出DCP之后将VBUS提高至9V。
论文学习_Teams of LLM Agents can Exploit Zero-Day Vulnerabilities
kitsch0x97的博客
06-19 856
研究背景LLM 代理变得越来越复杂，尤其是在网络安全领域。研究表明，当给出漏洞描述和具体问题时，LLM 代理可以有效利用已经存在的漏洞。然而，这些代理在处理零日漏洞时仍然表现不佳。研究内容论文展示了 LLM 代理团队如何实现零日漏洞的有效利用。之前的 LLM 代理在单独使用时很难探索许多不同的漏洞和长期规划。为了解决这个问题，论文引入和 HPTSA 系统，这是一个具有可以启动子代理的规划代理的代理系统。规划代理探索系统并确定要调用哪些子代理，从而解决尝试不同漏洞时的长期规划问题。实验结果。
6.S081的Lab学习——Lab7: Multithreading
qq_43264167的博客
06-19 1335
一个本硕双非的小菜鸡，备战24年秋招。打算尝试6.S081，将它的Lab逐一实现，并记录期间心酸历程。
黑马html学习笔记
09-15
以下是一些HTML学习笔记的内容： 1. HTML的全称是超文本标记语言，它用于创建网页和网页应用程序的结构。 2. HTML使用标签来定义页面的不同元素。例如，标签用于定义一个标题，标签用于定义一个段落等。 3. HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值