HTML5(入门)

目录

一、HTML5概念和基本的结构

二、基本标签学习

三、图像标签

四、连接标签

五、列表标签

六、表格标签 table

七、媒体标签

 八、网页结构

九、内联框架 iframe

十、表单标签    form

十一、初级验证:


一、HTML5概念和基本的结构

 1.概念:HTML全称叫超文本标签语言(Hyteper Text Markup Language)

HTML是一种标记语言,5代表版本号,现在已经是第五个版本了。通过 一系列标签 可以将网络上的文档格式统一,使分散的互联网资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。

2.作用:前端领域,搭配css和js设计网页。

3.HTML5遵循的标准:

W3C标准

                 1)结构化标准语言

                 2)表现标准语言

                 3)行为标准

    //只要在浏览器上搜索相关词汇就能找到该网页

注释:              //ctrl+/
//表示浏览器的使用规范,一般默认都是html的规范





    

    网页一


Hello world!

块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大块元素:无论内容多少,该元素独占一行(p\h1-h6...),换行的间距比换行标签(br)要大 点击回到首页

二、基本标签学习:

一级标签

//标题标签,只有h1~h6,h6以后无效,字体默认加粗

//段落标签ctrl+tab

//换行标签,在p标签中可以直接换行,直接换行后用
无效

//水平线标签
//字体样式标签
粗体字
斜体
//注释和特殊符号
 //空格
>//大于符号  //> <可以直接打出来
<//小于
©//版权符号

注:(1)当换行标签写在标题标签的外面时,会换两行,因为每个标题标签自带换行
       (2)换行标签的换行比两个标题标签之间的换行更紧凑
       (3)写在主题标签里面的换行标签不能换相邻的两个主题标签,会直接默认使用主题标签的换行
块元素:无论内容多少,该元素独占一行(p\h1-h6\列表标签\...),换行的间距比换行标签(br)要大
行内元素:内容撑开宽度,(换行数量由内容和长度决定的,内容一定,页面长度越短,换行越多;页面长度一定,内容越多,换行越多)。
                左右都是行内元素可以排在一行(strong\em\a\媒体标签(video audio)\.....)




    
    基本标签的使用


望岳

            (杜甫)


岱宗夫如何,
齐鲁青未了。

会当临绝顶,

一览众山小。

1+1>2

君不见黄河之水天上来,
奔流到海不复回;

君不见高堂明镜悲白发,
朝如青丝暮成雪。


©著作权为孤影所属,请勿未经允许转载!

三、图像标签(image:图像  video:视频 audio:音频)

img +tab
src="":用来搜索图片地址的,图片地址有
     相对地址,绝对地址(绝对地址是指从根目录开始的地址,相对地址从上一个开始)
    ../ 表示当前地址上一个地址,回退到上一个地址
alt="":如果图像地址未找到,显示文字
title="":悬停文字(鼠标停放在图片上会显示的文字)  //可以用在图像标签、媒体签中
width="宽度"
height="高度 "//width\height属性也可以用于视频大小的设置、内联框架的大小设置
eg:




    
    图像标签的学习




郭辉平
加载失败,请重新加载!

       郭辉平
加载失败,请重新加载! 点击回到首页

四、连接标签

a标签
点击我跳转到某网页(标注) //标注可以是文字、图片、视频
   _self 在当前网页打开,一般未设置target都默认在当前网页打开
   _blank 在新的网页中打开

功能性链接
(1)锚链接首页
    用来标记的,标记在哪就跳到哪
    标记位置:首页
    跳转位置:点击回到顶部

(2)邮件链接(可以点击直接向指定邮箱发送邮件)

(3)QQ链接(可以点击直接加指定QQ号)

………………




    
    链接标签的学习



首页

链接标签的学习

点击跳转到基本标签的学习

图片超链接的学习

加载失败,请重新加载!

在新的网页中打开我的图片

点击跳转到图像标签的使用

功能性链接的使用

点击添加好友

锚链接的使用

加载失败,请重新加载!

加载失败,请重新加载!

加载失败,请重新加载!

加载失败,请重新加载!

点击回到顶部

五、列表标签

1)列表的定义:列表是一种展示形式,它可以使信息结构化、条理化,并以列表的形式显示出来,以便浏览者更便捷的获得相应的信息。
2)列表分类:1、有序列表 (应用:试卷,问答...) ordered list
                     


                               

  1.                             ...
                         

                      2、无序列表 (导航,侧边栏...)unordered list
                     

                                 

  •                              ...
                           

                      3、自定义列表(公司,网站底部...)definition list
                       

                             
//列表名称 definition title (内容前面有空格)
                             
//列表内容definition details (内容前面无空格)
                             ...//dt与dd是可以嵌套使用的
                             

                             

                             ...
                           
...//dd,dt能够相互嵌套
                             ...
                       




    
    列表标签的学习


有序列表

  1. 选择题
  2. 填空题
  3. 计算题
  4. 证明题

无序列表

  • 选择题
  • 计算题
  • 填空题
  • 证明题

自定义列表

小明的成绩单:
数学:98
英语:88
语文:85
小红的成绩单:
数学:89
英语:100
语文:92

dt和dd的嵌套使用

计科一班的成绩单

张三的成绩单:
数学:98
英语:88
语文:85
李四的成绩单:
数学:89
英语:100
语文:92

HTML5(入门)_第1张图片

