HTML5学习笔记

已于 2022-10-05 16:13:26 修改
阅读量354 收藏 2
点赞数
分类专栏： 前端 文章标签： 经验分享 html 前端
于 2022-03-02 14:46:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50670733/article/details/123230113
版权

html编辑器 - VScode 优点：速度快，体积小，插件多

  1. 新建文本文件，后缀名改为 .html/.htm
  2. 编写 HTML结构标签
  3. 保存后，使用浏览器打开该文件（VScode 扩展安装view in browser，预览网页效果）

图片加载失败

图片加载失败

一、HTML网页结构标签

标签描述
HTML标签：<HTML>网页的整体 ：定义 HTML 文档
head标签： <head>网页的头部：定义关于文档的信息
body标签： <title>网页的标题：定义文档的标题
title标签：<body>网页的身体 ：定义文档的主体

图片加载失败

<!DOCTYPE html>
<!-- HTML注释的写法 -->
<html lang="en">    <!-- 网页的整体 -->

<head>       <!-- 网页的头部 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>    
</head>

<body>
    网页的身体（内容）
</body>

</html>

二、基础标签

文本标签

效果标签语义化标签格式化
strong文字加粗<strong> strong文字加粗 </strong><b> b加粗 </b>
ins文字下划线<ins> ins文字下划线 </ins><u> u下划线 </u>
em文字倾斜<em> em文字倾斜 </em><i> i倾斜 </i>
del文字删除线<del> del文字删除线 </del><s> s删除线 </s>

排版标签

标签描述
<h1> ~ <h6>定义标题，h1最大，h6最小
<font>定义文本的字体、字体尺寸、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线

符号标签

HTML 原代码显示结果描述
&lt;<小于号或显示标记
&gt ;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;“引号
&reg;®已注册
&copy;©版权
&trade;™商标
&nbsp;不断行的空白

三、媒体标签

1. 图片标签

<img src="目标图片的路径" alt="图片加载失败时，显示alt的文本" title="鼠标悬停时，显示的文本">
加载失败

路径: 相对路径 （常用），绝对路径

  • img：定义图片
    • src：规定显示图像的 URL
    • height：定义图像的高度
    • width：定义图像的宽度
    • 宽高：width=“800”，如果只设置一个，会等比例缩放

2. 音频标签

<audio src="路径" controls autoplay loop>

  • audio：定义音频。支持的音频格式：MP3、WAV、OGG
    • src：规定音频的 URL
    • controls (显示播放的控件如速度)
    • autoplay :自动播放
    • loop :循坏播放

3. 视频标签

<video src="相对路径" controls autoplay loop>

  • video：定义视频。支持的音频格式：MP4, WebM、OGG
    • src：规定视频的 URL
    • controls：显示播放控件
    • autoplay：自动播放
    • loop：循环播放

4. 超链接标签

链接标签a的显示特点：

  1. a标签默认文字有下划线
  2. a标签从未点击过，默认文字显示蓝色
  3. a标签点击过之后，文字显示为紫色
标签描述
<a href = "#" target="_blank"> 点我就跳转</a>定义超链接，用于链接到另一个资源

四、列表

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
  • type：设置符号的类型

1. 无序列表 <ul>

由两个标签ul,li组成
ul表示无序列表的整体，包含多个li项。
显示特点：li前面默认显示圆点 
<ul>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>水果</li>
    <li>哈密瓜</li>
    <li>火龙果</li>
</ul>
  • 榴莲
  • 香蕉
  • 水果
  • 哈密瓜
  • 火龙果

2. 有序列表 <ol>

由两个标签ol,li组成
ol表示有序列表整体，li前默认显示序号标识

    <ol>
        <li>LGJ: 100分</li>
        <li>LJG: 99分</li>
        <li>GLJ: 98分</li>
    </ol>
  1. LGJ: 100分
  2. LJG: 99分
  3. GLJ: 98分

