HTML入门笔记(附完整代码)

本文笔记基于B站资源:千峰教育

 

目录

1.写博客

2.新闻列表

3.图片的使用

4.超链接与图片的知识补充

5.网盘的制作

6.简单表格的制作

7.个人简历

8.个人简历补充

9.登录表单

10.get获取和post提交


1.写博客

初识HTML,了解一些常用的标签:

h1:标题;

p:段落;

i:斜体;

b:加粗;

br:换行;

hr:水平线;

 :空格;

编辑器建议VS code,常用快捷键:

Alt+b:调试;

Alt+shift+b:选择浏览器调试;

ctrl+/:注释;

ctrl+enter:换行;

end:跳转该行末尾;

home:跳转至该行头部。

代码如下:




    
    
    
    


    

论   数学的重要性

2019.10.30

今天我打电话叫了个12寸的外卖披萨

告诉我们,
数学是多么重要!

结果显示:

HTML入门笔记(附完整代码)_第1张图片


2.新闻列表

目的是学习超链接、图片和列表的使用,另外,vs code编辑器使用代码补全功能,输入关键的标签,按下tab键即可,如:

超链接:a;图片:img;列表:ul、ol、li;然后按下tab键,其中列表可以ul*1>li*5然后tab键就可以列出5个无序列表:

代码如下




    
    
    
    百度新闻列表


    

科技 
  1. 续航更强了?苹果新iPhone电池容量将增加5%
  2. 从中性笔到智能烟灶套装,一起来看琳琅满目的6大米家.
  3. iPhone XR 2真香预警!续航更加无敌+后置..

 

HTML入门笔记(附完整代码)_第2张图片


3.图片的使用

图片的使用比较简单,设置的属性常用有宽度width,高度height,多图并排时建议使用其中一个,保持宽度或高度一样,代码如下:




    
    
    
    Document


    
    
    
    

结果如下:

除了像素px单位以外,还有%的单位,即相对于浏览器的比例,若想要铺满整个浏览器则使用100%,代码如下:




    
    
    
    Document


    
    

 


4.超链接与图片的知识补充

几个知识点:

1.超链接默认是当前窗口打开的,若想要在新窗口打开,则加上属性:target="_blank"

2.列表的形状是可以设置的,如无序列表中默认实心圆;空心圆:type="circle";实心方块:type="square"。有序列表更加简单,罗马数字I,数字1,字母A,a;

3.图片属性:alt:图片无法加载时显示的文字,title:鼠标悬停时显示的文字。

代码如下:




    
    
    
    Document


    
    当前窗口打开
    新窗口打开
    

        
  1. 续航更强了?苹果新iPhone电池容量将增加5%
  2. 从中性笔到智能烟灶套装,一起来看琳琅满目的6大米家.
  3. iPhone XR 2真香预警!续航更加无敌+后置..
1 22

HTML入门笔记(附完整代码)_第3张图片


5.网盘的制作

目的是为了搞清楚绝对路径和相对路径,绝对路径没啥好说的,就是具体的路径,而相对路径简而言之:

1.与当前html同文件夹则直接调用文件;

2.在当前html文件的上一个文件夹内,则在调用文件前加../,依次类推,上上级文件夹内则加../../,斜杠无所谓,\也可以,值得注意的是,若被调用的文件被一个文件夹包裹,还需要添上文件夹的名字,则../文件夹名/文件。不管怎样,../都在最前面。

文件如下:

HTML入门笔记(附完整代码)_第4张图片

如图,文件夹img、one、two和文件index.html并列,其中img中载有图片,one中载有one.html,two中有文件夹three和two.html;而three中有three.html。

index.html:




    
    
    
    Document


    
    

one two

结果如下:

HTML入门笔记(附完整代码)_第5张图片

one.html如下:




    
    
    
    Document


    
    

结果如下:

HTML入门笔记(附完整代码)_第6张图片

two.html:




    
    
    
    Document


    
    

three

结果如下:

HTML入门笔记(附完整代码)_第7张图片

three.html:




    
    
    
    Document


    

    

结果如下:

HTML入门笔记(附完整代码)_第8张图片


6.简单表格的制作

表格的标签为table,tr是行,td是单元格,若想设置5行6列的表格,则table>tr*5>tr*6再按tab键补全。

设置无间距的表格边框;

align="center"设置居中显示。

代码如下:




    
    
    
    Document


    

前端技术阶段划分标准

初级 中级 高级 专家
标准 被产品怼得说不上话 跟产品怼不相上下 怼得产品没话说 直接将其怼辞职
用户A

结果:

不过这个代码未免繁琐,每列的宽度若要设置一样可以

有几列就写几个,写在table标签后。居中显示也不必写在td后,而是写在tr后。此外,th表示tr居中且加粗。代码如下:




    
    
    
    Document


    

前端技术阶段划分标准

初级 中级 高级 专家
标准 被产品怼得说不上话 跟产品怼不相上下 怼得产品没话说 直接将其怼辞职
用户A

7.个人简历

目的是合并单元格。

合并7列:个人简历

合并4行:照片

并删除对应的其他行列的单元格。

代码如下:

 
 
 
 
     
     
     
     Document
 
 
 
个人简历
姓名 性别 年龄 照片
学历 籍贯
电话 政治面貌
毕业院校
求职意向

结果如下:

HTML入门笔记(附完整代码)_第9张图片


8.个人简历补充

简化2个标签:

1.设置列宽度一样,代替

2.th 表格加粗居中,代替

代码:

 
 
 
 
     
     
     
     Document
 
 
 
个人简历
姓名 性别 年龄 照片
学历 籍贯
电话 政治面貌
毕业院校
求职意向

结果:

HTML入门笔记(附完整代码)_第10张图片


9.登录表单

input常用类型:

HTML入门笔记(附完整代码)_第11张图片

input type;

1.form action="",表示提交地址;

2.所有提交的数据,input必须有name属性;

3.input按钮的文字使用value属性表示;

4.input必须在form内才能提交。




    
    
    
    Document


    
总体信息
用户名:
密码:

结果:

HTML入门笔记(附完整代码)_第12张图片


10.get获取和post提交

HTML入门笔记(附完整代码)_第13张图片





    
    
    
    Document


    

HTML入门笔记(附完整代码)_第14张图片

 

 

你可能感兴趣的:(HTML)