HTML
Published on 2022-06-25 08:06 in 分类: Web前端学习 with 深巷の猫
分类: Web前端学习

HTML

一、HTML概述

超文本标记语言

1.标签

  • 由尖括号包围（<title>）
  • 通常成对出现（<title></title>)，单个标签< />
  • 标签嵌套（注意缩进）

属性:一个标签可能有多个属性，属性的先后顺序不影响

<img src = "logo.jpg" alt = "站标"/>
/*
标签名:img
属性:src、alt
值:"logo.jpg"、"站标"
*/

2.文件结构

<html>
    <head>//头部：浏览器搜索引擎所需信息
        <title></title>
    </head>
    <body>//主体内容：网页的具体内容
        
    </body>
</html>

HTML5文件结构

<!DOCTYPE html><!-- 文件类型：符合HTML标准 -->
<html lang="en"><!-- lang属性：搜索引擎（en英文，zh中文）-->
    <head>
        <!-- 描述性标签 -->
        <meta charset="UTF-8">//<meta><!-- 标签：元数据，charset属性：编码方式 -->
        <title></title>
    </head>
    <body>
        
    </body>
</html>

二、HTML标签

1.标题

h1-h6:一级标签~六级标签（一个页面建议只有一个好）

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

2.段落

<p></p>

连续的空格，空行只生成一个空格

2.1段内换行

<br/>

单独出现的标签

<p>段落<br/>后面的内容</p>

2.2特殊字符

<!-- 空格 -->
<p>内容&nbsp;&nbsp;&nbsp;</p>
<!-- 大于 -->
<p>2&gt1;</p>
<!-- 小于 -->
<p>1&lt2;</p>
<!-- 版权符 -->
<p>&copy;</p>

2.3预留格式标签

<pre></pre>

会保留原格式

2.4行内组合

组合行内元素，以便通过CSS样式来格式化

<span>组合的元素</span>
<style type="text/css">
span{
    color:blue;
    font-weight:bold;
}
</stylt>

2.5水平线

<hr/>

2.6注释

注释不在浏览器中显示

注释可以跨行

2.字体

<!-- 粗体 -->
<strong></strong>
 
<!-- 斜体 -->
<em></em>

3.超链接

<a href="网址" target="连接打开的窗口">文字或图片</a><!-- target="_blank"：新标签页打开 -->
 
//链接到本站点其他网页
<a href="news.html">新闻</a>
//链接到其他站点
<a href="http://www.baidu.com">百度</a>
//虚拟超链接
<a href="#">板块1</a>
 
<!-- 锚链接 -->
<p name="top"></p>
<a href="#top"></a><!-- 跳转到标记top处 -->
 
<!-- 功能性链接 -->
<a href="mailto:邮件地址"></a>

4.图像

<img src="路径" alt="文件名" text="鼠标悬停的提示文字" width="宽度" height="高度">

5.区域

<div></div>

6.列表

无序列表

<ul>
    <li></li>//列表项
</ul>

有序列表

<ol>
    <li></li>
</ol>

自定义列表

<dl><!-- 标签，列表名称，列表内容 -->
    <dt></dt>
    
    <dd></dd>
    <dd></dd>
</dl>

7.表格

<table>
    <!-- 跨列 -->
    <tr cospan="4">//行
        <!-- 跨行 -->
        <td rospan="2"></td>//列
    </tr>
</table>
 
<th></th>//表头（加粗）

8媒体元素

<!-- 视频元素 -->
<video src="路径" controls autoplay></video><!-- controls：控制条，autoplay：自动播放 -->
 
<!-- 音频元素 -->
<autio src="路径" controls autoplay></autio>

9.表单

采集用户数据的区域

表单元素：文本框、按钮、单选、复选、下拉列表、文本域

<form method="请求方式" action="发送表单数据的位置：网站或请求处理地址">
    <!-- get方式提交，在url中可以看到提交的信息，不安全，高效
			post，比较安全，传输大文件 -->
    <input name="name" type="text">
    <input name="password" type="password">
    <input name="button" type="submit" value="提交">
    <input name="reset" type="reset" value=“重填>
</form>

9.1文本框

<input type="text/password" />//文本框和密码框
 
<form>
    账户：<input type="text" name="userName" />
    <br />
    密码：<input type="password" name="userPassword" />
</form>

9.2按钮

<input type="button" name="btn" value="按钮">
<input type="image" src="">

提交按钮：type属性为submit

<input type="submit" value="按钮文字" name="submit" />

