大四开始学前端day01

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

 

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

在index里两句引入

 <link rel="stylesheet" href="./styles/main.css">

    <script src="./scripts/main.js"></script>

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

 整体样式是在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>

内联元素