自学前端Day1(常见标签、路径、表格)

HTML 笔记

Day1

2020.7.6

插件

• open in browser
• auto rename tag 同步更改成对标签

DOCTYPE、lang、charset、html/css/js

文档类型声明标签(不是html标签)，告诉浏览器当前html页面使用的是哪个html版本(这句是版本5)，要处于html标签前。

lang

用于指定当前文档显示的语言

• en为英文
• zh-CN为中文

meta charset=“UTF-8”

用于指定字符集

html/css/js

目录

相对路径

• 同一级目录：被引用的资源(如图片)和使用它的html文件在同一目录下 (x.jpg)
• 下一级目录：图片在使用它的html文件的下一级 (images/x.jpg)
• 上一级目录：图片在使用它的html文件的上一级 (…/x.jpg，可多层嵌套)

绝对路径

• 在计算机中的位置 (F:\Note\python\Django)，但是换电脑时会出麻烦，因为别人的电脑可能没有你这些文件夹

注意

绝对路径和相对路径的斜杠方向是不一样的

常用标签

名称	含义
-	标题标签，标题后不能写其他内容(写了会换行)
	段落标签，段落间有间隔
(单标签)	换行标签，不会和上一行有间隔
or	加粗
or	倾斜
or	添加一条删除线
or	下划线
	没有具体语义，是一个盒子，单独占一行(大盒子)
	同上，但可以在一行显示(小盒子)
(单标签)	图像
	超链接
	注释

img标签更详细的属性如下：

属性间用空格隔开

a标签更详细的属性如下：

• 外部链接要写http://
• 内部链接直接写文件名就行，但要注意路径
• 空链接，若暂时不知道跳转哪里，可用#号
• 下载链接，url是文件
• 网页元素(图片、文本、音频等)都可以添加超链接
  • 
• 锚点链接，可以快速定位到某个位置。分两步：
  • 在a标签href中写"#xxx"，xxx是自己起的名字
  • 到目标位置标签，在里面添加一个id属性，如

    …

特殊字符

表格

表格标签

一对tr标签表示一行，里面的每对td都是一个格子，每个格子里都可以放若干数据

        
 
年龄
 
性别
 
        
 
23
  
男
 
        
 
19
  
女
 
    

表头单元格

th 突出表格第一行的重要性，里面的文字会加粗居中显示

表格属性

后面用CSS写，这里简单了解一下

表格结构标签

thead和th不一样，th是指表头中一个个单元格，而thead是指表头区域。

     
        年龄 
        性别
    


     
         
        
        
    
     
         
        
        
    
     
         
        
        
    

合并单元格

比如想合并如下单元格，第一行二三列合并，那么就要在第一行第二列td标签里改代码，并将第三个格子的td标签删去：

同理，如果向合并第二行第三行第一列的单元格，那么就要在第二行第第一列那个格子中改代码，并将第三行第一列td删去：

列表

无序列表

注意：ul标签中只能出现li标签，但li标签中啥都可以放。至于无序列表的样式属性，后面用CSS来设置。

有序列表

标签，但里面还是用
1. 标签，其它和无序列表很相似。

   自定义列表

   
   格式：
   同样，dl中只能有dt和dd且dt和dd可以出现多组，里面可以放任意标签。