3. 自定义列表 <dl> <dt>

  1. dl表示自定义列表整体，包裹dt,dd
  2. dt表示自定义列表主题，dd表示每一项dt的解释说明
  3. dd相对于dt会有缩进
<dl>
        <dt>帮助中心dt</dt>
        <dd>账户管理dd</dd>
        <dd>购物指南dd</dd>
        <dd>订单操作dd</dd>
</dl>
帮助中心dt
账户管理dd
购物指南dd
订单操作dd

五、表格

标签描述
<table>定义表格
<tr>定义行
<td>定义单元格
<th>定义表头单元格
  • table：定义表格
    • width：宽度
    • border：边框
    • cellpadding：定义内容和单元格的距离
    • cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
    • bgcolor：背景色
    • align：对齐方式
  • tr：定义行
    • bgcolor：背景色
    • align：对齐方式
  • td：定义单元格
    • colspan：合并列
    • rowspan：合并行
  • th：定义表头单元格
  • <caption>：表格标题
    <table border="2" width="300" height="300">
        <caption>
            <h3>表格大标题</h3>
        </caption>
        <thead>
            <tr>
                <th>1列索引</th>
                <th>2列小标题</th>
                <th>3列表头格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1行1列</td>
                <td>1行2列</td>
                <td>1行3列</td>
            </tr>
            <tr>
                <td>2行1列</td>
                <td rowspan="2">2.2合并了3.2</td>
                <td>2行3列</td>
            </tr>
            <tr>
                <td>3.1</td>
                <!-- 删掉3.2，留给2.2 -->
                <td>3.3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>尾巴</td>
                <td colspan="2">总结，合并了右边</td>
                <!-- 删除这格 -->
            </tr>
        </tfoot>
    </table>
表格大标题
1列索引2列小标题3列表头格
1行1列1行2列1行3列
2行1列2.2合并了3.22行3列
3.13.3
尾巴总结，合并了右边
  1. 表格基本标签与相关属性
    层层嵌套：table定义表格整体 > tr表格每一行 > td表格单元格
    1. 设置table的属性
    2. border：表格的边框
    3. width：表格的宽度
    4. height：表格的高度

实际开发样式宜用css

  1. 表格结构
    table（设置表格属性）
        1.caption（整个表格大标题）
        2.thead：表格的头部
            th:表头单元格（列标题/索引），替换td的位置
        3.tbody：表格的身体
            包裹行tr，行中为td
        4.tfoot：表格的底部
4. 将水平或垂直多个单元格合并为一个 合并单元格
1.rowspan跨行合并（上下），colspan跨列合并（左右）
2.左上原则：保留左上的坐标
3.不能跨越结构：tbody的不能合并了tfoot！

六、表单

标签描述
<form>定义表单
<input>定义表单项，通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域
type 取值描述
text默认值。定义单行的输入字段
password定义密码字段
radio定义单选按钮
checkbox定义复选框
file定义文件上传按钮
hidden定义隐藏的输入字段
submit定义提交按钮，提交按钮会把表单数据发送到服务器
reset定义重置按钮，重置按钮会清除表单中的所有数据
button定义可点击按钮
input系列标签

在这里插入图片描述
< input type=“text” placeholder=“提示信息” name=“nickname” >

  1. type 为text文本框可显示内容；password密码框不显示输入内容
  2. placeholder=文本占位符，可放提示信息
  3. name=变量名

单选框

  • <input type="radio" name="sex" value="男" checked>男
  • type为radio表示单选框
  • name的变量只能取选中的value
  • checked表示该项默认选中

复选框

  • <input type="checkbox" name="fruit" value="badminton">羽毛球
  • type为checkbox表示多选

文件选择框
<input type=“file” multiple>
file：multiple可添加多个文件

按钮
submit提交，reset重置，button普通按钮，配合js添加功能
——form标签包裹整个表单才能交互，action后续学习

  • 前后端数据交互:
  • value属性：用户输入的内容，提交后发送给后端服务器
  • name属性：value的变量名 