重置按钮type属性为reset

<input type="reset" value="按钮文字" />

9.3单选框和复选框

单选框：type属性为radio

几个选项的name属性必须相同

<input type="radio" value="值" name="名称" />

复选框：type属性为checkbox

<input type="checked" value="值" name="名称" checked />

checked，则该项被默认选择

9.4下拉列表框

<select name="">
    <option>选项1</option>
    <option selected>选项2</option>
</select>

selected，则该项被默认选择

9.5文本域

<textarea row="行数" cols="列数">提示内容</textarea>

9.6文件域

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

9.7验证与滑块

<!-- 邮箱验证 -->
<input type="email" name="email">
<!-- url验证 -->
<input type="url" name="url">
<!-- 数字验证 -->
<input type="number" name="num" min="0" max="100" step="1">
<!-- 滑块 -->
<input type="range" name="" min="0" max="100" step="2">
<!-- 搜索 -->
<input type="search" name="search">

9.8表单应用

<!-- 
readonly：只读
disabled：禁用
hidden：隐藏
-->
<!-- 增强鼠标可用性 -->
<label for="mark">跳转</label><!-- 锁定到指定表单 -->
<input type="text" id="mark">

9.9表单初始验证

<!-- 
placeholder=""：提示信息
required：非空判断
pattern=""：正则表达式
-->

10.页面结构

元素 描述
header 标记头部区域的内容
footer 标记脚部区域的内容
section Web网页中的一块独立区域
article 独立的文章内容
aside 相关内容或引用（常用于侧边栏）
nav 导航栏

11.iframe内联框架

<!-- 在网页中嵌套网页 -->
<iframe src="路径" name="框架标识名" width="" height=""></iframe>

三、Web语义化

让页面具有良好的结构与含义

  • 有利于团队的开发、维护
  • 有利于搜索引擎理解
  • 容易兼容不同设备
<em>强调</em>//斜体
<strong>重点强调</strong>//加粗
 
//自定义列表
<dl>
    <dt>列表项</dt>
    <dd>列表项的描述</dd>
</dl>

四、响应式布局

在不同的显示设备上显示不同的布局方式

  1. 布局方式
    • 固定宽度布局：主流宽度有960px、980px、1190px、1210px等
    • 流式布局：百分比设置相对宽度
    • 响应式布局：检测设备信息，设备宽度不同，布局不同
    • 几种方式混合使用
  2. 响应式布局
    • Media Query媒体查询
    • 第三方开源框架Bootstrap

1.媒体查询

视口：显示网页的区域

视口规定：布局视口=设备视觉视口，不可缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设备宽度

设备屏幕 尺寸px
超小屏extra small <768
小屏small ≥768
中等medium ≥992
大屏large ≥1200 
<stytle>
    body{
    	background-color:black;
    }
    @media screen and (min-width:768px){<!-- 媒体查询 判断屏幕的尺寸 屏幕满足的条件 -->
    	body{
    		background-color:red;
    	}
    }
</stytle>
属性 含义
min-height 页面最小高度
min-width 页面最小宽度
max-height 页面最大高度
max-width 页面最小宽度

2.Bootstrap

移动优先的前端框架

栅格系统（类似于表格，将12列中一些列进行合并单元格）

<div class="row">
    <div class="col-md-8"></div>//超小屏xs、小屏sm、中屏md、大屏lg
    <div class="col-md-4"></div>
</div>

五、HTML5

1.新结构

header、nav、aside、content、footor

2.音频

支持.mp3、.wav、.ogg

<audio src="音频路径" controls="controls">
    文字//浏览器不支持时显示
</audio>

3.视频

支持.mp4、.webm、.ogg

<video>
    <source src="路径" type="类型"/>
</video>

4.绘图

  1. 定义画布

    		<canvas id="myCanvas"></canvas>

  2. 设置画布样式

  3. JS准备绘图上下文环境

  4. JS绘图

六、VS Code使用

  1. Ctrl+/：快速/撤销生成注释
  2. 快速生成标签：p>span（嵌套）、div+p（同级）、li*3(多个元素)
  3. 快速生成文字：lorem，lorem4（生成4个单词）
  4. 快速添加属性：img[src="http://www.baidu.com"]
posted @   深巷の猫  阅读(43)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaWeb
·  java基础
·  初识HTML
·  HTML学习笔记
·  1.HTML部分知识点
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
← → ↓ ↑
点击右上角即可分享
微信分享提示
AI IDE Trae