HTML5

声明:本文是我学习B站“狂神说java”所做的笔记,上传至此只是为了方便,要想学习,请去关注这个宝藏男孩吧

HTML5

1、什么是HTML?

HTML(Hyper Text Markup Language):超文本标记语言

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

1.1、W3C标准

1.1.1、W3C

  • World Wide Web Consortium (万维网联盟)
  • 成立于1994年,Web技术领域最具权威和影响力的国际中立性技术标准机构
  • http://www.w3.org/
  • http://wwwchinaw3c.org/

1.1.2、W3C标准包括

  • 结构化标准语言(HTML、XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM、ECMAScript)

1.2、HTML基本结构

HTML5_第1张图片

、等成对出现的标签,分别叫做开放标签和闭合标签,

单独呈现的标签(空元素),如


,意为用/来关闭空元素

1.3、HTML基本信息

  • DOCTYPE声明:告诉浏览器我们使用什么规范

  • title标签

  • meta标签



<html lang="en">
    
    <head>
        
        <meta charset="UTF-8">
        <meta name="keyword" content="第一次写HTML">
        <meta name="description" content="学习">
        
        <title>我的第一个HTMLtitle>
    head>

    
    <body>
        我的第一个网页
    body>
html>

2、网页基本标签

2.1、标题标签

  
    <h1>一级标签h1>
    <h2>二级标签h2>
    <h3>三级标签h3>
    <h4>四级标签h4>
    <h5>五级标签h5>
    <h6>六级标签h6>

2.2、段落标签

 
    <p>两只老虎,两只老虎,p>
    <p>跑得快,跑得快,p>
    <p>一只没有眼睛,p>
    <p>一只没有尾巴,p>
    <p>真奇怪!真奇怪!。p>

2.3、换行标签

 
    两只老虎,两只老虎,<br/>
    跑得快,跑得快,<br/>
    一只没有眼睛,<br/>
    一只没有尾巴,<br/>
    真奇怪!真奇怪!。<br/>

2.4、水平线标签

  
    <hr/>

2.5、字体样式标签


    <h1>字体标签h1>
        粗体:<strong>I Love Youstrong>
        斜体:<em>I Love Youem>

2.6、注释和特殊符号


    
    空格: <br/>
    大于:><br/>
    小于:<<br/>
    版权:©<br/>

3、图像标签

HTML5_第2张图片

src:图片地址(必填)

相对路径:…/表示上一级目录

绝对路径

alt:图片加载失败时显示的文字(必填)

title:鼠标悬停文字

width=“1920” height=“1024”:图片的大小

<img src="../resources/img/1.jpg" alt="背景" title="悬停文字" width="1920" height="1024">

4、链接标签

href:连接地址,跳转的地址(必填)

target:表示窗口在哪打开

_blank:在新标签中打开网页

_self:在自己的网页中打开

<a href="我的第一个网页.html" target="_blank">点击我跳转到我的第一个网页a>
<a href="http://www.baidu.com/" target="_parent">点击我跳转到百度a>

<br/>
<p><a href="我的第一个网页.html">
    <img src="../resources/img/1.jpg" alt="点击我跳转到我的第一个网页" title="点击我跳转到我的第一个网页" width="500" height="300">
a>p>

锚链接

​ 1.需要一个锚标记

​ 2.跳转到标记


<a name="top">顶部a>
<a href="#down">回到顶部a>
···
···
···

<a href="#top">回到顶部a>

<a name="down">底部a>

功能性链接

​ 邮件链接:mailto:邮箱

​ QQ链接:百度QQ推广获取

<a href="mailto:[email protected]">点击a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=935074243&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:935074243:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
a>

5、块元素和行内元素

**块元素:**无论内容多少,该元素独占一行,如:p、h1-h6

**行内元素:**内容撑开度,左右都是行内元素的可以排在一行,如:a.strong.em

6、列表标签

6.1、有序列表

​ 运用范围:考试、应答

