测试2

HTML学习笔记

目录

初识HTML

HTML：（Hyper Text Markup Language）超文本[1]标记语言

发展史：由HTML4.0 -> XHTML2.0 -> HTML5.0

优势： 1.全球知名浏览器对HTML5的支持 2.市场需要 3.天然跨平台

管理： W3C标准

  1. 由万维网联盟[2]管理

  2. http://www.w3.org/

    http://www.chinaw3.org/

  3. W3C标准包括：

    结构化标准：（HTML，XML）

    表现化标准：（CSS）

    行为化标准：（DOM，ECMAScript）

常见的IDE：IDEA

HTML基本结构

< head >标签为html的头部

< body >标签为html的主体

像< body >< /body >等类似成对存在的标签分别叫开放标签和闭合标签

而像< br/ >只有一个标签的称为自闭合标签。自闭合标签的/是因为习惯而添加的。

网页基本信息如下：

要知道这几个是什么

  1. DOCTYPE
  2. < title> 标签
  3. < meta >标签
<!--DOCTYPE:告诉浏览器我们要使用什么规范，去掉也可以，默认html-->
<!--DOCTYPE的意思是Docment Type(文档类型)-->
<!DOCTYPE html>
<!--html 总标签，内容在这里面写才会显示-->
<html lang="en">
<!--head：网页头部-->
<head>
    <!--meta：描述性标签，一般用来描述我们网站的一些基本信息，一般用来做SEO-->
    <meta charset="UTF-8"/>
    <meta name="kegwords" content="生命之源"/>
    <!--title：网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body：网页主体-->
<body>
Hallo Werld
</body>
</html>

而为html的注释符可用ctrl+/调出

网页基本标签

需要知道这几个是什么

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.网页基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<!--段落标题-->
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
<!--换行标签-->
这是第一段 <br/>
这是第二段 <br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<!--粗体:<strong>   斜体:<em>-->
粗体:<strong>这是粗体</stong>
<br/>
斜体: <em>这是斜体</em>
<!--注释和特殊符号-->
<!--特殊符号记忆方式:不需要完全记,下面记住常用的就行,需要其他特殊字符可以百度-->
空格:&nbsp; <br/>
大于符号:&gt; <br/>
小于符号:&it; <br/>
版权所有:&copy;
</body>
</html>

段落标签可用快捷键p+ctrl创建

图像标签

需要知道这几个是什么：

  1. 图像标签
  2. 图像标签相关参数
  3. 相对路径和绝对路径

常见的图像格式：JPG，GIF，PNG，BMP

在HTML里面图像标签< img >

<img src="" alt="">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.图像标签</title>
</head>
<body>
<!--图像标签:<img src="" alt="" title="" width="" hegth="">-->
<!--
src:图片地址
alt:图像替代文字 :图像未加载出来的提示文字
title:鼠标悬停时文字
width:图像宽度
height:图像高度
-->
</body>
</html>

图像地址分为绝对路径和相对路径

​ 绝对路径：一般从盘符开始的路径为绝对路径（不推荐）

​ 相对路径：用../这样的路径（推荐）

链接标签

要知道这几点：

  1. 链接标签
  2. 文字链接标签和图片链接标签
  3. 锚链接
  4. 功能性标签：qq邮箱标签和邮箱标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.链接标签</title>
</head>
<body>
<!--链接标签：a标签-->
<!--<a href="path" target="目标窗口位置">链接文本或图像</a>-->
<!--
href:要跳转的页面
target:表示窗口在哪里打开
    _blank:在新窗口打开
    _self：在本网页打开
-->
    <a href="" target="_blank"></a>
</body>
</html>

链接标签分为文字链接标签和图像链接标签

文字链接标签

<a href="https://www.baidu.com/" target="_blank">这个是百度</a>

图像链接标签

<a href="https://www.baidu.com/" target="_blank">
    <img src="<!--这里面是图像地址-->" alt="<!--这里是鼠标提示文字-->">
</a>

超链接

页面间链接

​ 从页面间链接到另一个页面

