HTML | 第一周实战记录

2023-10-03 16:57:52

第一周实战记录

一、HTML相关介绍

HTML是什么呢? HTML是超文本标记语言,HTML5既是HTML语言的第五个版本，分别解释一下超文本和标记语言哦

超文本就是在一个页面内可以有图片、链接、音乐、程序等非文字元素。标记语言又是什么呢?

标记语言是一种文本及文本其他的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码

先来简单说说HTML坎坷的发展历史

1982年，TimBerners-Lee 建立HTML

1993年，大学生的MarcAndreessen在他的 Mosaic浏览器加入标记，便可以在网页上浏览图片

1993年6月，HTML由IETF工作小组发布草案

1994年10月，W3C成立，网络应用发展的标准规范交由W3C协会制定及推广

1995年11月，HTML2.0，2000年6月被宣布已经过时

1996年1月，HTML3.2由W3C推荐为标准1997年，HTML4.0由W3C推荐标准

1999年12月，HTML4.01 以XML语法重新构建，较为严格，W3C推荐标准

2000年1月，XHTML1.0，W3C推荐标准2001年5月，XHTML1.1，W3C推荐标准

2004年到2009年，WHATWG小组成立，由各大浏览器开发商组成,重拾HTML4规格,开发HTML5规格的;W3C认输2,承认XTHML2.0不会成功,重新成立HTML工作小组,全面投入HTML5规格的发展。

2011年,Goolge宣布全面采用HTML5技术

2012年，HTML5被选为候选标准

2014年10月28日，HTML5.0，W3C正式发布HTML5.0推荐标准！

二、B/S架构

B是browser(浏览器)用户使用的所有客户端(部分手机app,小程序)，我们都可以把它视为浏览器，S是server(服务器)。工作机制：浏览器发出请求通过http等互联网协议，发送至S端服务器，S端把网页文件发送给前端，B端浏览器收

到文件后，浏览器解析成图形界面，可供用户操作。

!DOCTYPE html>
<!-- html5,html语言的第五个版本
超文本标记语言 
一处发布,到处可以查看
上面是html5的标识,告诉浏览器这是按照
HTML5标准写的-->
<html>
<head>
	<!-- 头部，页面背景上的设置 -->
	<meta charset="utf-8">
	<!-- meta元标签 -->
	<!-- charset编码格式-->
	<!-- GB-2312国家标准
	GBK国家标准扩展包 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello,World!</title>
</head>
<body>
	<div>无实意标签</div>
	<p>段落标签</p>
	<span>无实意标签</span>
	<img src="https://p5.ssl.qhimgs1.com/t01ce18dde7067b71a5.jpg">
	<ul type="circle">
		<!-- 无序列表 -->
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
	<ol  type="I">
		<!-- 有序列表 -->
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ol>
	<input type="text" name="">
	<input type="number" name="">
	<input type="password" name="">
	性别：
	<input type="radio" name="gender">男
	<input type="radio" name="gender">女
	<br>
	<!-- 复选框 -->
	<input type="checkbox" name="">
	<a href="https://www.baidu.com">
		百度一下
	</a>
	<h1>1级标题</h1>
    　　 <h2>2级标题</h2>
	<h3>3级标题</h3>
	<h4>4级标题</h4>
	<h5>5级标题</h5>
	<h6>6级标题</h6>
</body>
</html>

三、css基础

css常用属性

width:宽度；

height：长度；

background：背景（是一个复合属性）；

background-color：背景颜色；

css层叠样式表的特点

1.继承性

2.层叠性，可被覆盖

外部样式表（链入样式表）

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

　style属性 = 后面属性值行内样式表，极差，不允许使用　

<div style="width: 100px;height: 100px;background: lightblue;">

class优先级

1.后来者居上,越往后约说了算

2.行内样式>头部样式(style)>=外部样式(link)

3.越精确越说了算id>class>标签

4.!important优先级最最高,但是不到迫不得已的时候不使用

li{
	color: red;
}
/*标签选择器*/
#xiaoMing{
	color: pink;
}
/*id选择器,id唯一且不重复*/
.xiaoHong{
	color: lightblue;
}
/*class类名选择器*/

四、命名法

驼峰命名法：

小驼峰命名法：除第一个单词外，其他单词首字母大写，如helloWorld，变量HelloWorld第一个单词是全部小写，后面的单词首字母大写，常用于函数名

大驼峰命名法：第一个单词大写，后面的单词首字母大写，比如HelloWord
下划线命名法：两个单词之间添加下划线_，如xiao_ming

码农公寓

第一周实战记录

二、B/S架构

三、css基础

四、命名法

相关文章