<form action="">
        昵称：<input type="text" placeholder="提示信息" name="nickname">
        ——————文本框text：placeholder=文本占位符，name=变量名<br>
        密码框：<input type="password" placeholder="看不见我">
        ——————password:看不见输入的内容<br>
        性别：
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" vlaue="女">女
        ——————单选框radio:name表示只能选中的一个，checked默认选中<br>
        爱好：
        <input type="checkbox" name="hobby" value="coding">敲代码
        <input type="checkbox" name="hobby" value="stay_up">熬夜
        <input type="checkbox" name="hobby" value="fair_down">掉头发
        ——————复选框checkbox:checked默认选中<br>
        文件选择框：<input type="file" multiple>
        ——————file：multiple多文件选择<br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="value"><br>
        ——submit提交，reset重置，button普通按钮，配合js添加功能<br>
        ——form标签包裹整个表单才能交互，action后续学习<br>
        ——前后端数据交互:<br>
        ——value属性：用户输入的内容，提交后发送给后端服务器<br>
        ——name属性：value的变量名<br>
    </form>
按钮，下拉菜单，文本域，label

button按钮标签
<button type=“submit”>提交</button>
类型可选submit提交,reset重置,button普通按钮

select下拉菜单
每一个选项为一个option标签，selected为默认选项

所在城市:<select>
<option value=“北京”></option>
<option value=“深圳” selected></option>
</select>

textarea文本域标签
请输入文本：<textarea cols=“10” rows=“2”></textarea>

label标签
使选择框点击文字也能选中，将文本与表单标签绑定

使用方法:
1.用label将input包裹起来
2.input内标记id，并在label的for里记录id

七、布局标签

1. 无语义的布局标签div，span

标签描述
<div>定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
<span>用于组合行内元素。
    <div>我是div(一个独占一行)</div>
    <div>我是div</div>
    <span>我是span（一行显示多个）</span>
    <span>我是span</span><br>

2. 有语义的布局标签

    <header>网页的头部header</header>
    <nav>网页的导航nav</nav>
    <footer>网页的底部footer</footer>
    <aside>网页的边栏aside</aside>
    <section>网页的区块section</section>
    <article>网页的文章article</article>

九、字符实体

  1. HTML中空格合并现象
    代码中的多个空格或者换行，在网页中只显示一个空格
    想要在网页中展示特殊符号效果，需要用字符实体代替
  2. &常见字符实体
    空 格: &nbsp
    展示标签：&lt; a &gt; 显示为 <a>

HTML5速查宝典
CSS学习笔记
使用github搭建个人网站

