第12周前端学习周报

书：

HTML:

      1.超文本标记语言，并非编程语言。

      2.通过标记符来标识网页中内容的显示方式，如图片的显 示尺寸，大小，文字的大小、颜色、字体。

      3.浏览器负责解释标记符，依次显示内容。

第一个HTML：

  //声明为 HTML5 文档





    //包含了文档的元（meta）数据

       //中文声明

      //网页标题,有且仅有一个title







    傻子的第一个标题  //定义一个大标题

    
傻子的第一个段落。
  //定义一个段落

标记符：<标记符> 内容

       <标记符 属性1=属性值1 属性2=属性值2...>内容

       标记符可以嵌套，但不可交叉.

 
我是个大傻子

文字与段落标记

1. 标题字标记：定义文章内章节标题的显示格式

 标题文字 //n表示标题的级数



    
一级标题

    
二级标题

    
三级标题

2. 文字格式标记：网页中普通文字的显示效果

 文字

3. 字型标记：设置文字风格

            粗体 斜体 下划线

            删除线效果 使字体相对于前面的文字增大一倍 ...减小一倍

            ^{下标 _{上标 闪烁效果 斜体（表示引用） 斜体加黑体}}

4. 段落标记和强制换行标记：

段落标记
换行

1. 水平线标记：显示一条水平线，将不同内容分隔开

noshade表示没有三维效果。

2. 其他标记：

     (1).分区显示标记：使一段文字统一对齐方式

文本或图像

     (2).特殊符号标记： &xx;内容&xx;

           xx:lt=< gt=> quot=" nbsp=空格

列表标记

1. 无序列表标记

     //
中的type表示统一类型

   
列表项目一

   
列表项目二

   
列表项目三

type: disc实心圆 circle空心圆 square实心方块

2. 有序列表标记

     type=1,A,a,大小写罗马字母

   
列表项目一

   
列表项目二

   
列表项目三

3. 自定义列表标记:

   
列表条目一

   
条目一的说明

   
...

网课：

快速输入批量元素

h[属性]>{内容}*6 可添加$自增符

常见文本元素

无语义

无空白折叠，常用于在网页中显示一些代码
 
  
a元素
 
  
href属性:
 
  
1. 普通链接
 
  
洛谷
 
  
2. 锚链接 
 
  
 章节一

   
章节一
 
  
二者并无本质区别
 
  
3. 功能链接：点击后，触发某个功能
 
  
 
   
- 执行JS代码,javascript: 
 
  
 
  
弹出：你好！
 
  
 
   
- 发送邮件,mailto:（要求用户安装邮件发送软件）
 
  
 
  
 点击给我发送邮件
 
  
 
   
拨打电话，tel:(手机端，电脑则需拨号软件)
 
  
 
  
  点击给我拨打电话
 
  
target属性:
 
  
 
   
_self:在当前页面窗口打开，默认值
 
   
 _blank:在新窗口中打开
 
  
 
  
开始胡编：
 
  



    
    
    
    


    马学长推荐的学习网站:

    MDN
    菜鸟教程
    掘金
    博客园
    CSDN 

    刷题网站:

    洛谷
    PTA
    力扣 


 
  
路径的写法
 
  
站内资源和站外资源
 
  
站内资源：当前网站的资源  相对路径
 
  
站外资源：非当前网站的资源  绝对路径
 
  
1. 绝对路径
 
  
绝对路径的书写格式：
 
  
协议名://主机名:端口号/路径
 
  
https://www.luogu.com.cn/
 
  
2. 相对路径
 
  
   必须以./开头（可以省略），./表示当前资源所在的目录
 
  
   可以书写../表示返回上一级目录
 
  
图片元素
 
  
img元素 （空元素，无需)
 
  
 
   
src属性(source):
 
   
alt属性(alternative):当图片资源失效时，将使用该属性的文字替代图片
 
  
 
  
 
  
和a元素联用
 
  


   

  //点击图片即可跳转到相应网页
 
  
和map元素(在图片中“指哪打哪”)
 
  
map的子元素area：
 
  


   



 
  
 
   
- shape=circle,rect(矩形),poly(多边形)
 
   
- coords=坐标（以图片左上角为原点）
 
  
 
  
  circle(x,y,r) rect(左上角，右上角) poly(各端点坐标)
 
  
 
   
- 衡量坐标时，为了减小误差，可以用专业的图片工具：ps pxcook
 
  
 
  
和figure元素
 
  
指代、定义，通常用于把图片、图片标题、描述包裹起来。
 
  
子元素figcaption，表示标题。
 
  

        

            
标题
        
        
        
内容
    
 
  
开始胡编：
 
  
最后一次握手
 
  




    
    
    
    



    

        

            
最后一次握手
        
        
            

            
        
        
1974年5月的一个夜晚，在马来西亚的总理走出毛泽东的书房时，随着随行记者注意到了一直在门口的周恩来，两人都没有说话，但是却紧紧地握住了彼此的双手，时间定格的同时，却是一个时代的结束和另一个时代的开始。
        
    
    


 
  
多媒体元素
 
  
video audio
 
  
布尔属性
 
  
  只有两种状态：1.不写 2.取值只能为属性名
 
  
  在HTML5中，可以不用书写属性值
 
  
  controls 显示控制栏 autoplay 自动播放 muted 静音播放 loop 循环播放