day1_1 html和CSS基础

在之前的课程学习中，因为只学习了几天，我学的是一些基础的html标签和布局格式，css样式和JavaScript都是直接写在html文件里，在担任前端完成一次大作业之后，我了解了Bootstrap栅格布局，还有一些新的JavaScript的使用。前几天，我隐约有放弃考研的想法，于是在某站上看了一些基础前端开发的知识，以下为我对我的已知知识的记录，仅概括我认为比较重要和我记不太清的知识点。

前言

开发工具

在学校的课程学习中，老师授课要求使用的是hbuilder，我认为它很直观，页面也很舒服，对初学者非常友好，但我的需求是就业，我之后的学习会使用vscode。

web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。web标准即是要求三者分开来写，基础阶段就是结构用html文件来写，表现用css文件来写，行为用JavaScript文件来写。

有一些快捷键很方便

1.！+ tab召唤html文件基本骨架
2.Ctrl+L选中行，alt+上/下箭头移动代码，alt+shift+上/下箭头相当于复制粘贴选中的代码行

有一些插件很方便

1.页面显示
在页面显示的插件上我更推荐使用Live Server,比起open in browser，它可以实时更新你的页面变化，不需要刷新页面，因而更加方便。

2.代码逻辑
Rainbow Brackets可以让不同匹配的括号显示不同的颜色，方便辨别逻辑。

3.自动格式化
之前看见有人推荐beauty，但是它现已停止维护，可以直接在设置里设置自动格式化

html标签

和的区别和联系

两者都是负责布局的“盒子”，但是div只能单行显示，而一行可以显示多个span

特殊字符

代表空格

表格相关

align="center" 用于设置表格在浏览器中居中
合并单元格：rowspan="合并单元格的个数" 用于跨行合并；colspan="合并单元格的个数"用于跨列合并。写上该代码后删除相应单元格。

表单

首先写一个表单域

,其它的代码写在表单域里，表单元素主要是

 </code></p> 
  <h6></h6> 
  <p><code><input></code>的使用主要是根据不同的<code>type</code>实现不同的输入，来收集用户信息。在设置选项时，注意把同类的选项设置成相同的<code>name</code>。</p> 
  <pre><code><!-- 把表单域里面的表单元素提交给后台服务器 -->
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <!-- 普通按钮，js搭配使用 -->
    <input type="button" value="获取验证码">
    <input type="file" value="上传文件">
</code></pre> 
  <p>在<code><input></code>中有一个<code><lable></code>标签可以提升用户体验，举例来说，如以下代码和图片：</p> 
  <pre><code class="prism language-<!--">    性别：<input type="radio" name="sex" value="男" checked="checked" id="sex"><label for="sex">男</label>
    <input type="radio" name="sex" id="sex"><label for="sex">女</label>
    <input type="radio" name="sex" id="小动物"><label for="小动物">小动物</label>
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/663e3664a7a7473baf788a9fe3964a0e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/663e3664a7a7473baf788a9fe3964a0e.jpg" alt="image.png" width="245" height="53"></a><br> 若不加<code><lable></code>标签，在选择性别时只能点击圆圈，加上了之后，点击文字就可以切换选择，文字换成图片也可以达到这样的效果。</p> 
  <h6></h6> 
  <p>举例如下：</p> 
  <pre><code>下拉表单：
    <select name="shuzi">
        <option>5</option>
        <option selected="selected">1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</code></pre> 
  <h6></h6> 
  <p>举例如下：</p> 
  <pre><code>文本域：
    <textarea name="message" id="feedback" cols="30" rows="10">
            你的反馈

可以观察到，以上三个表单元素都应该有name属性，通过为每个表单元素设置唯一的 name 属性，可以在提交表单时，后端服务器能够根据这些名称来获取用户输入的值，以便进行进一步的处理和验证。这样，表单数据就可以准确地传递给后端服务器，并被正确地处理。

CSS

在学校课程的学习中，样式设计是直接写在相应的html文件里，即在部分里加上