锚标签

  1. 需要一个标记：用name参数
  2. 点击标记：需要一个＃号
<a name="top">顶部</a>
<a href="#top">点击回到顶部</a>              #页面内跳转
<a href="https://www.baidu.com/#top">点击转到百度</a>   #页面外跳转

功能性标签

邮箱链接

​ 在href里面输入mailto：XXXX(邮箱地址)点击链接后跳转到邮箱

<!--在mailto后跟上邮箱即可建立邮箱链接-->
<a href="mailto:289582531@qq.com">点击跳转到邮件</a>

QQ邮箱链接

​ 进入qq推广->推广工具

行内元素和块元素

块元素:无论内容多少，该元素占一行，如(p,h1-h6,……)

行内元素：内容撑开宽度，左右都是行内元素，可以排在一行，如(a,strong,em)

简单分辨：输入标签后，不会换行就是行内元素，会换行就是块元素

列表

需要知道一下几点：

  1. 有序列表由什么标签构成
  2. 无序列表由什么标签构成
  3. 自定义列表由什么标签构成

有序列表

​ 由< ol >[3]和< li >标签构成

<ol>
    <li>生</li>
    <li>命</li>
    <li>之</li>
    <li>源</li>
</ol>

​ 应用范围：试卷，问卷

无序列表

​ 由< ul >[4]和< li >标签构成

<ul>
    <li>生</li>
    <li>命</li>
    <li>之</li>
    <li>源</li>
</ul>

​ 应用范围：导航，侧边栏

自定义列表

​ 由< dl >[5]、< dt >[6]和< dd>标签构成

<!--
dl标签：表示创建自定义列表
dt标签：表示列表名称
dd标签：表示列表内部-->
<dl>
    <dt>年龄
    	<dd>18</dd>
    </dt>
</dl>

​ 应用范围：网页底部

表格

要知道以下几点：

  1. 创建表格标签
  2. 表格标签常用参数

为什么用表格：

​ 简单通用

​ 结构稳定

基本结构

​ 单元格，行，列，跨行，跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.表格</title>
</head>
<body>
<!--table标签：创建一个表格-->
<!--border：表格加边框-->
<table border="1px">
    <!--tr：行标签-->
    <tr>
        <!--td：列标签-->
        <!--align:设置对称-->
        <td>1-1</td>
        <td>1-2</td>
        <!--colspan：跨列标签-->
        <td colspan="3">1-3</td>
    </tr>
    <tr>
        <!--rowspan:跨行标签-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-6</td>
    </tr>
    <tr>
      <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
      <td>3-5</td>
      </tr>
</table>
</body>
</html>

视频，音频

须知以下几点：

  1. 音频标签
  2. 视频标签
  3. 相关参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.视频元素</title>
</head>
<body>
<!--视频标签：<video src="" controls="" autoplay=""></video>-->
<!--
controls:控制条
autoplay:自动播放
-->
<video src="链接名" controls autoplay></video>
<!--音频标签：<audio src="" ></audio>-->
<audio src="" controls autoplay></audio>
</body>
</html>

页面结构分析

​ 这些元素只是为了语言规范，认识header，footer，nav即可

元素名 描述
header 标题头部局部的内容（用于页面或页面中的一块区域）
footer 标题脚部局部的内容（用于整页面，或页面的一块区域）
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

iframe：内联框架

​ 一个网站嵌入另一个网页

<!--
iframe：内联框架
src：地址
w-h：宽度，高度
name：框架标识符
-->
<iframe src="打开的路径" frameborder="0"></iframe>

表单语法

​ 通过form标签来实现，表单提供的位置，可以是网站，也可以是请求处理的地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.表单语法</title>
</head>
<body>
<!--
form:表单标签
method:规定如何发送表单数据
    提交方式常用值 get:可以在url看见我们提交的信息，不安全，高效
                post：不可在url看见我们提交的信息，较安全
