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>

四、响应式布局

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

布局方式
- 固定宽度布局：主流宽度有960px、980px、1190px、1210px等
- 流式布局：百分比设置相对宽度
- 响应式布局：检测设备信息，设备宽度不同，布局不同
- 几种方式混合使用
响应式布局
- 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.绘图

定义画布
```
<canvas id="myCanvas"></canvas>
```
设置画布样式
JS准备绘图上下文环境
JS绘图

六、VS Code使用

Ctrl+/：快速/撤销生成注释
快速生成标签：p>span（嵌套）、div+p（同级）、li*3(多个元素)
快速生成文字：lorem，lorem4（生成4个单词）
快速添加属性：img[src="http://www.baidu.com"]

posted @ 2022-06-25 08:06 深巷の猫阅读(66) 评论(0) 收藏举报

刷新页面返回顶部

cherish-0

HTML

一、HTML概述

1.标签

2.文件结构

二、HTML标签

1.标题

2.段落

2.1段内换行

2.2特殊字符

2.3预留格式标签

2.4行内组合

2.5水平线

2.6注释

2.字体

3.超链接

4.图像

5.区域

6.列表

7.表格

8媒体元素

9.表单

9.1文本框

9.2按钮

9.3单选框和复选框

9.4下拉列表框

9.5文本域

9.6文件域

9.7验证与滑块

9.8表单应用

9.9表单初始验证

10.页面结构

11.iframe内联框架

三、Web语义化

四、响应式布局

1.媒体查询

2.Bootstrap

五、HTML5

1.新结构

2.音频

3.视频

4.绘图

六、VS Code使用

公告