前端学习前三天总结

前端学习前三天总结 作为一个刚开始接触前端的非计算机专业学生,我觉得入门不是一件难事,主要还是靠多练习来提高自己的能力。以下是这几天学习内容的总结。
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加以美化
【前端学习前三天总结】块级标签 独占一行,不允许其他元素和自己同行显示
行级标签 占用的空间和自己有关,内容多宽度大

    推荐阅读