大四开始学前端day01

首先是vscode的项目创建，选打开文件夹，今天在D盘下的www文件夹里创建了一个TEST文件

然后是写基本的images和styles和scripts

在index里两句引入

只需短短几行代码就可以有初步的实现

整体样式是在css里调整

我们为了方便把他们放到<div>标签里并且给他设置class名字

我们发现body是有样式的我们把它margin清零 padding也清零

然后开始按设计来制作网页

效果如图

html元素

怎么区分块元素和内联元素，块元素是后面的文本会换行

块元素(block element)

html的块元素有：1、“<address>...</adderss>”；2、“<center>...</center>”；3、“<h1>...</h1>”；4、“<hr>”；5、“<p>...</p>”；6、“<pre>”等等。
HTML（超文本标记语言）中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
HTML块元素说明：
总是从新的一行开始
高度、宽度都是可控的
宽度没有设置时，默认为100%
块级元素中可以包含块级元素和行内元素
HTML块元素：
块级元素：块级大多为结构性标记
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>

内联元素(inline element)

<a>        可定义锚以及超链接
<abbr>        表示一个缩写形式
<acronym>        表示只取title中首字母的缩写形式
<b>        字体加粗
<bdo>        可覆盖默认的文本方向
<big>        大号字体加粗
<br>        换行
<cite>        引用进行定义
<code>        定义计算机代码文本
<dfn>        定义一个定义项目
<em>        定义为强调的内容
<i>        斜体文本效果
<img>        向网页中嵌入一张图像
<input>        输入框
<kbd>        定义键盘文本
<label>        为input进行标记/标注
<q>        定义短的引用
<s> 表示不准确不相关，却不应当给予删除的内容
<samp>        定义样本文本
<select>        定义单选或者多选菜单
<small>        呈现小号字体效果
<span>        组合文档中的行内元素
<strong>        语气更强的强调内容
<sub>        定义下标文本
<sup>        定义上标文本
<textarea>        多行文本输入控件
<tt>        打字机或者等宽的文本效果
<var>        定义变量
<input>和<img>都是行内元素，但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素。

html属性

比如<input type="text" disable>

disable默认是true 这样输入框就不能输入了

<a herf

没有引号他会把他当作另一个属性

也可用单引号表示

html页面

<head>里面放的都是不想被看到的关键词页面描述声明css等

<meta>编码

<title>标签页标题

<body>页面可以看到的内容

html空格

多少个都是一个

直接换行就是空格

html实体引用

单引号双引号容易被误判

<>用&lt &gt替换

html注释

html中的文本

<p>

<ul>

</ul>

<ol>有序

<em>斜体

<strong>粗体

主要区别：<em>是基于内容的样式，<i>一个是基于物理的样式。
< i > 是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示样式上是粗体或斜体，而没有强调的语义，这两个标签在HTML4.01中不推荐使用，建议用CSS样式；
< em > 是表达要素(phrase elements)。 < em > （emphasized text）表示一般的强调文本，这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。