自学前端---day 1

95 阅读 0 评论 63 点赞

我是靠谱客的博主贪玩曲奇，这篇文章主要介绍自学前端---day 1，现在分享给大家，希望可以做个参考。

#前端自学之路—day 1

声明文档类型

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html><!--h5 DTD：文档类型定义 txt doc docx html--> <html><!--网页内容--> 	<head><!--头部：内容给搜索引擎和浏览看的--> 		<title>自学前端</title><!--网页的名字：给搜索引擎与浏览器看--> 		<meta charset="UTF-8"
><!--万国码 GB2312 GBK--> 		<meta name="keywords" content="css,html"> 		<meta name="decripsion" content = “自学前端的第一天哟，虽然基础为0！但是是自己一个一个打出来哒！”> 		<style>/*样式，描述元素高度 宽度 颜色*/
				.first/*!--相当于C++中的类，定义以CLASS命名的元素+名称/属性*/ {
				width:400px;/*属性名：属性值（单位）
				height:400px;
				background:#ff000;
				margin：100px auto;
				border-radius: 50%;<取消边界> } 		</style> 	</head> 	<body><!--用户看的见的-->

<div class="first"> <h1>自学前端第一天哟！</h1>

</div>     <!--划分一个区域-->

    </body> </html>

注意：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1> 第一行不是网页内容的一部分，只是一条指令
2>meta 用来描述网页内容
3> class给元素命名，不能用汉语
4>外边距：margin/ 元素与元素之间的间距，以及元素与浏览器边缘的间距
5>*{} 为选中所有元素 
6> *{margin=0；}意味着清楚外边距
7>class中添加边距，并注明 auto，可以使图片居中 如

.first<!--相当于C++中的类，定义以CLASS命名的元素+名称/属性-->
{
				width:400px;/*属性名：属性值（单位）
				height:400px;
				background:#ff000;
				margin：100px auto;
				
}

如何将正方形图变成圆形图

在class中设置 border-radius：50%；/相当于将四个圆放于四角，依次删除超出的部分，最终得到一个一个圆/

记录标签

1》  定义注释
2》 <!DOCTYPE>定义文档类型
3》 <a>定义超链接
4》 <abbr>定义缩写
5》 <address>定义地址元素
6》 <audio>定义声音元素
7》 <b>定义粗体文本
8》 <bdo>定义文本的文本方向，脱离周围文本的方向设置
9》 <br>插入换行符
10》<button>定义按钮