一篇随笔学会HTML

这篇具有很好参考价值的文章主要介绍了一篇随笔学会HTML。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML5


1.初识HTML

  1. Hyper Text Markup Language 超文本标记语言
  2. 超文本:文字、图片、音频、视频、动画
  3. 标记:利用标签的语言
  4. 2013-5-6-HTML5
  5. W3C(World Wide Web Consortium) 万维网联盟
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScrip)

2.网页基本信息

  1. 注释:<!— —>
  2. DOCTYPE 告诉浏览器我们使用什么规范
  3. Ctrl+/ 注释的快捷键
  4. meta 描述性标签,描述网站的一些信息,一般用来做SEO
<!--meta描述性标签,一般用来描述我们的网站,用来做SEO-->
    <meta charset="UTF-8">
    <meta content="hi" name="keywords">
    <meta content="你好" name="description">

3.网页基本标签

  1. 标题标签h1、h2、h3
  2. 段落标签p
  3. 换行标签br
  4. 水平线标签hr
  5. 字体样式标签strong、em
  6. 注释和特殊符号
  7. pre标签:保留输入内容原始格式显示,不用输空格和换行
  8. body属性:
    • bgcolor背景颜色
    • background背景图片
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>两只老虎两只老虎爱跳舞</p>
<p>一直没有尾巴一直没有耳朵</p>
<p>真奇怪真奇怪</p>

<!--换行标签-->
两只老虎两只老虎爱跳舞  <br/> 一直没有尾巴一直没有耳朵

<!--水平线标签-->
<hr/>

<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体: <strong>i love u</strong>
<br/>
斜体:<em>i love u</em>
<br>
<!--特殊符号-->
空&nbsp;格:<br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
大于号&gt;
<br>
小于号&lt;
<br>
版权符号&copy;
<!--特殊符号记忆方式

&     ;

-->

4.图像标签

  1. 常见的图像格式
    1. JPG
    2. GIF
    3. PNG
    4. BMP
    5. ……
  2. img标签
<!--
src:图片地址
     相对地址、绝对地址
     ../    代表上一级目录
-->
<img alt="图片名字" src="../resources/image/1.JPG"title="悬停文字"width="300"height="300">

5.超链接标签a

  1. 分类
    • 文本超链接
    • 图像超链接
<a name="top">顶部</a>

<!--快捷键a标签+table

href必须填,表示跳转到哪个页面
target:表示窗口在哪里打开
       _blank 在新页面中打开
       ——self在自己网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转到页面1</a>
<br>
<br>
<a href="https://www.baidu.com" target="_self">点我跳转到百度</a>
<br>
<br>
<a href="1.我的第一个网页.html">
    <img alt="图片名字" height="300" src="../resources/image/1.JPG" title="悬停文字" width="300">
</a>
<br>
<!--锚链接
1.先要标记名称
2.通过 # 跳转到标记
-->
<a href="#top">回到顶部</a>
<br>
<a name="down">底部</a>
<!--功能型链接
邮件链接:mailto:
QQ链接:在qq推广上自动生成代码,复制到代码里
-->
<a href="mailto:2951986411@qq.com">点击联系我</a>

<!--第三个页面直接跳转到第四个-->
<a href="4.超链接标签.html#down">页面4的底部</a>

6.块元素和行内元素

  1. 块元素
    • 无论内容多少,独占一行
    • p、h1-h6
  2. 行内元素
    • 内容撑开宽度,左右都是行内元素的可以排在一行
    • a、strong、em

7.列表标签

  1. 列表是信息资源的一种展示形式,可能使信息结构化和条理化,并以列表的样式显示出来,浏览者可以更快捷的获得相应信息
  2. 列表的分类
    • 无序列表
    • 有序列表
    • 定义列表
<!--有序列表-->
<ol>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>pythom</li>
    <li>后端</li>
    <li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围:导航、侧边栏......
-->
<ul>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>pythom</li>
    <li>后端</li>
    <li>前端</li>
</ul>
<hr>
<!--自定义列表
dl:标签
dt:列表title
dd:列表内容
-->
<dl>
    <dt>语言</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
    <dd>C++</dd>
    <dt>位置</dt>
    <dd>新疆</dd>
    <dd>北京</dd>
    <dd>南京</dd>

8.表格标签

  1. 作用:
    • 简单通用
    • 结构稳定
  2. 基本结构
    • 单元格
    • 跨行、合并单元格
    • 跨列、合并单元格
<!--表格table
行 tr (row)
列 td (data)
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</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-1</td>
        <td>3-2</td>
        <td>3-3</td>
       
    </tr>

</table>

9.媒体元素

  1. 视频元素video、音频元素audio
<!--媒体元素:音频和视频
controls 控制开关、暂停、播放的按钮
autoplay 自动播放
-->
<video src="../resources/video/我该用什么把你留住——使用Clipchamp制作.mp4"controls autoplay></video>

<audio src="../resources/audio/福禄寿FloruitShow%20-%20我用什么把你留住.mp3 "controls autoplay></audio>

