HTML5 教程学习笔记

最新推荐文章于 2023-02-14 18:25:45 发布

积_木

最新推荐文章于 2023-02-14 18:25:45 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/timmy___/article/details/119360749

版权

本文章为自学笔记，观看教学视频为B站《狂神说Java HTML5完整教学通俗易懂》

01：初识HTML

HTML：超文本标记语言

超文本包括：文字、图片、音频、视频、动画等

W3C标准

W3C：万维网联盟，中立性技术标准机构。

W3C标准包括

结构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

HTML基本结构

<html>

<head>

        <title>标题</title>

</head>

<body>
         网页

</body>

</html>

成对的标签，分别叫做开放标签和闭合标签，如<body>、</body>

单独呈现的标签（空元素），如<hr/>；意为用 / 来关闭空元素

02：网页基本信息

注释：

DOCTYPE：告诉浏览器，要使用什么规范

head标签：代表网页头部

body标签：代表网页主体

meta描述性标签：描述网站的一些信息，一般用来做SEO

03：网页基本标签

1.标题标签 h

h1、h2、h3、h4、h5、h6 由大到小

2.段落标签 p

快捷键：先打出p，再按tab键，可以变为<p></p>

3.换行标签 <br/>

4.水平线标签 <hr/>

5.字体样式标签

粗体<strong> </strong>

斜体<em> </em>

6.注释和特殊符号

特殊符号记忆方式：'&'开头，';'结尾

空格： 

大于号：>

小于号：<

版权符号：©

04：图像标签 img

常见的图像格式：JPG 、GIF、 PNG、 BMP……

<img src="path" alt="text" title="text" width="x" height="y" /> (之间没有逗号)

src：图像地址【必填】
alt：图像的替代文字（当图像显示不了时显示替代文字）【必填】
title：鼠标悬停提示文字
width、height：图像宽度高度

相对地址（推荐）、绝对地址

../ 上一级目录：相对于HTML而言

05：超链接标签及应用 a

href：表示要跳转到哪个页面【必填】

target：表示窗口在哪里打开

_blank：在新标签页中打开
_self：在自己的网页中打开（默认）

超链接

页面间链接
- 从一个页面链接到另一个页面
锚链接
功能性链接

锚链接

需要一个锚标记（name）
跳转到标记（href）href="#标记名"

功能性链接

邮件链接：mailto：

<a href="mailto:邮箱" >点击联系我</a>

QQ链接：搜索QQ推广官网，里面会生成代码

06:块元素和行内元素

块元素：无论内容多少，该元素独占一行（p、h1--h6）

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em）

07：列表标签

列表：信息资源的一种展示形式。它可以使信息结构化和条理化，并列表的样式展示出来。以便浏览者能更快的获得相应的信息

列表的分类

有序列表、无序列表、定义列表

有序列表 12345 ol

<ol>

<li></li>

</ol>

无序列表 ········ ul

<ul>

<li></li>

</ul>

定义列表（没12345和小黑点） dl：标签 dt：列表名称 dd：列表内容

<dl>

<dt></dt>

<dd></dd>

</dl>

08：表格标签 table

表格：简单通用、结构稳定

表格基本结构：单元格、行、列、跨行（合并单元格）、跨列

行 tr

列 td

跨列：<td colspan=" "></td>

跨行：<td rowspan=""></td>

<tr>

</tr>

</table>

09：媒体元素

视频元素 ：video

音频元素 ：audio

controls：控制条

autoplay：自动播放

10：页面结构分析

重点掌握header、fotter、nav

11：iframe内联框架

src :引用页面地址

name：框架标识名

w-h:宽度高度

可以通过a标签向iframe添加

12：初识表单post和get提交

表单（类比登录框） form

method：提交方式，规定如何发送表单数据，常用值：get、post

get：可以在url中看到提交的信息，不安全，高效

post：比较安全，传输大文件

action：提交位置，表示向何处发送表单数据，可以是网站，也可以是请求处理地址

输入框标签input

文本输入框<input type="text" name="">

密码框<input type="password" name="">

提交、重置（清空）

13：文本框和单选框

表单元素格式

单选框标签：（name要一样）

radio:单选框的值

name:表示组,组名一样时，只能选一个

例子：

<p>性别：

<input type="radio" value="boy" name="sex" checked/>男 (checked表示默认被选中)

<input type="radio" value="girl" name="sex"/>女

</p>

14：按钮和多选框

多选框标签：（name也要一样）

<input type="checkbox" value="" name="" checked> (checked表示默认被选中)

按钮

图片实现提交的效果：<input type="image" src="">

type：

"button" 普通按钮
"image" 图像按钮
"submit" 提交按钮
"reset" 重置按钮

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

下拉框 select

<p>

<select name="">

<option value="选项的值" selected></option>（selected表示被选中）

<option value="选项的值"></option>

</select>

</p>

文本域 textarea

<textarea name="" cols="列数" rows="行数">文本内容</textarea>

文件域 input type="file"

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

邮件验证 email

URL验证 url

数字验证 number

<input type="number" name="" max="" min="" step=""> (step 步长）

滑块验证 range (可用于音量调节)

搜索框 search

17：表单的应用

隐藏域 hidden

<input type="password" name="" value="123456" hidden> （隐藏了不显示，值value还在）

只读 readonly

禁用 disabled

<input type="radio" value="boy" name="sex" checked disabled/>男

增强鼠标可用性 label

<lable for=""></lable> 指向for位置""为id=""

18：表单初级验证

常用方式

placeholder 用于输入框控件提示信息

required 用于输入框控件非空判断

pattern 正则表达式

正则表达式速查表（脚本之家） https://www.jb51.net/tools/regexsc.htm

19：HTML总结

积_木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 教程学习笔记

本文章为自学笔记，观看教学视频为B站《狂神说Java HTML5完整教学通俗易懂》01：初识HTMLHTML：超文本标记语言超文本包括：文字、图片、音频、视频、动画等W3C标准W3C：万维网联盟，中立性技术标准机构。W3C标准包括结构化标准语言（HTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript）HTML基本结构<html><head> ...
复制链接

扫一扫