HTML

顺晟科技

2022-09-15 21:22:00

165

HTML思维导图

以下就是按照导图由上到下详细说明

什么是HTML？

HTML ： Hyper Text MarkUp Language （超文本标记语言）

什么是文本？

文本：文字、有格式的文本

什么是超文本？

文字，图片，音频，视频，动画、定位…….

什么是标签语言？

标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。标记语言不仅仅是一种语言，就像许多语言一样，它需要一个运行时环境，使其有用。提供运行时环境的元素称为用户代理。

IDEA环境搭建、

如果你的电脑有如图的浏览器就不用换，如果用的别的浏览器可以通过以下方式更改浏览器

点击File-->Settings

点击Tools-->Web Browsers

在path里找到你想用的浏览器路径即可

1.2、发展史、优势

HTML 1993年
HTML2.0 1995年
HTML3.2 1996年（W3C推荐标椎）
HTML4.0
HTML4.01 （微小改进）
XHTML1.0 2000年
XHTML2.0 由于改动过大，学习成本高了，没怎么用
HTML5 （最新版） 2004 2007正式纳入新成立的HTML工作团队！
2013 HTML 5.1 草案~（没有被发布）
优势：
- 所有知名浏览器厂商都支持！
  - 微软
  - Google
  - 苹果
  - Opera
  - Mozilla firefox（火狐）
  - 很多杂的浏览器，并不支持 HTML5
- 市场的需求
  - 市场需要一个统一的标准：（需要不断地扩大）
  - Web兼容性问题。修改bug都需要大量的时间！
- 跨平台（浏览器） B/S架构
  - 天然存在的，因为是B/S开发 PC、移动站、等等所有的都是天然支持！

W3C标准

W3C

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

W3C标准包括：

结构化标准语言（HTML，XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范以下是IDEA调整JavaScript的规范

常见的前端开发工具

记事本
Notepad++
Sublime
VScode（前端专业）
WebStorm（前端专业和IDEA一家公司）
HBuilder （专业）
……

HTML的基本结构

所有的HTML 标签都以 <> 开始 </> 结尾
正常网页的所有内容都需要放在 < body> 标签中；

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!--正常的标签都是需要成对出现的-->
    <title>Title</title>
</head>
<body>
hello ,world!
</body>
</html>

DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
Title 标签，就是网站的小标题名称；

meta 描述信息，SEO：网站搜索搜索

<!--建议规范编码，统一使用UTF-8（全世界）   gb2312：包含了所有的中文字符-->    
<meta charset="UTF-8">
<!--网站关键字描述-->
<meta name="keywords" content="Godles的博客，姜嘉航">
<!--网站的描述-->
<meta name="description" content="欢迎来到Godles的博客">

网页基本标签

1、标题标签

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

2、段落标签

<!--p：段落标签-->
<p>你住的 巷子里 我租了一间公寓</p>

<p>为了想与你不期而遇</p>

<p>高中三年 我为什么 为什么不好好读书</p>

<p>没考上跟你一样的大学</p>

3、换行标签

<!--换行标签-->
你住的 巷子里 我租了一间公寓<br/>

为了想与你不期而遇<br/>

高中三年 我为什么 为什么不好好读书<br/>

没考上跟你一样的大学<br/>

4、水平线标签

<hr/>

5、字体样式标签

<!--粗体，斜体-->
粗体： <strong>我爱你</strong>
斜体： <em>I love you</em>

6、特殊符号标签

<!--空格 &nbsp 网页里必须有这个才能实现空格-->
<p>我喜欢&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你</p>
<!--大于号-->
&gt;
<!--小于号-->
&lt;
<!--版权符号-->
&copy; 版权所有：Godles
<!--万能的公式  &+空格;-->

图像标签

常见的图片格式： .png .jpg .jpeg .bmp .gif...
png 会有浏览器兼容问题
一般使用 .jpg .gif多一点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>

<!--标签中带有参数的  key=value -->

<!--
src： 资源图片 ： 图片的路径
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 宽
height：高
-->
<img src="../statics/images/1.jpg" alt="头像图片" title="Godles" width="1000" height="1000">

</body>
</html>

超链接

表示从一个地方跳转到另外一个地方

<!--  快捷键：a+Tab
href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/1.png">
</a>

锚链接

用于页面间指定位置跳转：快速定位目录
可以在同一页页面中跳转
也可以在不同页面中跳转：

锚点

<!--标记A-->
<a name="markerA">A</a>
<!--标记B-->
<a name="markerB">A</a>
<!--标记A-->
<a name="markerC">A</a>

跳转到锚点

