码迷,mamicode.com
首页 > 其他好文 > 详细

前端入门前三天总结

时间:2018-07-27 14:36:12      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:而且   res   入门   传输数据   聊天界面   水平对齐   键值   联系   输入框   

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

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加以美化

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

前端入门前三天总结

标签:而且   res   入门   传输数据   聊天界面   水平对齐   键值   联系   输入框   

原文地址:https://www.cnblogs.com/wxy-wj/p/9377106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!