前端学习前三天总结

前端学习前三天总结

作为一个刚开始接触前端的非计算机专业学生，我觉得入门不是一件难事，主要还是靠多练习来提高自己的能力。以下是这几天学习内容的总结。

1.在开始敲代码之前先学习一些快捷键的使用，对于我这样之前敲代码较少的人来说除了打字速度慢，不会快捷键的使用也超级影响学习速度，以下是一些写H5较为常用的快捷键（针对windows系统）
Tab:代码补全（比如输入p字母，一按 Tab键则会补齐整个标签）
ol>li*3:会写出一个有三个列表项的有序列表。此时光标在中间而且呈现红色，写完内容后直接回车就跳到下一个列表项的中间
ctrl+alt+下方按键：代码复制
alt+上下方按键：代码移动（使用这两个功能时光标可以在操作行的任意位置）
ctrl+shift+/:多行注释
ctrl+/:单行注释
以上是针对代码的快捷键，当然，要写的更快需要结合一些之前office等用到的键，上百度搜一下并且多用用就行。

2.元素，属性，内容的定义
元素：整个界面就是由N多个元素组成
属性：包含在标签内部 如src alt等
内容：包含在标签之间，有内容的一定是双标签

3.HTML标签常用标签：
h1-h6：标题标签，字由大到小
p：段落标签，在文本中多个连续空格和换行当作一个空格实现
br:换行标签
pre:预格式标签，保留写的格式
a：超链接标签
功能：
页面链接：外部页面链接、本地页面链接:（在此项目其他html文件中打开）
href写所链接的目标地址，target为_blank时打开新的界面，为_self则在本界面运行；
锚点链接：‘返回页面顶部’（top为顶部标题的id）
功能性链接：‘联系客服’，可打开该QQ聊天界面等
功能性链接有很多种功能，具体用的时候上百度上一查就有很多
Table：表格标签
由tr（行），td(单元格)或th(页眉单元格)构成。
表格属性：align :表格对齐方式，默认left
cellspacing:单元格间距
cellpadding:文本和单元格之间的距离
td,th属性：
width:单元格宽度；height:单元格高度
align:文本的水平对齐方式，valign:文本的垂直对方式bgcolor:单元格的背景颜色；
如果是相同属性，单元格优先级大于行，行的大于表格
tr属性：
width:设置无意义
height:设置整行的高度，bgcolor:设置整行的背景颜色，align:设置整行文本水平对齐方式，valign:设置整行文本垂直对齐方式
colspan:跨列数
rowspan:跨行数
表格结构化：
表格结构化标签:结构化标签包裹的的标签不管你怎么排列显示的时候会按照表格头（thead）-表格体（tbody）-表格尾（tfoot）
表格直列化：
colgroup:对列进行分组
col:代表某一列
分组后可以对多列进行属性设置
form表单：
属性：action:指定表单数据提交地址；mehtod:表单数据提交方法；
为了往服务端提交数据时，提交的数据清晰易懂方便处理
1.普通的输入框，需要添加name属性，来保证键值对的完整
2.非输入框要添加name,value属性来保证键值对的完整，单选框中同一组内的选项有互斥效果，复选框也需要name来表示当前的多项是一组
根据不同需求来确定使用get还是post,get传输速度快但是暴露敏感信息，传输数据有限，post传输速度慢但是可以隐藏敏感信息，传输数据多少没有限制
按钮四个：
type:rest 重置，type:submit 提交，type:image 具有提交功能，type:button 具有提交功能
select potion 选择框
textarea:文字区块，cols rows
fieldset:表单外边框，可将表单分成多部分显示
legend:表单标题
tabindex:元素顺序，从1开始索引
*form和table的配合使用，table放在form中，使得form表单更加整齐规范
智能表单：各属性可放在表单标签之外，通过form=id来与表单关联
form表单新属性：
autocomplete:输入框内容自动补全
autofocus:自动获取焦点
require:必填项
placeholder:提示信息（浅灰色在输入框底部显示，输入内容时自动消失）
readonly:只能读
select:打开浏览器时默认选中 单选框复选框通过chek属性默认选中
multiple:下拉框的多项选择
div:分区标签，可以将整个界面进行分区，使得界面规范美观，是网页制作中极为重要的标签，目前只需要对宽高属性进行设置，以后的学习中利用css加以美化

块级标签 独占一行，不允许其他元素和自己同行显示
行级标签 占用的空间和自己有关，内容多宽度大