其他分享
首页 > 其他分享> > XY笔记1

XY笔记1

作者：互联网

开发工具

主要工具：
1.浏览器：谷歌浏览器，Edge
2.PS（多用于UI）
3.Hbuilder(国产)

认识网页

由文字，图像，超链接等组成。
实际上由代码编译而成。

Web标准

标准构成
结构（html），表现(CSS)，行为(JS)三个方面
总结：结构合理（最为重要），美观表现，交互行为吸引用户
认识HTML
 Html是一种超文本标记语言。
 不是一种编程语言，而是一种标记语言。
 标记语言是一套标记标签。

总结

：用文字来描述网页的标签

Html语言语法基本骨架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

标签

<!DOCTYPE html>版本号
<meta charset="utf-8">字符集编码方式
<title></title>文档标题
<body></body>内容主体

分类

  1. 双标签：“/”关闭符
例：<head></head>
  1. 单标签:非常少
例：</br>

关系

<head>
		<title></title>
</head>

嵌套关系，为父子级关系

<head>
</head>
<body>
</body>

并列关系，为兄弟级关系

HTML常用标签

排版标签

标题标签

<head>头部标题，<title>文档标题
<h1></h1>-<h6></h6>依次递减

段落标签

<p></p>

水平线标签

</hr>

换行标签

</br>

Div ，span标签

没有语义，网页组成盒子，用于布局
Div独占一行
Span可并列一行

文本格式化标签

<b></b>,<strong></strong>字体加粗
<i></i>,<em></em>字体倾斜
<s></s>,<del></del>文本添加删除线
<u></u>,<ins></ins>文本添加下划线

图像标签img
image图像

<img/>标记属性

src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框宽度

链接标签
Anchor
 外部链接需要添加网址
 内部链接直接链接网页名称
 如果没有明确目标引号内为“#”，表示空链接
 除文本超链接外还有图像，音频，表格，视频等超链接

base标签
可以设置链接的打开状态

特殊字符标签
本图来自菜鸟教程

注释标签

<!-- xxxxxxx-->

快捷键：ctrl+/
注释后的内容不会在网页中显示

路径

相对路径
同一级，上一级，下一级
绝对路径
完整的网络地址

列表标签

list-style:none取消列表默认样式
无序列表

<ul style="list-style:square;">
<li>111</li>
<li>111</li>
<li>111</li>
</ul> -->

有序列表

<ol style="list-style: circle;">
	<li>222</li>
	<li>222</li>
	<li>222</li>
</ol>

自定义列表

<dl style="list-style: ;">
	<li>333</li>
	<li>333</li>
	<li>333</li>
</dl>

总结：

标签样式较多，需要一定程度背书，多多实践运用在实际生活。

标签：网页,标记,标签,笔记,XY,图像,文本,链接
来源： https://blog.csdn.net/XY_0261/article/details/123171593