六、表格标签 table


            //行 row
                    //列 table data cell(表格数据单元格)
           
            ...
             // rowspan 跨行(行跨距) colspan 跨列(列跨距) (column: 列  span:跨距,横跨)
            //跨行,跨列默认跨所在行或列的下一行或列

align属性保存表的对齐方式。可能的值是轴,基线,底部,中心和顶部。许多标签(标题标签、表格标签(dd\table都可以居中)...)都可以接受此属性。
//视频居中需要在body中设置样式信息:,此时body内部所用的内容都是居中形式
用法:

align中的属性值

1)axis+数字:此属性定义表接受的int编号的行对齐方式。

2)baseline:此属性设置表格在基线处的对齐方式。

3)bottom:此属性在底部设置表格的对齐方式。

4)center:此属性设置表格在中心的对齐方式。\\文字、图片居中

5)top:此属性将表格的对齐方式设置在顶部。




    
    表格标签的学习


学生成绩
狂神 语文 59
数学 100
秦疆 语文 100
数学 100

HTML5(入门)_第2张图片

七、媒体标签

媒体元素:音频(audio)、视频(video)


controls:控制条 
autoplay:自动播放 //如今大多数浏览器都是禁止自动播放




    
    媒体元素标签的学习


音频

视频


HTML5(入门)_第3张图片

 八、网页结构

1)header:网页头内容部
2)footer:网页底部内容
3)section:网页主题部分
4)article:独立的文章内容
5)aside:相关内容和应用(常用于侧边栏)
6)nav:导航类辅助内容




    
    页面结构分析



        <

元素名

描述

header

网页头部内容

footer

网页底部部内容

section

网页中的一块独立区域

article

网页中的文章内容

aside

网页中相关内容或应用(常用于侧边栏)

nav

网页中导航类辅助内容

HTML5(入门)_第4张图片

九、内联框架 iframe


iframe标签相当于是提供一个窗口,其他跳转标签使用target属性使待跳转的内容在iframe窗口中展现出来




    
    内联框架学习



点击跳转


 HTML5(入门)_第5张图片

十、表单标签    form

1.表单的基本标签


1)action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
2)method:表单提交的方式
                   get:表单提交的内容可以在url(网址输入框)中看到,安全性低,但是高效,只能提交小文件
                   post:表单提交的内容能够通过网页检查的方式看到,相对get更安全,并且能够提交大文件
3)input:输入框
     type:输入框的种类  
     name:输入框的名字,用来区别不同的输入框(输入框必填)
    \\提交按钮
    \\重置按钮
    //文本输入框 
    //密码输入框
    //单选框,value必填(必须同属于一个组,才起到单选框的作用)
4)vaule="输入框初始值"   
    maxlength="该输入框可输入的最长字符"  //限制输入字符的多少,maxlength=输入的的汉字数+英文数+数字数+符号(无法输入tab和回车)
    size="输入框的长度"//只有视觉上的影响,不影响输入字符的多少

2.输入框和按钮标签
1)type:指定元素类型。text(文本框)、password(密码框)、checkbox(多选框)、radio(单选框)、submit(提交(表单)按钮)、reset(重置(表单)按钮)、
            file、hidden、image(图片按钮,和submit一样点击会自动提交表单)和button(普通按钮)。默认为text
2)name:指定表单元素的名称,同时也是文本框分组的一个依据  //最好用英文命名,否则容易乱码
3)value:元素的初始值。type为radio时必须指定一个值(自动呈现出来的内容)
4)size:指定表单元素的初始宽度(width、height)。当type为text或password时,表单元素的宽度以字符为单位;对于其他类型,宽度以像素为单位
5)maxlength="该输入框可输入的最长字符" (type为text或password时) //限制输入字符的多少,maxlength=输入的的汉字数+英文数+数字数+符号(无法输入tab和回车)
6)checked:type为radio或checkbox时,指定按钮是否是被选中(默认选中)
7)selected:下拉框默认选中
8)readonly:只读 //默认值使用这个,会使默认值无法更改
9)disable:禁用 //禁止选择,会使一些选项无法选择
10)hidden:隐藏//会隐藏文本框,隐藏后会导致无法在文本框中输入数据,但是默认值仍然存在
11)placeholder:文本框提示语句//一旦输入信息后自动消失
12)required:非空判断//使文本框输入不能为空
13)pattern:正则表达式判断文本框输入格式

3.列表框文体域和文件域
1)下拉框标签:
2)文本域
  //cols 文本域的行 rows 列 设置行和列只是默认展示值,实际大小可通过鼠标直接拉动
3)文件域
       




    
    表单的学习


名字:
密码:

性别:

爱好: 睡觉 游戏 登山 游泳 打球

国籍:


QQ邮箱:

网址:

数字:

HTML5(入门)_第6张图片

十一、初级验证:

1.邮件验证
   

邮箱:
       
   


2.网址验证
   

网址:
       
   


3.数字验证
1)min:数字最少输入的位数
2)max:数字最多输入的位数
3)step:数字步长从零开始,可加可减;(常用于购物车中商品数量的选择)默认为any,步长为1
   


       
   


4.滑块(常见于音量或亮度的设计)
   
5.搜索框
   

搜索:
       
   


6.增强鼠标可用性
1)通过id属性可以使鼠标点击字符直接跳转到文本框
   


       
   

HTML5(入门)_第7张图片

你可能感兴趣的:(前端开发,#,HTML+CSS,html5,idea)