10.页面结构分析

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

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

<footer><h2>网页脚步</h2></footer>

11.iframe内联框架

<!--&lt;!&ndash;<iframe allowfullscreen="true" border="0"&ndash;&gt;-->
<!--&lt;!&ndash;        frameborder="no" framespacing="0" scrolling="no" &ndash;&gt;-->
<!--&lt;!&ndash;        src="//player.bilibili.com/player.html?aid=925251644&bvid=BV1kT4y1G7KW&cid=179432384&page=1">&ndash;&gt;-->
<!--</iframe>-->

<iframe src="https:\\www.bilibili.com"name="hello" frameborder="0"width="800px"height="400px"></iframe>

<iframe src=""name="hello" frameborder="0"width="800px"height="400px"></iframe>
<a href="1.我的第一个网页.html"target="hello">点击跳转</a>

12.表单语法

  1. 用户名、密码、输入框、按钮
  2. form标签 属性 method action 必填
    • method规定如何发送表单数据,get、post
    • action表示向何处发送表单数据
<h1>注册</h1>

<!--表单form
action:提交的位置可以是网站,也可以是一个请求处理地址
method:post\get提交方式
       get方式提交可以在url中看到提交的信息,不安全但高效,不能传输大文件
       post方式提交比较安全,可以传输大文件,但仍然可以被抓包发现
-->
<form action="1.我的第一个网页.html" method="post"></form>
<!--文本输入框 <input type="text">   -->

<p>名字:<input name="username" type="text"></p>
<!--密码框:<input type="password"name="pwd"-->
<p>密码:<input name="pwd" type="password"></p>

<p>
    <input type="submit">
    <input type="reset">
</p>

13.文本框和单选框

  1. 表单元素格式

  2. name:与java相关联,程序读取就读取name文章来源地址https://www.toymoban.com/news/detail-502435.html

<h1>注册</h1>

<!--表单form
action:提交的位置可以是网站,也可以是一个请求处理地址
method:post\get提交方式
       get方式提交可以在url中看到提交的信息,不安全但高效,不能传输大文件
       post方式提交比较安全,可以传输大文件,但仍然可以被抓包发现
value:默认初始值
maxlength:z最长写几个字符
size:文本框长度
-->

<form action="1.我的第一个网页.html" method="post"></form>
<!--文本输入框 <input type="text">   -->

<p>名字:<input maxlength="8" name="username" size="30" type="text" value="请输入用户名"></p>
<!--密码框:<input type="password"name="pwd"-->
<p>密码:<input name="pwd" type="password" ></p>

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

<p>
    <input type="submit">
    <input type="reset">
</p>

14.按钮和多选框按钮

<!--多选框
type:checkbox
-->
<p>爱好
    <input type="checkbox"value="sleep"name="hobby">睡觉
    <input type="checkbox"value="code"name="hobby">敲代码
    <input type="checkbox"value="play"name="hobby">玩
    <input type="checkbox"value="eat"name="hobby">吃
</p>
<!--按钮
type:button
type:image----图片按钮
type:submit---提交按钮
type:reset---重置按钮
-->

<p>按钮
    <input type="button"name="btn1"value="点击变长">
    <input type="image"src="../resources/image/1.JPG">
</p>

15.列表框文本域和文件域

<!--下拉框、列表框
select
selected:默认选中
-->
<p>下拉框:
    <select name="国家" >
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="瑞士"selected>瑞士</option>
        <option value="JP">日本</option>
    </select>
</p>

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

<!--文件域
type:file
name:files
-->
<input type="file"name="files">
<input type="button"value="上传" name="upload">

16.搜索框滑块和简单验证

<!--邮件验证 type:email-->
<p>邮箱:
    <input type="email"name="email">
</p>
<!--URL type:url-->
<p>URl:
    <input type="url"name="url">
</p>
<!--数字 type:number-->
<p>数字:
    <input type="number"name="num"max="100"min="0"step="10">
</p>
<!--滑块 type:range-->
<p>滑块
    <input type="range"name="voice" min="0"max="100"step="2">
</p>
<!--搜索框 type:search-->
<p>搜索
    <input type="search"name="search">
</p>

17.表单的应用

  1. 分类
    • 隐藏域hidde
    • 只读readonly标签
    • 禁用disable标签
  2. 通过隐藏域传递默认值
<p>名字:<input maxlength="8" name="username" size="30" type="text" value="请输入用户名"readonly></p>
<!--密码框:<input type="password"name="pwd"-->
<p>密码:<input name="pwd" type="password"hidden value="123456"></p>

<p>性别:
    <input name="sex" type="radio" value="boy"disabled>男
    <input name="sex" type="radio" value="girl">女
</p>

<!--增强鼠标可用性
点击“你点我试试”,鼠标即锁定mark的位置
-->
<p>
    <label for="mark">你点我试试</label>
    <input id="mark" type="text">
</p>

18.表单初级验证

  1. 常用方式
    • placeholder
    • required
    • pattern
