前端-01html基础知识1_html目录结构春夏秋冬-CSDN博客

本文链接：https://blog.csdn.net/qq_36061396/article/details/102905481

1.常用键

ctrl+c	复制
ctrl+v	粘贴
ctrl+x	剪切
ctrl+a	全选
ctrl+s	保存
ctrl+z	撤销
win+d	返回桌面
win+e	打开我的电脑
win+r	打开运行
alt+tab	切换软件
ctrl+tab	软件文档之间的切换（浏览器页面之间切换）
F2	重命名
F5	刷新

2.前端：利用html+css+js等技术，将效果图生产网页；PC端移动端；用户体验。

3.网页：由文字、图片、输入框、视频、音频、超链接等组成

4.Web标准 W3C组织（万维网联盟）

html 结构标准
css样式（表现）标准
JS行为标准

5.浏览器是一个上网的客户端（软件）=》常用的浏览器：IE、火狐、谷歌、猎豹

浏览器内核=》渲染引擎（成像）

渲染引擎是兼容性问题出现的根本原因

6.浏览器与服务器

ISS web服务器提供网页浏览服务

在发送报文时，要遵从http协议（超文本传输协议）类似一个规则：用来规范/约束浏览器和服务器之间如何沟通。

7.url地址（网址）

在浏览器地址栏中输入的地址详细：https://blog.csdn.net/wq6ylg08/article/details/82868595

URL全称是UniformResourceLocator, 统一资源定位符，来传输数据和建立连接，是互联网上用来标识某一处资源的地址

URL格式：

http://127.0.0.1/index.html (浏览器会自动添加:80)

http://127.0.0.1:80/index.html (完整的格式)

9URL拆分：

http:// URL协议类型

127.0.0.1 服务器IP地址（相当于地址）

:80 服务器的端口号（相当于门牌号）

index.html 需要访问的资源名称

IP地址和端口号的作用：告诉浏览器我们需要访问的那台服务器的详细地址。

资源名称的作用：获取服务器上的哪个资源。

8.html结构

<!DOCTYPE html>
<html>
<head>
<title>html结构</title>
</head>
<body>
	
</body>
</html>

9.html标签分类

https://blog.csdn.net/qq_41672590/article/details/79185657

单标签 <hr><img><input><param><meta><link>

1. 注释标签 ctrl+/

2. 换行标签

3. 水平线标签 <hr/>

4. 图片标签<img/>

<!-- src 图片地址 还有width height改变图片大小的文字 -->
<img src="内核.PNG" alt="图片不显示时显示文字" title="鼠标放到图片上显示名字" />

图片没有定义宽高时，图片按照百分之百比例显示，如果只改变图片的宽或高，图片等比例缩放。

5. 音乐标签

<embed src="1.MP3" hidden="false" />

6. 滚动标签

<!-- 滚动 -->
<marquee behavior="slide" direction="none">滚动</marquee>

双标签<head></head>

1. 段落标签 文本内容 自动生成上下空白行

2. 标题标签 <h1>一级标题</h1>h1（在一个页面里只能出现一次）、h2、h3、h4、h5、h6

3. 文本标签文本内容

4. 文本格式化标签

加粗常用 加粗
斜体常用 斜体
<del>删除线</del>常用 <s>删除线</s>
<ins>下划线</ins>常用 下划线
上标
下表

注意：之所以常用，语义化，浏览器可读性强

5. 超链接标签<a></a> ==》衍生锚点和空链使用

<a href="跳转页面.html"title="超链接" target="_blank"></a>
<!--target="_self"默认在自身页面打开，_blank:打开新页面-->
<!-- 锚链接 -->
<p id="123">123</p>  <!-- 先定义一个锚点-->
<!-- 超链接锚点位置-->
<a href="#123">回到123的位置</a>

<!-- 空链-->
<a href="#123">空链</a>

<!-- 超链接的优化写法,写在head中-->
<base target="_blank">

超链接使用案例---春夏秋冬

<!--chun.html-->
<!DOCTYPE >
<html>
<head>
</head>
<body>
	<a href="chun.html">chun</a>
	<a href="xia.html">xia</a>
	<a href="qiu.html">qiu</a>
	<a href="dong.html">dong</a>
	<!-- <img src="chun.jpg"> -->
	<h1>chun</h1>
</body>
</html>
<!--xia.html-->
<!DOCTYPE >
<html>
<head>
</head>
<body>
	<a href="chun.html">chun</a>
	<a href="xia.html">xia</a>
	<a href="qiu.html">qiu</a>
	<a href="dong.html">dong</a>
	<!-- <img src="xia.jpg"> -->
	<h1>xia</h1>
</body>
</html>
<!--qiu.html-->
<!DOCTYPE >
<html>
<head>
</head>
<body>
	<a href="chun.html">chun</a>
	<a href="xia.html">xia</a>
	<a href="qiu.html">qiu</a>
	<a href="dong.html">dong</a>
	<!-- <img src="qiu.jpg"> -->
	<h1>qiu</h1>
</body>
</html>
<!--dong.html-->
<!DOCTYPE >
<html>
<head>
</head>
<body>
	<a href="chun.html">chun</a>
	<a href="xia.html">xia</a>
	<a href="qiu.html">qiu</a>
	<a href="dong.html">dong</a>
	<!-- <img src="dong.jpg"> -->
	<h1>dong</h1>
</body>
</html>

6. 列表标签

1. 有序列表

<!-- 有序 -->
<ol type="a" start="3">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ol>

2.无序列表

<!-- 有序 -->
<ul type="circle">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

3.自定义列表

<!-- 自定义列表 -->
<dl>
	<dt>小标题</dt>
	<dd>asas</dd>
	<dd>asadsa</dd>
</dl>

10.标签关系分类

包含（嵌套关系）<head> <title></title> </head> 父子

并列关系 <head></head><body></body>兄弟姐妹

11.特殊符号标记

12.工具软件

sublime轻量级==>webstorm重量级，智能

13.sublime的快捷键使用html

html：xt +tab	html结构
tab	补标签代码
ctrl+shift+K	快速删除一行
ctrl+shift+d	快速复制一行
ctrl+鼠标左键单击	集体输入
ctrl+h	查找替换
ctrl+f	查找
ctrl+/	注释
ctrl+L	快速选择一行
ctrl+shift+⬆（⬇）	快速上移（下移）一行
F11	全屏
alt+q（自己设置的）	运行html
F5	运行python
ctrl+B	运行JS