action:表示向何处发送表单数据
-->
<form action="1.我的第一个网页.html" method="post">
    <h1>注册</h1>
   <p>账号：
       <!--文本输入框：text，同时习惯在后面加上name-->
       <input type="text" name="username">
   </p>
    <p>密码：
        <!--密码输入框：password-->
        <input type="password" name="pwd">
    </p>
    <!--
    单选标签 ：radio
    初始值：value
    指定表单元素名称：name
    同时习惯于在标签结束后加上“/”表示标签的闭合
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--多选框：checkbox-->
    <p>
        <input type="checkbox" name="aihao" value="sleep"/>睡觉
        <input type="checkbox" name="aihao" value="study"/>学习
    </p>
    <!--按钮：butten-->
    <p>
        <input type="button" value="这是按钮"/>
    </p>
    <!--图片按钮：image-->
    <p>
        <input type="image"/>
    </p>
    <p>
        <!--提交：submit-->
        <input type="submit"/>
        <!--重置：reset-->
        <input type="reset"/>
    </p>
    <!--邮件验证：email-->
    <p>
    <input type="email" name="Email"/>
    </p>
    <!--URL:url-->
    <p>
        <input type="url" name="url"/>
    </p>
    <!--
    数字：number
    步长：step
    -->
    <p>
        <input type="number" min="0" max="100" step="10">
    </p>
    <!--滑块:range-->
    <p>滑块
        <input type="range"/>
    </p>
    <!--搜素框：search-->
    <p>
        <input type="search">
    </p>
    <!--文件域：file--->
    <p>
        <input type="file" name="file">
    </p>
    <!--上面全是input标签的表单，下面为其他表单-->
    <!--
    文本域：textarea
    一般文本内容写中文，容易“乱码”
    -->
    <p>
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>
    <!--
    下拉框标签：select
    子标签：option
    默认值：selected
    -->
    <p>下拉框:
    <select name="列表名称" >
        <option value="选项的值">中国</option>
        <option value="选项的值" selected>瑞士</option>
    </select>
    </p>
</form>
</body>
</html>

表单元素格式

标签 描述
type 指定元素类型：text；password；checkbox[7]；radio[8]；submit[9]；reset[10]；file[11]；hidden[12]，image[13]和botton[14]，默认text
name 指定表单元素名称，Java读取需要读取
value 初始值，type为radio时必须指定
size 初始宽度，当type为text或password时，表单元素大小以字符为单位，对于其他类型，宽度以像素为单位（一般不用）
maxlengh type为password或text时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否被选中，也就是默认选择

表单应用

隐藏域：hidden

只读：readonly

禁用：disabled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表单应用</title>
</head>
<body>
<!--
隐藏域：hldden
只读：readonly
禁用：disabled
-->
<form action="1.我的第一个网页.html">
    <p>邮箱：
    <input type="email" name="email" hidden>
    </p>
    <p>搜索框：
        <input type="search" readonly>
    </p>
    <p>图片按钮：
        <input type="image" disabled>
    </p>
</form>
</body>
</html>

增强鼠标可用性:label

让文本框前面的字也可点击

    <!--增强鼠标可用性：label-->
    <label for="110">点击</label>
    <p>邮箱：
    <input type="email" name="email"   id="110">

表单初级验证

为什么要进行表单验证—>减轻压力

常用方法：

​ placeholder：提示信息

​ required：非空判断

​ pattern：正则表达式

脚注：

  1. 包括文t字，图片，音频，视频等 ↩︎

  2. 一个中立性技术标准机构 ↩︎

  3. ordered list 有序列表 ↩︎

  4. unordered list 无序列表 ↩︎

  5. dir list 自定义列表 ↩︎

  6. dir title 自定义标题 ↩︎

  7. 多选框 ↩︎

  8. 单选框 ↩︎

  9. 提交按钮 ↩︎

  10. 重置按钮 ↩︎

  11. 文件域 ↩︎

  12. 隐藏域 ↩︎

  13. 图片按钮 ↩︎

  14. 普通按钮 ↩︎

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/handsome-black/p/15029386.html

标签： HTML CSS HTML5 CSS3
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

HTML5网页标签
3941 0元 限免
Web前端页面制作快速入门
5485 9.8元