前端学习日记(记录从不会玩电脑小白到大神的过程):
(目标:2021年2月14日开始学习HTML,半个月拿下HTML+css基础。初心:记录个人学习成长,欢迎大神指点。)
一、基本语法记录:
1、基本标签
1、标题标签< h1 >和< h6 >
解释:共6个等级 ;作为标题使用,重要性依次递减。
特点:1、加了标题文字会变粗,字号变大 2、一个标题独占一行 。
记忆:单词head的缩写,意思为头部、标题。
用法:< h1 >一级标题< /h1 >
2、段落标签< p > < /p >
解释:网页中文字分段显示,在HTML中用于定义段落,可把网页分为若干段落。
记忆:program的缩写,意味段落。
特点:1、会根据浏览器窗口大小自动换行 2、段落和段落间有空隙。
用法:< p >段落标签< /p >
3、换行标签< br/ >
解释:网页中文字从左到右依次排列,到浏览器窗口右端才会自动换行,此命令能够实现随心所欲的换行。
记忆:break的缩写,意味打断、换行
特点:1、单标签 2、另起一行无间距
用法:此处需要换行< br/ >
4、< div >< /div >和< span >< /span >
解释:无语义,盒子用来装内容
记忆:div是division的缩写表示分割、分区,span意味跨度、跨距。
特点:< div > 用来布局,一行只能放一个< div >,大盒子 2、span用来布局,一行可以放多个,小盒子。
5、< img src=“图片位置”/ >
解释:网页中添加图片
记忆:image的缩写,意味图像。
特点:1、src 是img的必须属性,指定图像文件路径和文件名。2、单标签
其他属性:
用法:无特殊用法,注意:属性中间用空格间隔;一般只设置宽度或者长度;
6、根目录与路径
根目录解释:打开目录文件夹的第一层就是根目录
相对路径:简单说图片相对于HTML文件的位置,分为三类:
1、同级目录 2、下级目录 符号: / 3、上级目录 符号: …/
绝对路径:在电脑路径中的位置
7、超链接标签< a herf="" > 内容< /a >
属性:herf 存放链接地址 target :链接打开方式,_self默认值,_blank为新窗口打开方式
8、链接分类
9、注释标签< !-- 这是注释 - - >
10、表格标签< table > < tr > < td >< /td >< / tr> < /table >
学习投资时间 | 回报率 | 兴趣程度 | 期望薪资 |
---|---|---|---|
100天 | 80% | 70% | 15K |
表格标签属性:(写到table里面);
< thead>标题< /thead > < tbody>主体< /tboday> 可设定标头和尾;
11、合并单元格技巧
1、跨行合并:roswpan=“行数”;目标单元格为最上方;
2、跨列合并: colspan=“列数”;目标单元格为最左方;
3、记得删除多余单元格;
12、列表标签(有序和无序)就是ol或(ul)标签+li标签
效果如下:
- 123
- 456
- 789
- 123
- 456
- 789
13、自定义列表(dl dt dd)
效果如下:
-
关于我们
- 联系电话
- 传真
- 名词解释
表单控件:允许用户在表单中输入或操作选择的一些控件
类型:
1、input:输入表单元素
2、select:下拉表单元素
3、textarea:文本域元素
4、
注意:
name和vale是给后台人员使用的
name:单选按钮和复选框要有相同的值;
lable标签:能绑定图片和其他东西选择我们的按钮
select :下拉菜单的option标签用于选项。sleected=“slected”,当前默认选项;
文本域标签:< textarea >< /textarea >