<ol>
    <li>Javali>
    <li>Pythonli>
    <li>C++li>
    <li>运维li>
ol>

6.2、无序列表

​ 运用范围:导航、侧边栏

<ul>
    <li>Javali>
    <li>Pythonli>
    <li>C++li>
    <li>运维li>
ul>

6.3、自定义列表

​ dl:标签

​ dt:列表名称

​ dd:列表内容

​ 运用范围:网站底部

<dl>
    <dt>科目dt>
    <dd>Javadd>
    <dd>Pythondd>
    <dd>C++dd>
    <dd>运维dd>

    <dt>位置dt>
    <dd>西安dd>
    <dd>甘肃dd>
    <dd>新疆dd>
    <dd>宁夏dd>
dl>

7、表格标签

行:tr

列:td

border:分割线

<table border="1px">
    <tr>
        
        <td colspan="4">1-1td>
    tr>
    <tr>
        
        <td rowspan="2">2-1td>
        <td>2-2td>
        <td>2-3td>
        <td>2-4td>
    tr>
    <tr>
        <td>3-1td>
        <td>3-2td>
        <td>3-3td>
    tr>

table>

8、媒体元素

src:资源路径

controls:控制器,有它才能看到

autoplay:自动播放

8.1、视频标签video

<video src="../resources/video/【狂神说Java】HTML09:媒体元素.mp4" controls autoplay>video>

8.2、音频标签audio

<audio src="../resources/audio/HTML09:媒体元素.m4a" controls autoplay>audio>

9、页面结构分析

HTML5_第3张图片

<header>
    <h2>网页头部h2>
header>

<section>
    <h2>网页主体h2>
section>

<footer>
    <h2>网页脚部h2>
footer>

10、iframe内联框架

HTML5_第4张图片

src:地址

width、height:宽度高度

name:框架标示名

<iframe src="" name="hello" width="1000px" height="500px">iframe>

<a href="https://space.bilibili.com/95256449/" target="hello">点击跳转a>

11、表单

HTML5_第5张图片

action:表单提交的位置,可以是网站,可以是一个请求处理地址

method:post,get 提交方式

get方式提交可以在URL中看到我们提交的信息,不安全,但高效

post方式提交,比较安全,传输大文件

11.1、表单元素格式

HTML5_第6张图片

<h1>注册h1>

<form action="我的第一个网页.html" method="get">
    
    <p>名字:<input type="text" name="username">p>

    
    <p>密码:<input type="password" name="password">p>

    
    <p>性别:
        <input type="radio" value="boy" name="sex"/><input type="radio" value="girl" name="sex"/>p>

    
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    p>

    
    <input type="button" name="btn1" value="点击边长">
    

    
    <p>国家:
        <select name="列表名称">
            <option value="china">中国option>
            <option value="us">美国option>
            <option value="yd">印度option>
            <option value="rd" selected>瑞士option>
        select>
    p>

    
    <p>
        <input type="file" name="files">
        <input type="button" value="upload">
    p>

    
    <p>
        <textarea name="textarea" id="" cols="50" rows="10">文本内容textarea>
    p>

    
    <p>邮箱:
        <input type="email" name="email">
    p>

    
    <p>url:
        <input type="url" name="url">
    p>

    
    <p>number:
        <input type="number" name="number" max="9" min="0" step="2">
    p>

    
    <p>音量:
        <input type="range" min="0" max="100" step="2" name="voice">
    p>

    
    <p>搜索:
        <input type="search" name="search">
    p>

    <p>
        <input type="submit">
        <input type="reset">
    p>
form>

隐藏域:hidden

只读:readonly

禁用:disable

11.2、表单的初级验证

placeholder:提示信息

required:非空判断

pattern:正则表达式

正则表达式速查表:https://www.jb51.net/tools/regexsc.htm


<p>自定义邮箱:
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
p>

12、总结

HTML5_第7张图片

你可能感兴趣的:(Study)