1. Toy模板网首页
  2. > Toy博客

HTML5笔记

9月前 作者：saddhu. 分类：Toy博客 阅读(37) 违法举报

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

HTML5笔记

入门基础技术点

html5 + css3 +移动web

基础环境 ： 编辑器用vscode 浏览器用谷歌

HTML

概念：超文本标记语言 HyperText Markup Language

超文本是链接

标记 也叫标签带尖括号的文本

标签语法

  1. 标签成对出现，中间包裹内容
  2. <> 里面放英文字母也就是标签名字
  3. 结束标签比开始标签多 /

例如加粗文字

要加粗的文字

HTML 是骨架 网页模板 CSS是样式 js是交互

骨架内容

  1. html ：整个网页
  2. head：网页头部，存放给浏览器识别的代码例如css代码
  3. body： 网页主体存放给用户看的代码，例如图片、文字
  4. title：网页标题

vscode中快速生成骨架可以使用!+回车或则+tab

标签关系

父子关系(嵌套关系)

兄弟关系(并列关系)

<html>
    <head></head>
    <body></body>
</html>

html标签与head和body就是嵌套关系

head与body就是并列关系

注释

格式：

快捷键ctrl+/

标题标签

标签名：h1~h6（双标签，中间包裹内容）

会有换行效果 ， 级别标题

h1标签一般一个页面只出现一次 作为主标题或者网页logo

h2~h6则可以多次使用

段落标签

标签名：p(双标签)

效果：形成换行效果

<p>需要显示换行效果的文字</p>  a
<p>需要显示换行效果的文字</p>  b
<!--a行和b行之间会出现一行空白-->

换行标签

单标签:

水平线标签

单标签:

文本格式化标签

效果：突出重点

常见格式：加粗、倾斜、下划线、删除线等

标签名(自带强调意义) 效果
strong b 加粗
em i 倾斜
ins u 下划线
del s 删除线

都是双标签

图像标签

单标签

<img src="img_URL" alt/title/width/hight>
<!--属性 :alt/title/width/hight >
属性 作用 说明
alt 替换文本 图片无法显示时显示文字
title 提示文本 鼠标悬停在图片上面的时候显示的文字
width 图片宽度 一般写数字
height 图片高度 一般写数字（图片缩放是等比例缩放）

标签名和属性之间用空格隔开 属性名=“属性值”

路径有绝对路径、相对路径、网络路径

超链接标签

双标签：

<!--跳转到网页文件-->
<a href="https://www.baidu.com">跳转到百度</a>
<!--跳转到本地文件 并且打开新界面跳转-->
<a href="./index.html" target="_blank">跳转到index</a>

多媒体标签

音频标签
<audio src="音频URL"></audio>
属性 作用 特殊说明
src *** 音频URL mp3 、ogg、wav
controls 显示音频控制面板 controls=“controls” 在html5中如果属性名和属性值完全一样可以简写为一个单词
loop 循环播放 同上
autoplay 自动播放 同上 (浏览器一般默认禁用此属性)
视频标签

双标签

<video src="视频URL"></video>

常见属性 : 与音频标签的controls loop autoplay 一样 支持MP4、WebM、Ogg格式 多出一个muted属性 : 静音播放 并且视频的autoplay需要配合着muted属性才能使用

列表标签

作用:布局内容整齐的区域

三种格式 : 无序列表(多用)、有序列表、定义列表

无序列表

标签名: ul 嵌套 li, ul是无序列表 ，li是列表条目

<ul>
    <li>条目1</li>
    <li>条目2</li>
    ...
</ul>
有序列表

标签名: ol 嵌套 li, ol是无序列表 ，li是列表条目

<ol>
    <li>条目1</li>
    <li>条目2</li>
    ...
</ol>
定义列表

标签名: dl 嵌套 dt 和dd , dl是定义列表 ，dt是定义列表的标题，dd是定义列表的描述

<dl>
    <dt>标题1</dt>
    <dd>描述1</dd>
    <dd>描述1-2</dd>
    <dt>标题2</dt>
    <dd>描述2</dd>
    ....
</dl>

表格标签

标签：table嵌套 tr ，tr嵌套 td/th

在网页中，table默认没有边框线，使用border属性可以为表格添加边框线

标签名 作用
table 表格
tr 行
th 表头单元格
td 内容单元格
表格结构

用表格结构标签将内容划分区域，让表格结构更清晰

标签名 含义 说明
thead 表格头部 表头
tbody 表格主体 主要内容
tfoot 表格底部 信息汇总

具体格式如下(因为一般表格结构是否添加对于视觉无伤大雅所以一般取消表格结构 直接采用表格标签)

    <table>
        <thead>
            <tr>
                <th>表头</th>
            </tr>

        </thead>
    <tbody>
        <tr>
            <td>内容1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总1</td>
        </tr>
    </tfoot>
    </table>
合并单元格

跨行合并 添加属性rowspan (会保留最上列单元格)

取值是数字表示需要合并的单元格数量

跨列合并 添加属性colspan (会保留最左列单元格)

取值是数字表示需要合并的单元格数量

注意 : 不能跨结构合并

表单标签

表单一般用于登陆注册界面

input标签
<input type="...">     <!--input标签是单标签-->
属性 说明
text 文本框
password 密码框
radio 单选框
checkbox 多选框
file 上传文件

文本框属性: placeholder 提示文字(浅色文字)密码框也能用。

单选框属性:name可以实现单选功能 将需要单选的选项标签中添加属性name 属性值自定义 相同的name属性值分为一组来实现单选功能; 如果想实现默认选中功能要添加属性checked 当然这个属性和属性值相同只需要添加checked即可

upload file属性:如果要上传多个属性添加multiple属性即可

**checkbox的默认选中:**同样是属性checked

input不会换行

下拉菜单

标签：select 嵌套 option ，select是下拉菜单整体 ，option是菜单中的每一项。

  	城市: 
	<select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

默认显示属性: selected

文本域

作用：多行输入文本的表单控件

特点是右下角可以放大缩小一般都会禁用，尺寸一般由css设置

<textarea>默认提示文字</textarea>
label标签

作用：网页中，某个标签的说明文体，使用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。就像单选性别的时候点文字“男”或者“女”都能选中 支持很多表单控件

写法一

<input type="radio" id="man">
<label for="man">男</label>

写法二

<label><input type="radio">女</label>

按钮标签

button

<button type="">按钮</button>
<!--默认是submit提交按钮-->
type属性 说明
submit 提交按钮，提交数据到后台(默认功能)
reset 重置按钮，表单恢复默认值
button 普通按钮，默认没有功能，一般配合js使用

注意: 所有表单控件都要写在表单区域from中 只有这样才能实现功能。

<from action="发送数据的地址">
    ...
    ...
</from>

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

<div> 独占一行</div>
  • div 独占一行
  • span 不换行
<span> 不换行</span>

字符实体

作用：在网页中预留字符文章来源地址https://www.toymoban.com/news/detail-789832.html

空格		   &nbsp;   
<       	&lt;    
>       	&gt;

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

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

分享到：
领支付宝红包 赞助服务器费用

相关文章

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包