<a href="#makerA">A</a><br>
<a href="#makerB">B</a><br>
<a href="#makerC">C</a><br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a><br>
<a href="2.基本结构.html#xixi">xixi</a>

功能性标签

邮件链接

<a href="mailto:291652685@qq.com">联系我</a>

借助第三方平台

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

块元素、行内元素

块元素

无论内容多少，都是独占一行的（p，h1~h6）

行内元素

只根据内容的长度来扩展。（a，strong，em….）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>

</body>
</html>

列表

无序列表（ul-li）

语文
数学
音乐

例如：上面的列表!

手机电量和耳机电量的列表

有序列表 (ol-li)

热搜1
热搜2
热搜3

例如：微博热搜

音乐排行榜

自定义列表 (dl-dt-dd)

代码演示上图部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--title-->
<!--无序  ul-li
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
    <li>记事本</li>
    <li>Notepad++</li>
    <li>Sublime</li>
    <li>VScode（前端专业）</li>
    <li>WebStorm（前端专业 和IDEA一家公司）</li>
    <li>HBuilder （专业）</li>
    <li>......</li>
</ul>

<hr>

<!--有序 ol-li
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
    <li>澳门回归20周年主题曲</li>
    <li>黄璐离婚</li>
    <li>清华美院男生对冰雪维纳斯</li>
    <li>桃你欢心赞不绝口</li>
    <li>......</li>
</ol>

<hr>

<!--自定义列表
网站的底部，用于标记项
-->
<dl>
    <dt>选购及了解</dt>
    <dd>Mac</dd>
    <dd>iPad</dd>
    <dd>iPhone</dd>
    <dd>Watch</dd>
    <dt>服务</dt>
    <dd>Apple Music</dd>
    <dd>iCloud</dd>
    
</dl>


</body>
</html>

效果展示：

表格

基本结构：

表格 table
行 tr rowspan
列 td colspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
    <!--行和列-->
    <!--第一行 tr,列 td-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>


</body>
</html>

跨行

<table border="1px">
    <tr>
        <!--rowspan 所跨的行数-->
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>0</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>0</td>
    </tr>
</table>

跨列

<table border="1px">
    <tr>
        <!--实现跨列
        colspan 对应的值:就是要跨几列
        -->
        <td colspan="2">学生成绩</td>
        <td>学生成绩</td>
    </tr>
    <tr>
        <!--科目名称-->
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <!--成绩-->
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

上面三个案例效果图：

练习一个表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>流量统计</td>
        <td>访客统计</td>
        <td>会员</td>
        <td>游客</td>
    </tr>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
        <td>400</td>
    </tr>
    <tr>
        <td rowspan="2">300</td>
        <td>300</td>
        <td>400</td>
        <td>500</td>
    </tr>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>400</td>
    </tr>
    <tr>
        <td>平均浏览量</td>
        <td colspan="3">1000</td>

    </tr>
</table>

</body>
</html>

效果展示：

音频

音频 audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--音频播放-->
<audio src="../statics/audio/断了的弦.mp3" autoplay controls></audio>

</body>
</html>

视频

视频 video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>

<!--video 视频标签 只能解析本地的视频

这里放到视频，或者音乐，都是必须要能够直接播放的。

src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放

-->


<video src="../statics/video/china.mp4" controls autoplay></video>

<video src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" controls autoplay>
</video>
    
<!--iframe这个可以把别人的网站视频嵌套过来-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
width="1000px" height="500px">
</iframe>


</body>
</html>

网页的结构

页面的头部
页面的主体
页面的尾部

从页面结构的角度上看，网页主要由导航栏、栏目、及正文内容这三大要素组成。网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的。

导航栏
- 导航栏是构成网页的重要元素之一，是网站频道入口的集合区域，相当于网站的菜单。
栏目
- 栏目是指网页中存放相同性质内容的区域。在对页面内容进行布局时，把性质相同的内容安排在网页的相同区域，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用。
正文内容
- 正文内容是指页面中的主体内容。例如一个文章类页面，正文内容就是文章本身；而对于展示产品的网站，正文内容就是产品信息

文档树结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--这些标签都是一些行业规范-->

<header>
    我是头部
</header>

<nav>导航栏</nav>

<aside>侧边栏</aside>

<article>文章主题</article>

<section> 独立区域 </section>

<footer>
    我是尾部
</footer>

</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--正常的显示-->
<iframe src="https://www.baidu.com" frameborder="0"width="1000px"height="500px"></iframe>
<!--点击显示出我们要内联的地方-->
<iframe name="mainFrame" ></iframe>
<a href="https://www.baidu.com"target="mainFrame">点击显示</a>

</body>
</html>

表单

HTML 表单用于搜集不同类型的用户输入。

搜索框