//placeholder一直在输入框中显示起到提示信息作用
<p>名字:<input maxlength="8" name="username" size="30" type="text"placeholder="请输入用户名"></p>

//required 非空判断
<p>名字:<input maxlength="8" name="username" size="30" type="text"placeholder="请输入用户名"required></p>

//pattern 正则表达式
<!--pattern
可以通过脚本之家查找正则表达式
-->
<p>自定义邮箱:
    <input type="text"name="diymail"pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* ">
</p>

到了这里,关于一篇随笔学会HTML的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 网络规模与性能优化的一篇随笔

    本周写篇轻松的话题,注意信息传输的尺度和缩放比例,写篇随笔。 控制面和数据面随规模缩放的影响,举几个例子就能说明白。 CSMA/CD,控制面和数据面在一起,控制信息交互时延和数据面时延在同一尺度时,就到了极限,因为控制交互时延相对数据面时延更大的话,便可

    2024年02月05日
    浏览(33)
  • 如何在博客园发布自己的第一篇随笔

    ✨前言✨ 本片文章,主要在于C#连接MySQL数据库,由于这之间无法建立直接联系,这时候就涉及到了第三方连接工具.NET,以此来建立C#与MySQL数据库的连接 🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍒博主将持续更新学习记录收获,友友们有任何问题可以在评论区留

    2024年02月05日
    浏览(45)
  • 关于stable diffusion的embedding训练的一篇随笔

    嗯,因为最近ai绘画很火啊,而且可以本地部署,很多人开始投喂ai然后画一些喜欢的东西,这是刚接触4天的笔记,那么我整理下目录,来展示一下这篇笔记都有什么吧。 1,绘画的和反向 2,调参,高清与面部修复 3,embedding模型的训练素材准备与原理建议 4,炼

    2024年02月04日
    浏览(43)
  • 一篇学会cron表达式

    Cron表达式是一种用于定义定时任务的格式化字符串。它被广泛用于Unix、Linux和类Unix系统中,用于在指定的时间执行预定的任务。Cron表达式由6个字段组成,每个字段通过空格分隔开。 在本文中,我们将学习如何理解和编写Cron表达式。 Cron表达式的格式如下: 每个字段可以使

    2024年02月05日
    浏览(60)
  • 学会大数据基础,一篇就够了

    1 Hadoop的三大组件 1) HDFS分布式文件管理系统 超大数据存储 流式存储 2) MapRuduce分布式并行编程模型 3) Yarn 资源管理和调度器 2 其他组件 4 HBase 实时读写 非关系型数据库 分布式列式数据库 基于HDFS数据存储 5 Hive 数据仓库 SQL语句转换为mapreduce任务 6 Flume 日志采集聚合 7 Sqoop 传

    2024年02月04日
    浏览(38)
  • 一篇学会Gitlab搭建及使用

    目录 一、Gitlab介绍 1、什么是Gitlab 二、搭建gitlab并实现ssl 1、配置yum源或下载gitlab包 2、安装依赖软件及获取GPG密钥 3、安装gitlab-ce 4、创建私有密钥 5、创建私有证书 6、创建CRT签名证书 7、利用openssl签署pem 证书 8、配置证书到gitlab 9、初始化gitlab 10、nginx配置重写到https 11、

    2024年02月06日
    浏览(29)
  • html5学习笔记13-HTML5 新元素

    https://www.runoob.com/html/html5-new-element.html 新多媒体元素 新表单元素 新的语义和结构元素 移除的元素,HTML 4.01 元素在HTML5中已经被删除:

    2024年02月11日
    浏览(69)
  • Docker基本操作【一篇学会项目部署】

    本文均学于“黑马程序员” 本文所用环境:CentOS7 、HeidiSQL 、MobaXterm、MySQL Docker 是一个虚拟环境容器,可以将你的开发环境、代码、配置文件等一并打包到这个容器中,并发布和应用到任意平台中。比如,你在本地用Python开发网站后台,开发测试完成后,就可以将Python3及其

    2024年02月06日
    浏览(36)
  • HTML5 <rt> 标签、HTML5 <ruby> 标签

    HTML5 rt标签用于表示为ruby标签中的注释内容。 一个 ruby 注释: 尝试一下 » IE 9+、Firefox、Opera、Chrome 和 Safari 支持 rt 标签。 注释: IE 8 或更早版本的 IE 浏览器不支持 rt 标签。 rt 标签定义字符(中文注音或字符)的解释或发音。 将 rt 标签与 ruby 和 rp 标签一起使用: ruby 元素

    2023年04月23日
    浏览(113)
  • 【HTML5系列】第一章 · HTML5新增语义化标签

            Hello大家好, 我是【 麟-小白 】,一位 软件工程 专业的学生,喜好 计算机知识 。希望大家能够一起 学习进步 呀!本人是一名 在读大学生 ,专业水平有限,如发现 错误 或 不足之处 ,请多多指正!谢谢大家!!!         如果 小哥哥小姐姐们 对我的文章感兴趣

    2024年02月04日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包