前端基础 01、HTML5 入门

1. 初识 HTML

HyperTextMarkupLanguage（超文本标记语言）
- 超文本包括：文字、图片、音频、视频、动画。

HTML5的优势
- 世界知名浏览器厂商对HTML5的支持
- 市场的需求
- 跨平台
W3C标准
- W3C
  - 万维网联盟 （World Wide Web Consortium） 。
  - 成立于1994年，Web领域最权威和最具影响力的国际中立性技术标准机构。
  - https://www.w3.org/
  - https://www.chinaw3c.org/
- W3C标准包括
  - 结构化标准语言(HTML、XML)
  - 表现标准语言(CSS)
  - 行为标准语言(DOM、ECMAScript)
常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- ……
< body >、< /body>等成对的标签，分别叫做 开放标签和 闭合标签。
单独呈现的标签（空元素），如< hr/ >，意为用/来关闭空元素。

html注释：< !–注释内容–>







    
    
    
    
    
    
    我的第一个网页



Hello HTML5!

2. 网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号




    
    基本标签



一级标签
二级标签
三级标签
四级标签
五级标签
六级标签

p换行1
p换行2



换行1 

换行2 



字体样式标签
粗体:I am CSS. 

斜体:HTML5 and CSS3 


空格:1 2  3   4

空格:1 2 3 4

大于号:>

小于号:<

版权符号:©

3. 图像、超链接、网页布局

图像标签




    
    图像标签

链接标签
- href：必填，表示要跳转到那个页面；
- target：表示窗口在哪里打开；
  - _blank：在新标签中打开；
  - _self：在自己的网页中打开；




    
    链接标签



点击跳转百度




    







百度底部 


点击联系我


    


回到顶部

行内元素和块元素
- 块元素：无论内容多少，该元素独占一行。
```
 ...
```
- 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。

元素名	描述
header	标题头部区域的内容（用于页面或者页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web 页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

4. 列表、表格、媒体元素

1. 列表

什么是列表

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

列表的分类

无序列表

有序列表

自定义列表

列表学习 Java Python 前端运维 C/C++ Android Java Python 前端运维 C/C++ Android 学科 Java Python 前端运维 C/C++ Android

2. 表格

为什么使用表格：

简单通用

结构稳定

表格的基本结构：

单元格

行

列

跨行

跨列

表格学习 1-1 2-1 2-2 2-3 2-4 3-1 3-2 3-3

3. 媒体元素

视频和音频

视频：video

音频：audio

媒体元素的学习

页面结构

元素名描述

header 标题头部区域的内容（用于页面或者页面中的一块区域）

footer 标记脚部区域的内容（用于整个页面或页面的一块区域）

section Web 页面中的一块独立区域

article 独立的文章内容

aside 相关内容或应用

nav 导航类辅助内容

页面结构页面头部页面主体页面脚部

iframe 内联框架

ifram 标签，必须要有 src 属性即引用页面的地址。

给标签加上 name 属性后，可以做 a 标签的 target 属性，即在内联窗口中打开链接。

iframe 内联框架点击跳转

5. 表单及表单应用

标签说明

input 大部分表单元素对应的标签有 text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text，可以提交用户名、密码等

select 下拉选择框

textarea 文本域

from 标签，action 属性，为所提交的目的地址，method 选择提交方式，可以选择使用 post 或者 get 方式提交。

get 效率高，但在 url 中可以看到提交的内容，不安全，不能提交大文件；

post 比较安全，且可以提交大文件。

登陆注册注册名字：密码：

get 方式提交

文本框和单选框

属性说明

type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text。

name 指定表单元素的名称（提交时所对应的 key）。

value 元素的初始值，radio 必须提供。

size 指定表单元素的初始宽度。当 type 为 text 或者 password 时，以字符为单位；其他 type 以像素为单位。

maxlength type 为 text 或者 password 时，输入的最大字符数。

check type 为 radio 或者 checkbox 时，指定按钮是否被选中。

登陆注册注册名字：密码：性别: 男女

按钮和多选框

登陆注册注册名字：密码：性别: 男女爱好: 睡觉敲代码聊天游戏

列表文本框和文件域

登陆注册注册名字：密码：性别: 男女爱好: 睡觉敲代码聊天游戏国家: 反馈: 文本内容

搜索框滑块和简单验证

登陆注册注册名字：密码：性别: 男女爱好: 睡觉敲代码聊天游戏国家: 反馈: 文本内容邮箱： url：商品数量：音量：搜索：

表单的应用

属性说明

readonly 只读，不可更改

disable 禁用

hidden 隐藏，虽然不可见但是会提交

id 标识符，可以配合 label 的 for 属性，增加鼠标的可用性

placehoder text 文字域等输入框内的提示信息

required 不能为空

patten 正则表达式验证

登陆注册注册名字：密码：性别: 男女爱好: 睡觉敲代码聊天游戏国家: 反馈: 文本内容邮箱： url：商品数量：音量：搜索：点击标签可选择文本框：

6. 表单初级验证

常用方式

placeholder：提示信息

required：非空判断

pattern：正则表达式

自定义邮箱:

7. HTML5 总结

标签	说明
input	大部分表单元素对应的标签有 text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text，可以提交用户名、密码等
select	下拉选择框
textarea	文本域

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text。
name	指定表单元素的名称（提交时所对应的 key）。
value	元素的初始值，radio 必须提供。
size	指定表单元素的初始宽度。当 type 为 text 或者 password 时，以字符为单位；其他 type 以像素为单位。
maxlength	type 为 text 或者 password 时，输入的最大字符数。
check	type 为 radio 或者 checkbox 时，指定按钮是否被选中。

属性	说明
readonly	只读，不可更改
disable	禁用
hidden	隐藏，虽然不可见但是会提交
id	标识符，可以配合 label 的 for 属性，增加鼠标的可用性
placehoder	text 文字域等输入框内的提示信息
required	不能为空
patten	正则表达式验证

前端基础 01、HTML5 入门

1. 初识 HTML

2. 网页基本标签

一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

字体样式标签

3. 图像、超链接、网页布局

...

4. 列表、表格、媒体元素

1. 列表

2. 表格

3. 媒体元素

页面头部

页面主体

5. 表单及表单应用

注册

注册

注册

注册

注册

注册

6. 表单初级验证

7. HTML5 总结

你可能感兴趣的:(前端基础 01、HTML5 入门)