前端学习笔记DAY01

前端学习日记(记录从不会玩电脑小白到大神的过程):

(目标:2021年2月14日开始学习HTML,一个月拿下HTML基础。初心:记录个人学习成长,欢迎大神指点。)

一、基本语法记录:

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、单标签
其他属性:前端学习笔记DAY01_第1张图片
用法:无特殊用法,注意:属性中间用空格间隔;一般只设置宽度或者长度;

6、根目录与路径

根目录解释:打开目录文件夹的第一层就是根目录
相对路径:简单说图片相对于HTML文件的位置,分为三类:
1、同级目录 2、下级目录 符号: / 3、上级目录 符号: …/
绝对路径:在电脑路径中的位置

7、超链接标签< a herf="" > 内容< /a >

属性:herf 存放链接地址 target :链接打开方式,_self默认值,_blank为新窗口打开方式

8、链接分类

前端学习笔记DAY01_第2张图片

9、注释标签< !-- 这是注释 - - >

前端学习笔记DAY01_第3张图片

10、表格标签< table > < tr > < td >< /td >< / tr> < /table >

学习投资时间 回报率 兴趣程度 期望薪资
100天 80% 70% 15K

表格标签属性:(写到table里面);
< thead>标题< /thead > < tbody>主体< /tboday> 可设定标头和尾;
前端学习笔记DAY01_第4张图片

11、合并单元格技巧

1、跨行合并:roswpan=“行数”;目标单元格为最上方;
2、跨列合并: colspan=“列数”;目标单元格为最左方;
3、记得删除多余单元格;

12、列表标签(有序和无序)就是ol或(ul)标签+li标签

效果如下:

  • 123
  • 456
  • 789
  1. 123
  2. 456
  3. 789
基本用法:用法基本标签的格式;

13、自定义列表(dl dt dd)

效果如下:

关于我们
联系电话
传真
名词解释
基本用法:用法基本标签的格式; #### 14、表单 组成:表单域、表单控件、提示信息3部分组成; 表单域标签:< form > < /form > 表单域作用:实现用户局数据的收集 基本属性

前端学习笔记DAY01_第5张图片

表单控件:允许用户在表单中输入或操作选择的一些控件
类型
1、input:输入表单元素
2、select:下拉表单元素
3、textarea:文本域元素
4、前端学习笔记DAY01_第6张图片
前端学习笔记DAY01_第7张图片
注意:
name和vale是给后台人员使用的
name:单选按钮和复选框要有相同的值;
lable标签:能绑定图片和其他东西选择我们的按钮

select :下拉菜单的option标签用于选项。sleected=“slected”,当前默认选项;
文本域标签:< textarea >< /textarea >

你可能感兴趣的:(学习,html)