HTML 学习笔记

wyu72961
0 阅读5分钟

什么是HTML​

  • Hyper Text Markup Language（超文本标记语言） ​

  • 超文本包括：文字、图片、音频、视频、动画等​

W3C标准

  • W3C​

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

  • W3C标准包括​

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

HTML基本结构

HTML代码结构：
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    我的第一个网页
  </body>
</html>
标注说明：
  • <title>我的第一个网页</title>→ 网页头部
  • <body>标签内的内容 → 主体部分

<body>、</body>等成对的标签，分别叫开放标签和闭合标签；

单独呈现的标签（空元素），如 <hr/>；意为用 /来关闭空元素


<!--DOCTYPE：告诉浏览器，我们使用什么技术规范-->
<!DOCTYPE html>
<!--lang是 “language”（语言）的缩写。
"en" 是 英语 的语言代码（遵循 ISO 639-1 标准）。-->
<html lang="en">
<!--head表示网页头-->
<head>
<!-- meta元标签，用来描述网页的一些信息
一般用来做SEO-->
<!--    SEO 是 Search Engine Optimization 的缩写，意为“搜索引擎优化”。它
是一系列通过改进网站内容、结构、技术设置等，提升网站在搜索引擎（如百度、Google）自然搜索结果中排名的技术和策略。-->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="description" content="Course Description">
<!--title表示网页标题-->
    <title>Title</title>
</head>
<!--body表示网页主题-->
<body>
Hello World!
</body>
</html>

网页基本标签

  • 标题标签

image.png

  • 段落标签

image.png

  • 换行标签

image.png

  • 水平线标签

image.png

  • 字体样式标签

image.png

  • 注释和特殊符号

image.png

图像标签

  • 常见的图像格式

    • JPG
    • GIF
    • PNG
    • BMP
    • ……

  • <img src="path" alt="text" title="text" width="x" height="y" />

<img src="../resource/1.png" alt="加载文件失败显示的文字" title="悬停文字" height="100%"
 width="100%"> </img>

链接标签

超链接

  • 页面间链接

    • 从一个页面链接到另一个页面
<!--target:页面打开方式


-->
<a href="Test02.html" target="_self">点击我跳转新页面</a>
<a href="https://www.baidu.com" target="_self">点击我跳转新页面</a>
<!--嵌套图片-->
<a href="https://www.baidu.com" target="_self">
    <img src="../resource/1.png" alt="加载文件失败显示的文字" title="悬停文字" height="100%"
         width="100%"> 
</a>
  • 锚链接
<a name="顶部锚"></a>
```
<a name="down"></a>
```
```
<a href="#顶部锚">点击回到顶部</a>
```
<a href="imgeTest.html#down">回到imgeTest.html的down位置</a>
```
```
  • 功能性链接
<a href="mailto:2955782688@qq,com">加我邮箱</a>

image.png

行内元素和块元素

  • 块元素

    • 无论内容多少，该元素独占一行
    • (p、h1-h6...)

  • 行内元素

    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • (a、strong、em ...)

列表

  • 什么是列表

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

  • 列表的分类

    • 无序列表
    • 有序列表
    • 定义列表

image.png

表格

  • 为什么使用表格

    • 简单通用
    • 结构稳定

  • 基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列

image.png

视频和音频

  • 视频元素

    • video

  • 音频元素

    • audio
<!--controls:添加控制条
autoplay：设置打开网页自动播放-->
<video src="../resource/a.mp4" controls autoplay></video>
<audio src="../resource/b.mp3" controls autoplay></audio>

页面结构分析

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

iframe内联框架

  • 引用页面地址src
  • 框架标识名name
  • <iframe src="path" name="mainFrame"></iframe>
  • a标签的target可以是iframe，投射地址到它，iframe也可以自己设置地址

image.png

表单语法

<form method="post" action="result.html">
  名字：<input name="name" type="text" > 
  密码：<input name="pass" type="password" > 
  
   <input type="submit" name="Button" value="提交"/>
   <input type="reset" name="Reset" value="重填“/>
  
</form>

  • method规定如何发送表单数据，常用值：get | post

  • action表示向何处发送表单数据

  • get方式提交: 我们可以在url中看到我们提交的信息，不安全，高效。

  • post：比较安全，传输大文件。

image.png image.png

image.png

表单元素格式

属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name指定表单元素的名称
value元素的初始值。type 为 radio 时必须指定一个值
size指定表单元素的初始宽度。当 type 为 text 或 password 时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlengthtype 为 text 或 password 时，输入的最大字符数
checkedtype 为 radio 或 checkbox 时，指定按钮是否被选中

单选框

<!--radio单选框，同样名字的单选框成组，实现只能选一个，checked控制是否初始就被选中-->
        <input type="radio" value="男" name="sex" checked>男
        <input type="radio" value="女" name="sex">女

多选框

  • 默认选中为checked image.png

按钮

  • 在一个表单中，type为image的<input> ​ 和 type为submit的<input> ​ 在核心功能上，效果都等同于提交表单。它们都是“提交按钮”。
  • button是input的自定义按钮类型
  • reset类型会清空同一表单的所有数据
<input type="image" src="../resource/1.png">
<input type="submit" value="提交">
```
<input type="button" value="val">
```
<input type="reset" value="重置">
```

下拉框

        <select name="city">
<!--            select表示默认选择-->
            <option value="shanghai">上海</option>
            <option value="beijing" selected>北京</option>
            <option value="wuhan">武汉</option>
        </select>

image.png

文本域

  • cols：列的长度
  • rows：行的长度
  • 中文会乱码 image.png

文件域

<input type="file" name="file" >

image.png

简单邮箱，URL，数字验证

<input type="email" name="email">
```
url：<input type="url" name="url">
```
最大max，最小min，step是加减按钮的尺度
数字：<input type="number" name="num" min=0 max=100 step=10 value=10>
```

image.png

image.png

image.png

滑块

音量：<input type="range" name="voice" min=0 max=100 step=2 value=10>

image.png

搜索框

  • 自带清空x号
搜索：<input type="search" name="search" >

image.png

表单的应用

隐藏域

  • (对表单元素添加一个hidden，使其隐藏，但这个元素属性还在）

image.png

只读

  • （对表单元素指定一个value值，并添加一个readonly）

image.png

禁用

  • （添加一个disabled，让表单元素作废）

image.png

label标签------鼠标增强可用性

  • 一般情况表单前的提示标题和表单元素是两个独立的元素
  • label标签把两者建立了联系
  • 现在点击文字也能激活表单元素
<label for="name">名字：</label>
    <input type="text" name="username" id="name">

表单初级验证

placeholder

image.png

required

image.png

pattern

  • 自定义正则表达式来验证输入是否合理
自定义邮箱：<input type="text" name="diyemail"
pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$">
avatar
文章
阅读
粉丝