@前端开发学习笔记
网页
网页通常是HTML格式
网页是构成网站的基本元素
常用浏览器 chorme
浏览器内核(渲染引擎)负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
HTML
1.HTML是超文本标记语言,不是编程语言
2.是用于描述网页文档的一种标记语言
3.“超文本”是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。
4.Web标准:由W3C组织和其他标准化组织制定的一系列标准的集合。
由结构,表现,行为三大方面构成
结构:用于对网页元素进行整理和分类,现阶段为HTML
表现:用于设置网页元素的版式颜色,大小等外观样式,主要 指css
行为:指网页模型的定义和交互的编写,现阶段主要为javascript
Web标准提出的最佳体验方案:结构,样式,行为相分离
##HTML语法结构
html主要是用来控制页面的结构。
1.HTML标签是由尖括号包围的关键词
2.通常是成对出现的,称为双标签
双标签分为包含关系和并列关系
3.有些特殊标签是单个标签,称为单标签
编程软件 vs code
在此软件中,创建html文件后输入!会出现下拉框,点击一个叹号的即会自动出现html骨架(输入时要切换成英文才可以!!!)
ctrl加+/-可以放大或缩小字体大小
HTML基本结构
<html>
<head>
<title></title>
</head>
<body>
任风不解,由星不移,我有云知意。
</body>
</html>
文档类型声明标签
<!DOCTYPE html>
此行代码意思是:当前页面采取的是HTML5版本来显示网页
此声明位于文档最前方,且其并不是HTML标签
<html lang="en">
用于定义当前文档的显示语言,一般为zh-CN
<meta charset="UTF-8">
字符集,UTF-8万国码
HTML常用标签
- 标题标签
<!--以下是h1到h6标签,h1字体最大,h6字体最小,一般用于标题-->
<h1>任风不解,由星不移,我有云知意</h1>
<h2>任风不解,由星不移,我有云知意</h2>
<h3>任风不解,由星不移,我有云知意</h3>
<h4>任风不解,由星不移,我有云知意</h4>
<h5>任风不解,由星不移,我有云知意</h5>
<h6>任风不解,由星不移,我有云知意</h6>
任风不解,由星不移,我有云知意
任风不解,由星不移,我有云知意
任风不解,由星不移,我有云知意
任风不解,由星不移,我有云知意
任风不解,由星不移,我有云知意
任风不解,由星不移,我有云知意
- 段落标签
把文字分为几个段落
<p>代码敲烂,月薪过万!!!</p>
- 换行标签
强制换行,单标签
<br />
- 文本格式化标签
<strong> </strong> <b> </b>加粗标签, <em> </em> <i> </i>文字倾斜标签, <del> </del> <s> </s> 删除线标签 <ins> </ins> <u> </u>下划线标签 均推荐使用前者
- 超链接a标签
超级链接<a标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像。
a标签的基本使用:
页面的跳转<a href="http://ahut.edu.com">安徽工业大学</a>
、
链接分类:
1.外部链接:必须以http://开头
2.内部链接:网站内部网页的相互链接,直接写网页名称即可
3.空连接:# 例:安徽工业大学
4.下载链接:地址链接的是文件.exe或zip压缩包形式。例:图片
5.网页元素链接:在网页中的各种网页元素,如文本,图像,表格,音频,等都可添加超链接
例:<img src="img.jpg/>
6.锚点链接:点击链接可以快速定位到页面中的某个位置
- 在链接文本的herf属性中,设置属性值为#名字的形式,如
<a herf="#two">第二集</a>
- 找到目标位置标签,里面添加一个id属性=刚才的名字,如
<h3 id="two">第二集介绍</h3>
- div标签
可定义文档的分区 division的缩写
<div id="content">
<div class="h_list">关于h标签的内容</div>
<div class="p_list">关于p标签的内容</div>
<div class="a_list">关于a标签的内容</div>
<div class="ul_ol_li">关于ul,ol,li标签的内容</div>
</div>
- span标签
span 标签可以单独摘出某一块内容,多用于处理文本。span:跨度,跨距
也是用于布局,一行可以多个。
<span>文本内容</span>
- 图片标签
网页上除了有文字、超链接之外,还会有大量的图片。我们使用标签在网页中插入图片。图片标签的语法:
<img src="图片路径" alt="图片加载失败是显示的内容" title="提示信息"/>
使用:
<img src="images/美女.jpg" alt="中国第一美女" title="美女图" width="500" border="15” />
src是的必须属性,用于指定图像文件的路径和文件名,单标签
alt 替换文本,当图片显示不出时替换图片。
title 提示文本,鼠标放在图片上时的显示信息
width/height 修改图片的宽度/高度(一般只需修改一个,图片会自动按比缩放)
border 设定图片的边框
属性不分前后顺序,属性与属性之间必须用空格分开
属性必须以键值对的形式出现,即key="value"形式
图片路径分类:
相对路径
绝对路径:指目录下的绝对位置,通常从盘符开始 。例:F:\VS Code Test(很少使用)
-
注释标签
<!–注释语句–>** 快捷键:ctrl+/ -
特殊字符
  空格
> >
< <
等等
例子: < p > 是段落字符 即<p>是一个段落字符