HTML知识总结

HTML随堂笔记【狂神说JAVA】

HTML是什么？

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

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

HTML 5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

HTML的优势

  • 世界知名浏览器厂商对对HTML5的支持
  • 市场的需求
  • 跨平台

W3C标准

W3C

World Wide Web Consortium (万维网联盟)

成立与1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

W3C标准内容

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

常见IDE

  • 记事本
  • DreamWeaver
  • IDEA
  • WebStorm
  • ......

HTML基本结构

网页基本信息

<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta 描述性标签，它用来描述一些网站信息    -->
    <!--meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML笔记">
    <meta name="description" content="一起学习，共同进步">

    <!-- title是网页标题    -->
    <title>Title</title>
</head>
<!--body是网页主体-->
<body>
Hello World!!
</body>
</html>

网页基本标签

  • 标题标签

    h1,h2 ,h3,h4,h5,h6

  • 段落标签

    <p>我是段落标签</p>

  • 换行标签

    <br/>

  • 水平线标签

    <hr/>

  • 字体样式标签

    加粗：<strong>code is poetry</strong>

    斜体：<em>code is poetry</em>

  • 注释和特殊符号

    注释：<!--注释内容-->

    特殊符号

    空格：&nbsp;
大于号：&gt;
小于号:&lt;
版权符号：&copy;

图形标签

常见的图像格式

  • JPG
  • GIF
  • PNG
  • BMP
  • ......

使用

src:图片地址（绝对地址/相对地址）（必填）

​ ../一级目录

alt :图片加载失败后显示的文字（必填）

链接标签

  • 文本超链接
  • 图像超链接

使用


href：必填，表示要跳转到的页面地址

target:表示窗口在哪里打开

​ _blank:在新窗口中打开被链接文档。
​ _self:默认。在相同的框架中打开被链接文档。

​ _parent:在父框架集中打开被链接文档。

​ _top:在整个窗口中打开被链接文档。

​ framename:在指定的框架中打开被链接文档。

超链接

  • 页面间链接
  • 锚链接
    1. 标记位置 <a name="top">我是文章顶部</a>
    2. 跳转链接(可跨页面跳转) <a href="#top">点击跳转至文章顶部</a>
  • 功能性链接
  1. 邮件链接：<a href="mailto:an_shiguang@163.com">点击联系我</a>
  2. QQ链接：https://shang.qq.com/v3/widget.html

行内元素和块元素

块元素

无论内容有多少，始终独占一行显示

p,h1~h6

行内元素

内容撑开元素，左右都是行内元素的可以排在一行

a,strong,em

列表

定义

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

分类

  • 有序列表

    <ol>
    <li>java</li>
    <li>c++</li>
    <li>php</li>
    <li>python</li>
</ol>

  • 无序列表

    <ul>
    <li>java</li>
    <li>c++</li>
    <li>php</li>
    <li>python</li>
</ul>

  • 自定义列表

    <dl>
    <dt>语言</dt>
    <dd>java</dd>
    <dd>c++</dd>
    <dd>python</dd>
    <dd>php</dd>
</dl>

表格

优点

  • 简单通用
  • 结构简单

基本结构

  • 单元格

  • 行

  • 列

  • 跨行

  • 跨列

    <table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <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>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

视频和音频

  • 视频元素 video
  • 音频元素 audio

src：资源路径

controls:控制条

autoplay:自动播放

页面结构分析

iframe内联框架

src:地址

width:宽度

height：高度

name:框架标识名

表单

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

method:有get和post两种方式，提交方式

  • get提交方式

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

  • post提交方式

    比较安全，传输大文件

表单元素格式

增强鼠标可用性

<label for="mark">点我输入</label>
<input type="text" id="mark">

表单简单验证

	<!-- 邮箱验证-->
<input type="email" name="email">
	<!-- URL验证-->
<input type="url" name="url">
	<!-- 数字验证 min为最小值 max为最大值 step为每次增加或减小的数值大小-->
<input type="number" min="20" max="1000" step="10">
	<!-- 滑块-->
<input type="range" name="voice" min="0" max="100" step="3">
	<!--搜索框-->
<input type="search" name="search">

表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

表单初级验证

常见形式

placeholder:提示信息

required：非空判断

pattern:正则表达式

posted @ 2021-08-30 15:40  hudiaoyu2  阅读(36)  评论(0)  编辑  收藏  举报