目录
插件安装
Microsoft Edge Tools for VS Code Live Server
Auto Close Tag Auto Rename Tag
background-cover open in browser
标签认识
1.快速生成html骨架 （！+enter 快速生成）
<!-- 文档类型声明 HTML5 -->
<!DOCTYPE html>
<!-- 声明语言 en 英文 zh-cn 中文-->
<html lang="zh-cn">
<!-- head 网页头部 告诉浏览器一些相关的信息 -->
<head>
<!-- meta 定义页面的说明 -->
<!-- UTF-8万国码 GB2312 BIG5 -->
<meta charset="UTF-8">
<!-- 根据当前浏览器类型强制以特定内核进行渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页的头部 -->
<title>前端学习DAY01</title>
</head>
<body>
</body>
</html>1.h标签
<h1>h标签</h1>
<h2>h1-6</h2>
<h3>依次减小</h3>
<h4>默认加粗文本</h4>
<h5></h5>
<h6></h6>2. 段落标签 p 换行标签 br
<p> p标签 </p>
<br> 在文本中添加换行标签，实现换行3.img标签，引用图片
<h1>图像标签的使用</h1>
<h3>src属性里面放图片的路径，相对路径 或 绝对路径 </h3>
<img src="./R-C.jpg" alt="">
<!-- 绝对路径，一个网址 -->
<!-- 相对路径，文件夹中的路径地址 -->
<!-- src：填写路径 alt：图片加载失败的提示 title：鼠标悬停在图片上的提示 -->
<img src="" alt=""title="">
<h4>给图片设置宽度 width 高度 height 边框 border</h4>
<img src="" alt="" width="200" height="200" border='15'>4.文本格式化
<strong>加粗文本</strong>
<b>加粗文本</b>
<em>文本倾斜</em>
<i>文本倾斜</i>
<del>标签内文本中间出现删除线</del>
<s>标签内文本中间出现删除线</s>
<ins>标签内文本中间出现下划线</ins>
<u>标签内文本中间出现下划线</u>
<!-- 分割线，hr -->
<hr>5.div & span
<div>div标签可以用作装载其他元素的盒子</div>
<span> span 标签被用来组合文档中的行内元素。</span>
6.超链接标签 a
<!-- 内部链接直接放进同一文件夹的文件地址 -->
<a href="./08-锚点的定位.html"></a>
<!-- 外部链接放入一个网址 -->
<a href="http://www.qq.com">点击看看</a>
<!-- 空链接放 # 或 JavaScript:; -->
<a href="javascript:;">空链接</a>
<!-- 锚点链接 -->
<a href="#miao">找到锚点链接</a>
<a id="miao">锚点链接</a>
<a href="#miao">找到锚点链接</a>
<a name="miao">锚点链接</a>
<!-- target 打开网页窗口的方式 _blank新窗口打开 _self 当前页面打开 -->7.无序列表
<!-- type= none 清除li默认点 disc 实心圆点 square 实心方块 circle 空心圆点 -->
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>8.有序列表
<!-- type 属性就是改变ol 有序列表的排序号的状态-->
<!-- type="a" 以字母a开始排序-->
<!-- type="A" 以字母a开始排序-->
<!--type="i" 以罗马计数法开始排序 -->
<!--type="I" 以罗马计数法开始排序 -->
<ol type="I">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>9.input标签
<!-- input标签 -->
<!-- name属性：元素的名称 -->
<!-- value属性：元素的默认值 -->
<!-- type： input标签的属性 -->
<input type="text" name="" id="" value="">10.下拉菜单select
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<!-- selected="selected"默认选项 -->
<option selected="selected">火星</option>
</select>11.文本域textarea
<!-- ，rows标签属性定义高度，cols标签属性定义宽度 -->
<textarea name="" id="" cols="30" rows="10"></textarea>12.行内元素，块级元素，行内块元素
1.行内元素
<span>行内元素</span>
<a href="">行内元素可以在一行显示多个元素</a>
<!-- 标签指示简称或缩写，缩写标记能够为浏览器、拼写检查和搜索引擎提供有用的信息。 -->
<abbr title="">行内元素大小只取决于内容大小，不能设置宽高</abbr>
<!-- 标签 -->
<label for="">可以使用水平方向的padding和margin</label>2.块级元素
<dl>
<dt>块级元素</dt>
</dl>
<div>块级元素独占一行</div>
<h2>块级元素可以设置宽高</h2>
<p>默认宽度为所在容器的宽度</p>3.行内块元素
<!-- .和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。 -->
<!-- 一行可以显示多个 -->
<!-- 可以设置宽高，margin padding -->
<!-- 默认宽度就是本身内容的宽度 -->
2515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
