这是我参与「第四届青训营」笔记创作活动的的第1天

一、前端

## 1.1前端是干嘛的？ 1. >解决GUI人机交互问题 2. >跨终端: PC/移动浏览器、`客户端/小程序`、VR/AR等 3. >Web技术栈 >

前端应该关注哪些哪些方面啊？

1.2html语法

1、标签和属性不区分大小写，推荐小写

2、空标签可以不闭合，比如input、meta·属性值推荐用双引号包裹

3、某些属性值可以省略，比如required、 readonly

二：HTML

H TML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（ 组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ [tags]）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等

2.1简单入门


<p>My cat is very grumpy</p>

这是一个简单的html语句看看他们是怎么组成的

开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

内容（Content）：元素的内容，本例中就是所输入的文本本身。

元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

常见的一些标签

2.1结构

在这里插入图片描述

说明： <!DOCTYPE html> 其实不是html标签是指当前的文本使用的是哪一种规范 <html> </html>标签会包裹整个html文档 <head> </head> 包括字符集、文档的标题、关键字的信息、内联样式。这部分不会显示在浏览器 <body> </body> 显示在浏览的的页面 <label> 元素（标签）表示用户界面中某个元素的说明。

标签基础

- <p> </p>：段落
- <h1> </h1>：标题。一共有6级标题
- <br> 换行标签
- <a href="https://www.baidu.com"> 链接标签 href属性的值是地址
- <em> </em> 强调标签作用是字体变斜体
- <strong> </strong> 加粗强调标签
- `

<img src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1656694800&t=386f5b6f75bc577fa697a8f5b8c8bca8" width="258" height="39" /> HTML 图像标签 <img>

列表标签

		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>西瓜</li>
		</ul>
		
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>西瓜</li>
		</ol>

<ul> 和<li>是无序标签
<ol> 和<li>是无序标签

输入标签`<input>`

		<input type="text" placeholder="请输入姓名">
		<input type="password" placeholder="请输入姓名"><br>
		<label>
		<input type="radio" value="男" name="Gender"> 男 
		<input type="radio" value="女" name="Gender"> 女
		</label><br>
		<label>
			<input type="checkbox" value="1" name="in"/>1
			<input type="checkbox" value="2" name="in"/>2
			<input type="checkbox" value="3" name="in"/>3
		</label>
		<input type="file">

此标签根据 type不同功能发生变化以下是一些常用的值 text 文本 password 密码 radio 单选框 checkbox 复选框 file 文件

<textarea> 标签定义多行的文本输入控件。

实战

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>看小鸟</title>
	</head>
	<body>
		<h1>看小鸟</h1><img alt="看小鸟logo">
		<ul>
			<li><a href="#">主页</a></li>
			<li><a href="#">开始</a></li>
			<li><a href="#">图片</a></li>
			<li><a href="#">设备</a></li>
			<li><a href="#">论坛</a></li>
		</ul>
		
		<h2>欢迎</h2>
		<p>介绍一</p>
		<p>介绍二</p>
		<a href="https://www.baidu.com">
			<img src="3" alt="去百度的图片" />
		</a>
		
		<p>段落标签 <a href="https://www.baidu.com">百度一下你就知道</a></p>
	</body>
</html>

但是我们想要修改怎么办比如后面添加css样式？？？我们可以给网页分区域如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>看小鸟</title>
	</head>
	<body>
		<header>
				<h1>看小鸟</h1><img alt="看小鸟logo">
			<nav>
				<ul>
					<li><a href="#">主页</a></li>
					<li><a href="#">开始</a></li>
					<li><a href="#">图片</a></li>
					<li><a href="#">设备</a></li>
					<li><a href="#">论坛</a></li>
				</ul>
			</nav>
		</header>
		
		<main>
			<article>
				<h2>欢迎</h2>
				<p>介绍一</p>
				<p>介绍二</p>
			</article>
			
			<aside>
				<a href="https://www.baidu.com">
					<img src="3" alt="去百度的图片" />
				</a>
			</aside>
		</main>
		
		<footer>
			
		<p>段落标签 <a href="https://www.baidu.com">百度一下你就知道</a></p>
	
		</footer>
	</body>
</html>

三 CSS部分

css简介

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。本节将介绍 CSS 的基础知识，并解答类似问题：怎样将文本设置为黑色或红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，

css样式以及优先级

[优先级]

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。

[继承]

继承也需要在上下文中去理解 —— 一些设置在父元素上的 css 属性是可以被子元素继承的，有些则不能。

举一个例子，如果你设置一个元素的 color 和 font-family ，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。

[理解层叠]

当优先级一样时书写顺序在后面的优先级越高

一段简单的css代码

我们可以将 CSS 选择器分为五类：
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

前端学习笔记一html与css(一)｜ 青训营笔记