前言:
**
人生若只如初见,何事秋风悲画扇;
**
目点:
1.为学习的东西做一些简单的笔记和回顾:
2.熟悉前端的设计方法和理念;
3.设计一个网页,并制作出来;
4.制作一个简单的APP;
1.html的基本框架:
## 1.1框架图
1.2文档的基本结构
!DOCTYPE html:表明是最新的HTML5的规范写的,具有更多的功能;
html lang=“en”:向搜索引擎表示该页面是html语言,语言为英文而“en”即表示english
head->头部标签元素:一般用来插入脚本文件和链接;
:表明一些网页基础信息,这是说明了他的编码格式具体可看链接https://zhuanlan.zhihu.com/p/372363004;
body:主要是放置一些网页的具体内容决定显示内容的主体架构;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comaptible" content="IE=edge">
<meta name="viewport" content="with=device-with, initial-scale=1.0">
<title>
Document
</title>
</head>
<body>
<h1 align="left">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--注释,html的框架-->
</body>
</html>
```html
1.3代码示例及相关知识;
1.3.1字体内容的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>定义段落</p>
<em>定义着重文字</em>
<b>定义粗体文字</b>
<i>定义斜体字</i>
<strong>定义加重语气</strong>
<span>白菜</span>
<del>白菜</del>
</body>
</html>
1.3.2图片的引用
1.绝对引用和相对引用:通过绝对定义的图片位置来引用,相对引用是指引用以html为参考系的方式应用
<!--绝对路径-->
<img src="E:\picture\ture.webp" alt="美丽的风景" title="风景">
<!--相对路径关系-->
<img src="5.webp" alt="美丽的风景" title="风景">
<img src="./5.webp" alt="美丽的风景" title="风景">
<img src="./image/6.jpg" alt="美丽的女孩" title="女孩">
<img src="./image/../5.webp" alt="美丽的女孩" title="女孩">
1.3.3列表的使用
主要分为有序列表(ol)和无序列表ul)
以下是有序列表和无序列表的基本使用方法
<ol type="1">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ol>
<ol type="a">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ol>
<ol type="A">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ol>
<ol type="I">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ol>
<ul type="disc">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ul>
<ul type="circle">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ul>
<ul type="squre">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ul>
<ul type="none">
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ul>
<ul type="disc">
<li>水果</li>
<ul>
<li>橘子</li>
<li>菠萝</li>
<li>火龙果</li>
</ul>
</ul>
<ul>
<li>红米手机</li>
<li>荣耀手机</li>
</ul>
</ol>
html需记忆的内容
标签 | 作用 |
---|---|
h | 标题分级,可分为6级, h1–h6 |
p | 段落,段落标签 |
href | 超链接 |
em | 定义着重文字 |
b | 定义粗体字 |
br | 换行 |
i | 定义斜体字 |
strong | 定义加重语气 |
span | 行内元素 |
del | 删除元素 |
img | 图片引用 |
总结:
1.注意块级元素不能换行,可以识别宽高
需记住常见的块级元素: div,form,h1-h6,hr,p,table, ul
常见的内联元素 : botton,img,input