HTML随堂笔记【狂神说JAVA】

课程地址：https://www.bilibili.com/video/BV1x4411V75C?p=1

演示代码：https://pan.baidu.com/s/18ik8cTJT75_CVFuM-m12mQ
提取码：apzm

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
段落标签

我是段落标签
换行标签

 
水平线标签

<hr/>
字体样式标签

加粗：code is poetry

斜体：code is poetry

注释和特殊符号

注释：

特殊符号

空格：&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>
功能性链接

邮件链接：<a href="mailto:an_shiguang@163.com">点击联系我</a>
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-01-14 21:05 時光心向阳阅读(587) 评论(0) 编辑收藏举报

刷新页面返回顶部

時光

HTML随堂笔记【狂神说JAVA】