前端开发基础

HTML：

html基本结构与内容标签


第2行表示接下来是一个html文件
第3 19行表示一个html文件的起止点
head部分表示这个文件的基本信息，包括字符编码，与css js交互等等
body部分表示直接在网页上显示的内容

在对应文件夹中创建html文件之后输入一个！，回车即可自动补充html基本格式，
然后鼠标右键 openlive with serve可以和之前做web题一样打开当前html，如果编辑了html文件里的东西，用ctrl+s保存一下之后会在网页中显示
标签页名字就是title标签内容

标题的部分默认加粗，内容部分可以通过如图命令修改字体格式，但是更复杂的需要和css联动

有序列表

表格标签（有行有列）用table表示当前是一个表格，tr表示一行，td在tr里面表示每一列的内容，如果是列标题（黑体）用th表示。前面的border=1表示一个宽度为1的框架

属性与值

注意属性在标签中的定义的位置

这里以链接标签与图片标签为例子

• • 链接标签
    
    链接标签默认式不换行的，需要用br换行标签隔开。然后紧跟链接后【空格】target属性中self表示将当前页面跳转为目标页面（不写默认是这样），blank表示新建一个页面内容为目标页面
• • 图片标签
    
    图片标签换行可以用hr或者br，alt属性后面的容表示如果图片无法显示，他会输出什么，正常的话可以不写.
    同时要明确图片可以设置值去修改宽高
    

块元素与行内元素


这里为了让html能与css，js交互，用div标签吧html分割成好几个部分（比如说分别划分页脚，侧边栏等），然后class定义一个类名，后面css，js可以直接对这个类名的东西进行操作，便于划分。
创建形如<div class="nav"></div>的时候，只需要输入.（类名）+tab即可。还有一个属性叫做id，它相当于一个在html中只出现一次的class
如果创建id=？，输入#（类名）+tab即可
div和span标签定义基本相同，用作分割只不过一个是块，一个是行内
div元素：
由于div是块级元素，可以设置宽度、高度、边距、内边距等各种 CSS 属性，来改变其外观和在页面中的布局位置。
span元素：
span作为内联元素，默认情况下不能设置宽度和高度。但可以设置文本相关的样式，如颜色、字体、字号、加粗、斜体等，也可以设置水平方向的边距和内边距，但垂直方向的边距和内边距在某些浏览器中可能不会生效。
<span>文本</span>可以直接在一行内输出文本
一句话就是前者用于整体页面布局，后者用于样式化文本内容，二者一般结合css和js使用

表单
包括输入账号密码的登陆框，选项选择等，这个标签比较复杂，里面很多东西包含很多属性
标签是form


input标签中属性为text就是输入框，其他里面属性对应的效果其实很好看出来，label是固定与input绑定的标签，效果与span一致
label标签创建的时候会默认有一个for属性，他对应input中id属性的值，表示当前这个label标签和某个input绑定，后续调用是一个整体。
type属性=password，输入后显示***，type属性=text，输入后显示明文


input的type=radio表示选择框，name属性的值相同的选项只能单选，默认不加为都可以随便选。

checkbox是真正的多选属性值


这里是创建一个显示为“上传”的按钮，点一下之后会向form标签中action属性的值（一个链接api）发送这个form记录的数据

CSS：
https://www.runoob.com/css/css-tutorial.html
CSS导入方式：
css一般和html共同构成前端，一般html负责整体内容与布局，css可以设置各元素颜色，边框，背景等具体样式

选择器一般是确定一个html中的类或者id，让他的样式变为对应css属性的值。

关于css导入有好几个方式，上面这张图片是内部样式表，用style标签在head中表示，标志着这个html中所有p标签按照该style规定样式。
还有内联和外部表示，内联就是在标签中规定样式，优先级最高。外部样式表是单独写一个css文件，优先级最低，要在head中使用另一个标签把这个css链接过来。

三种导入方式的格式如图，css文件夹需要在与html同级目录下，

文件内容如上

CSS选择器：

上一部分是标签选择器，还有类选择器和id选择器，这里注意在正常标签中创建类和id用（标签名）.或#+tab即可

后代选择器与子选择器，这里div标签看作父亲
对于包含的标签，后代包括子代，所以如果有同时定义，后代的内容优先，

但如果这么写，算是对类名进行选择，因为优先级上id>类>标签，所以此时，div子标签son类按照绿色显示

伪类选择器，就是可以定义鼠标悬停时对应文字的样式，点击过和未点击过的链接的样式，点击输入框后鼠标的样式等等
上面图片里就是对于id=element的标签，进行一个鼠标悬停就染色的操作

CSS属性：
各个属性看菜鸟教程，这里简单说一下行元素，块元素和行内块元素

行内元素设置不了宽高，范围由其内容所占范围决定，行内块元素相当于默认不换行，但是可以设置宽高，比如插入图片的img


三者的转换页比较好理解，比如div是一个块，他的类名是div.line，然后文件头style中对于div.line的样式进行了规定，其中display：inline表示他转换为行内元素，这个inline是一个display属性的固定值，与自己定义的类名无关。