門門要努力
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WEB：伪元素应用1：给按钮换颜色加简单动画效果（CSS）
weixin_50517811的博客
06-15 595
伪元素应用1：给按钮换颜色加简单动画效果（CSS），增加可重复使用的类 .btn，完成背景色变化动画效果。
html中按钮大小颜色代码,html如何设置button大小及颜色
weixin_39889597的博客
06-03 1万+
html如何设置button大小及颜色发布时间：2021-03-06 10:03:09来源：亿速云阅读：152作者：小新小编给大家分享一下html如何设置button大小及颜色，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！html中可以使用width和height属性来设置button的大小，使用background-color属性来颜色，具体语法为“button{width:1...
网页换色。设置4个按钮，点击按钮网页背景变成对应的颜色
Lou__Lan的博客
10-29 1529
对通过document获取页面元素节点添加事件的考察。
使用java语言实现点击按钮改变页面背景颜色
最新发布
Maywsy的博客
12-25 1326
使用java语言实现点击按钮改变页面背景颜色
html5学习笔记
01-17
一、html5页面结构 二、html5标记 三、html5结构化语义元素 四、表单 五、html5媒体元素：audio和video 六、html5绘图API 七、html5 Canvas
个人做的HTML5学习笔记
12-13
从名称来看，HTML5是HTML最新的修订版本，2014年10月由万维网联盟(W3C)完成标准制定。由此可见，HTML5继承了HTML的部分特征，又添加了许多新的语法特征，比如语义特性、本地存储特性、设备兼容特性、连接特性、网页...
HTML5学习笔记.docx
05-06
根据传智教育的培训教程，编辑整理的相关HTML5 和CSS常用用方法和技巧。注重实战使用，同时对常出现的错误作以提示！适用中低级WEB前端开发人员参考学习
winfrom_动态添加按钮button（设置颜色，大小，按钮字体大小、颜色，位置，事件）...
weixin_30599769的博客
12-29 1876
1 List<string> strColor = new List<string>(); 2 strColor.Add("#e67817"); 3 strColor.Add("#449284"); 4 strColor.Add("#974478"); 5 ...
VBA Excel速查宝典
02-08
vba查找函数,有助于查找vba函数
HTML速查手册--非常方便
04-11
HTML速查手册，PDF版 HTML速查手册，PDF版
HTML5速查中文手册
11-17
中文版HTML5速查手册，需要的朋友自己取用哦，用起来非常方便的！
每日作业-Web APIs第07天
Qiuxuntao的博客
11-09 545
文章目录一、tab栏切换二、5s跳转 一、tab栏切换 ​ 1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。 ​ 2、当点击按钮的时候，需要将这个按钮对应位置的div显示出来 提示 1.让按钮背景颜色变为gold色只需要给按钮的class增加active即可 2.让div显示出来，只需要将div的class增加current即可 3.如何利用自定义属性降按钮与下方盒子建立联系 <!DOCTYPE html> <html lang="e
html,button的背景色和文字颜色
热门推荐
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
07-06 11万+
新建 background-color表示背景色 color表示文字的颜色
html语言按钮颜色,HTML中如何改变按钮的颜色
weixin_39744606的博客
05-31 5800
HTML button按钮的边框样式与颜色都是可以修改的，用基本的HTML语法难以设计出美轮美奂的按钮风格，透过CSS却可以很容易的办到，在本篇HTML button按钮边框样式与颜色的修改介绍中，我们将会用到CSSborder属性其中的边框样式(border-style)以及边框颜色(border-color)来制做，当然按钮本身的宽度(width)与高度(height)也必须搭配使用，无论是...
html里按钮颜色怎么弄,html中按钮颜色怎么设置
weixin_39987313的博客
06-24 3768
在html中，可以通过在button按钮元素使用style属性，添加“background-color:颜色值;”样式来设置按钮的背景颜色，添加“color:颜色值;”样式来设置按钮的字体颜色。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。html中设置按钮的背景颜色按钮1按钮2效果图：说明：background-color 属性设置元素的背景...
自定义Button被点击的颜色变化效果
liuxudong1001的博客
06-29 6304
工作中经常会见到Button需要设置点击效果的情况，这里记录一下，仅供参考！先上效果图：这里没被点击的效果：650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/76/04/wKiom1ZIHB6QbYd4AAAm_7CEzNQ599.png" title="没点.PNG" alt="wKiom1ZIHB6QbYd4AAAm_7CEzN
设置UIWebView的背景颜色为透明
寻找生活和工作的支点
09-27 135
    [_webView setBackgroundColor:[UIColor clearColor]];     [_webView setOpaque:NO];
html设置按钮背景颜色与背景图片一样，即设置按钮背景透明
七叶林的博客
02-29 2万+
关于html中如何设置按钮背景与背景图片一样，寻思了好久，代码如下<style type="text/css"> .banner .container .middle > a { margin-left:640px; margin-top:500px; text-align: center; font-size: 18px; position: relativ
黑马html学习笔记
09-15
以下是一些HTML学习笔记的内容： 1. HTML的全称是超文本标记语言，它用于创建网页和网页应用程序的结构。 2. HTML使用标签来定义页面的不同元素。例如，标签用于定义一个标题，标签用于定义一个段落等。 3. HTML...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值