H5前端学习之一HTML和CSS基础认识

前言

我是一个转行的前端小白，大专非计算机专业毕业，所以对计算机很不擅长，但是对信息技术的好奇，让我对技术党尤为崇拜，既然好奇代码和崇拜技术，不如成为它！所以我来学习了当前教主流的——前端。初学前端，刚刚接触基础的HTML和CSS内容，下面对我第一星期的学习做个总结和分享，如果内容有不恰当的地方大家可以和我交流、请多多指教。 本周主要学习了HTML和入门认识即：HTML基础(标签和表单）、CSS（css基础+核心三大属性）。下面将详细讲解前端是做什么的？由哪些部分组成呢？这些专业名词是什么意思？可以用来做什么？让我们小白学习者有个初步概念。 # 一、H5前端是什么？ 我们多数听到的是前端这个岗位名称，而在行内其实多数都叫H5，那么H5是什么呢？它是HTML（超文本标记语言）的第五个版本，常用于网页开发、小程序、软件、APP、小游戏和后端相关的制作等等，日前我们在PC端和移动端能看到的大多都是需要前端技术作为主力来实现。H5由三部分组成：网页结构HTML+网页美化CSS+网页交互JavaScript；由此可见，我们需要学习的技术也是三类缺一不可。如果想跟我学习操作的话需要下载一个编辑器这里推荐vscode，不用问为什么就是好用！

提示：学习过程中多实操才能将知识点掌握牢固喔~~~跟着小星星开启学习之旅吧！

一、HTML基础

前面我们提到了HTNL用于表现页面的结构，也就是文字图片等的排版，那么我们具体说说都有哪些内容需要html书写吧！

A.表单

我们回想一下，当我们在进入新的网页或者APP时首先会进入一个界面让我们注册，输入手机号或者用户名、密码验证码等的信息，这其实就是form表单，用来收集信息。它的书写如下：

<formaction="设置提交的目的地网址"method="设置提交方式"><inputtype=""placeholder=""name=""value=""></form>

提示：代码为什么这样写我后面会解释
1、method="设置提交方式"有两种：method=“get”，method=“post”
get是获取数据，post是传送信息；
getpost在数据传送的时候,用户可以在地址栏上看到传送的过程在数据传送的时候,用户不可以在地址栏上看到传送的过程安全性比较低安全性比较高传送的数据比较小传送的数据比较大
两者相比较，显而易见更推荐post，但是不排除有的项目较小用get比较方便。
2.1、type=“类型”：
type 引号内可以写text文本框、password密码框、submit“提交”按钮、button单纯的按钮、reset“重置”按钮；
2.2、placeholder=“书写提示信息”：
比如：请输入名字或者邮箱或者QQ，type选择的是password这里写：请输入密码
2.3、name=“必须填写,如果不写,那么数据传送的时候接收不到”；
2.4、value=“值”：
当使用text和password必须给初始值，submit、button、reset用于修改文本。

B.标签

进入网页后我们可以浏览内容，内容的形式丰富多彩，有文字、段落、表格、图片等等，文字还有很多形式：比如加粗、下划线等等。那么这就是标签，对文字和段落有排版的作用：
HTML的语法：
1、常规标签/双标签（<标记 属性=“属性值"></标记>）
2、单标签/空标签（<标记 属性=“属性值"/>）

1、文字：

1. 文本标签：<h1></h1>....<h6></h6>
2. 段落<p> </p>
3. 加粗<b></b>,<strong></strong>有加粗和强调的作用
4. 倾斜<i></i>,<em></em>有加粗和倾斜的作用
5. 上标<sup></sup> ,下标<sub></sub>
6. 下划线<u> </u>
7. 删除线<del></del>,<s></s>
8. 强制换行:<br>,<br/>
9. 平行线:<hr>2、段落： 2.1、段落用三种列表来书写表达：
   无序列表有序列表自定义列表

   <ul><li>列表项1/2/...n<li/><ul/>:默认有圆点，list-style:none[没有前面小圆点]、inside[小圆点在li字里面] <ul> type=“circle”空心圆 / disc 实心圆/ square 实心方形>
   

列表项1列表项2...列表项n，常见的样式操作: <ol> type="A" start="4"> 那么是以A为标注的第四个字母开始则为D.E.F开头 type="1/A/a/l/i"<ol/>按照"text"内写的字母排序。

<dl><dt>被解释对象具有唯一性<dt/><dd>解释的内容 可以多个</dd> </dl>

2.2、如果每个段落的形式不一样时，我们班需要分区域处理，一般用

<div></div>

来划分。
2.3、文本节点：
a、特殊名词的突出：名字、书名、电视剧名称等，我们用

<span></span>

来书写。
b、block：选择器在读取书写的标签时，会给他们加一个类型
block：『块级元素，可以独自占据一行』
inline：『只有把父元素宽度撑满后才能换行显示』
2.4、最后我们还有一种标签是，特殊字符：
3、图片
网页文章出了有文字段落以外，还有图片：

<imgsrc=""width=""height=""title=""alt="">
在代码中我们用“img”引入图片，添加在src引号中，引用方式主要是两种：
3.1、相对路径：是指相对于电脑或者文件而言，也就是依附：
a、当前文件和目标文件在同一目录src="目标文件的名字.扩展名"
b、当前文件和目标文件所在的文件夹在同一目录 src="目标文件所在的文件夹名字/目标文件的名字.扩展名"
c、当前文件所在的文件夹和目标文件在同一目录  src="../目标文件的名字.扩展名"  ../后退1步  ../../后退2步    ../../../后退3步
3.2、绝对路径：不依附任何，固定存在的，例如：某D盘：\12.jpg，网站名，网站下载的图片等。
3.3、width和height属性的单位可以不写,默认的单位是px像素；
3.4、title="设置鼠标悬停上去之后的提示信息"；
3.5、alt="设置图片丢失之后的信息"。

4、超链接
最后，网页还有链接，就是我们看到图片或者文字时点击进去就可以跳转到另一个界面，这就是超链接的作用，既省去页面很多空间还能与用户有参与感：

<ahref=""title=""target=""></a>
href路径也是添加照片的另外一种引入方式：
4.1、相对路径：同上↑abc
4.2、绝对路径：同上↑
4.3、title="设置鼠标悬停上去之后的提示信息"；同上↑
4.4、target 设置窗口的打开方式：
a、target="_self" 在原窗口更新并打开窗口；
b、target="_blank"  新窗口打开。

注意：图片和超链接内容一定要在站点里面,不要出站点，否则照片或链接不会被识别。（专业名词：站点类似于“文件夹”）

二、CSS基础

我们说过CSS用于页面的美化，也就是文字图片等的修饰，接下来具体说说文本图片都可以如何修饰，来达到页面的美观吧！

A.CSS的三种引入方式

1、行内样式（内联样式）：<标签 style=“width:200px; height:200px;”></标签>
2、内部样式：在head里面创建

<style > ... </style>

这是常规书写；
3、外部样式：
3.1、先在body里面创建想要修饰的对象

<p></p>

；
3.2、在外面新建一个css文件，例如：demo.css；
3.3、在css文件里面书写修饰过程；
3.4、通过link或者import把HTML文件和css文件进行连接：
a、

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

推荐★
link是HTML的语法，在页面加载的时候是HTML结构和CSS样式同时加载的，没有兼容问题。

b、

<style>@import url();</style>

import是CSS的语法书写，先加载HTML结构,之后再加载CSS,在网速比较慢的时候会出现闪烁问题，import是CSS2.1提出的,对于IE5以下不兼容。
提示：引入方式不是强制要求，依个人习惯和项目大小自行选择。

B.选择器

1. 基本选择器： a、通配符：*{ } 权重是0。例如： *{margin:0;padding:0;} 清除所有标签自带的间距 b、类型选择器(标签选择器)：权重是1。语法: div{} p{} 等等。。 c、class选择器：权重是10。语法: .box{}，class的属性值可以是多个 class=“名字1 名字2”（要求：不能是数字开头，不建议使用中文，符号可以用“-”或者“—”,其他特殊字符不可以） d、id选择器：权重是100。语法 #box{}，id的属性值只能是1个，命名规范 同上。 e、群组选择器：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
2. 层次选择器： a、后代选择器：想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子。。例如 div p{} .box .a1{} b、子选择器：想要改变某个父元素下面所有的儿子元素的时候，父元素>子元素{} 例如 ul>li{} .box>p{} c、相邻兄弟选择器：想要改变某个元素后面紧挨着的元素时。 某某1+某某2{} 例如 div+p{} 改变的是p d、通用兄弟选择器：想要改变某个元素后面所有的元素的时候 某某1某某2{} 例如 divp{}
3. 伪类选择器： a、::before {content: "内容"/url(图片的地址）}，在上面的选择器内容之前的操作 b、::after{content: "内容"/url(图片的地址）}，在上面的选择器内容之后的操作 c、::first-letter： div::first-letter/div:first-letter，定义对象内第一个字符的样式，注：该伪元素只能用于块元素 d、::first-line： div::first-line/div:first-line，定义对象内第一个字符的样式，注：该伪元素只能用于块元素 e、::selection： div::selection ，选中之后的样式 只支持这background color属性
4. 属性选择器：

C.权重

1、权重大小排列： 继承 <自带样式<*[0] < 标签[1] < class[10] < id[100] < 行内样式权重值1000<! important

2、“继承”是最低的属性，只对文本有用 可以继承的元素有：color、 text-开头的、line-开头的、font-开头的。color、font-size、text-align、line-height、list-style、letter-spacing。
3、当修饰样式的时候,如果对于同一个标签设置了多次样式,可能会发生冲突,冲突之后的解析规则：
3.1、规则1:权重相同的时候,谁的CSS样式距离标签近就解析谁的(就近原则)
3.2、规则2:权重不同的时候,权重高的覆盖权重低的
4、方法二：***常用：加！important 代表把此权重提到最高，（后面样式出不来可以加上试试）

D.CSS的三大属性

a、文本的十一个属性：

1. color颜色
2. font-size 字体大小：12pt=16px「 font-size:0时 可以清除图片下面的小间距
3. font-famliy字体:谷歌火狐默认微软雅黑，其他浏览器默认宋体
4. font-weight加粗:bolder更粗的/bold加粗/100-900;100-500不加粗 600-900加粗
5. font-style倾斜:italic斜体字/oblique倾斜的文字/normal常规显示
6. text-align文本水平对齐:text-align:center「居中」文字水平位置
7. line-height行高:当line-height的属性值等于height的属性值时元素会垂直居中,line-height:1;时、100%时,等同于和字号大小一样垂直
8. font文字简写：简写font：italic 800 字号/行高px 字体；前俩可换位置，字号字体需同时存在。
9. text-decoration文本修饰：:none/underline下划线/overline上划线/line-through删除线)可删掉a u del s的线
10. text-indent首行缩进：text-indent可以取负值；text-indent属性只对第一行起作用
11. letter-spacing字间距，word-spacing词间距 b、 列表相关属性： list-style：list-style:none; 去除列表符号，list-style:inside 在…内部 c、背景的五个属性 1、background-color背景颜色 2、background-image背景图片：:url();背景图片，平铺占满容器且不占位置 3、background-repeat背景图片的平铺：background-repeat:no-repeat/repeat/repeat-x（以X轴横向平铺）/repeat-y（以Y轴横向平铺） 4、background-position背景图片的定位：:right top等不限顺序，用数字表示时规则为：右+左- 下+ 上负，以容器为第四象限 ，也可以给负值； 5、background-attachment背景图片的固定： : scroll (滚动)/ fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了。

总结

以上为本周我学习的内容，按照我的方式整理出来，算是对html和css的初步认识。下周学习浮动盒子模型、定位锚点透明、文本溢出、宽高自适应和BFC。

下周见咯~~~~