< form >元素

HTML 表单用于收集用户输入。

< form >元素定义HTML表单

HTML表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

< input >元素

< input >元素是最重要的表单元素

< input >元素有很多形态，根据不同的type属性

登录演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
提交请求：
携带的参数
key: 控件的name。这个属性不要忘记

get：携带参数，参数可以在url中看到，不安全，大小有限
    https://www.baidu.com/?username=kuangshen&password=123456

post：参数不可见、安全，大小没有限制  （表单提交常用方式post）

-->

<!--form 表单
action： 提交地址
method：提交的方式
-->

<form action="test.html" method="post">

    <!--输入框
    input 标签
        name： 必须写上
        type：
            text ： 文本框
            password： 密码框
            submit： 提交按钮
            reset： 重置
    -->
    <p>名字：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="password"> </p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>

</form>

</body>
</html>

效果图：

表单元素

所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值！

以下是我们要使用的表单元元素

range 可调节滑块 search 搜索框（带关闭按钮） number 数字 url 验证网址 email 验证邮箱 text 定义常规文本输入 radio 定义单选按钮输入（选择多个选择之一） submit 定义提交按钮（提交表单） reset 重置按钮 password 密码框 checkbox 复选框 select-option 下拉列表框 button 按钮 textarea 文本域

类型	描述

1.文本框

<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度
-->
<p>
    <input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>

2.密码框

<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
    <input type="password" name="pwd" size="20">
</p>

3.单选按钮

<!--单选框type="radio"
value： 表单提交的值
name： 名字相同，则自动分组，必须要分组
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="radio" 后增加单选框的属性
-->
<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex"disabled>女
</p>

4.复选框

<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="music" checked>听音乐
    <input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>

5.下拉列表框

<!--下拉列表框
select
name： 组件名字 必填
size:  显示的数量，默认为1

option： 选项
value 必填
option标签中间写下拉框的值
selected： 默认选中

-->
<select name="科目">
    <option value="1"></option>
    <option value="2">数学</option>
    <option value="3" selected>英语</option>
    <option value="4">英语</option>
    <option value="5">英语</option>
</select>

6.按钮

<!--按钮
value：按钮上的文字
-->
<p>
    <!--提交-->
    <input type="submit" value="登录">
    <!--重置--使用-->
    <input type="reset" value="清空">
    <!--普通按钮：一般后来我们会和javascript结合使用，点击按钮xxx-->
    <input type="button" value="点我">
    <!--图片按钮
        type="image"
        src：图片的路径
    -->
    <input type="image" src="../statics/images/bd.png">
</p>

7.文本域

<!--文本域  
更改大小用
cols表示列  
rows表示行
maxlength 表示文本域所能填写的最大长度-->
<textarea name="textarea" cols="10" rows="10">
</textarea>

8.文件域

<!--
表单，需要支持提交复杂文件  enctype="multipart/form-data提交表单数据"
未来：文件上传会用到
-->
<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

9.邮箱

    <!--邮箱-->
    <p>
        邮箱：<input type="email" name="email">
    </p>

10.网址

    <!--url网址-->
    <p>
        url：<input type="url" name="url">
    </p>

11.数字

    <!--数字：商品数量，计数  type="number"
    最小值  min="0" 
    最大值  max="100" 
    步长    step="10"
    -->
    <p>
        数字：<input type="number" min="0" max="100" step="10">
    </p>

12.滑块

<!--滑块
默认值0~100
-->
<p>
    <input type="range" name="range" min="0" max="1000" step="2">
</p>

13.搜索框

   <!--搜索框-->
    <p>
       搜索： <input type="search" name="search">
    </p>

13个表单元素效果图显示：

表单的应用

隐藏域

    <!--隐藏域  不让用户看到-->
    <p>
        <input type="hidden" name="count" value="10">
    </p>

只读和禁用

 <!--readonly 只读    disabled 禁用-->
<p>
    用户名： <input type="text" name="username" readonly>
</p>

<p>
    密码： <input type="password" name="pwd" disabled>
</p>

标注

<p>
    <!--通过 for="name" 来链接到 表单中的指定ID -->
    <label for="name">用户名： </label>
    <input type="text" name="username"  id="name">
</p>

初级表单验证

默认提示

<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
用户名：
<input type="url" name="username" placeholder="必须是url格式">

必填

<p>
    <!--required必须要填写这个字段-->
    密码： <input type="password" name="pwd" required>
</p>

正则表达式

<p>
    <!--pattern:正则表达式-->
    手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>

表单的验证，主要在 JavaScript 以及我们后台判断

上一篇：转:Android Webview 下一篇：HTML学习笔记（网址)

网站建设

Html