day01前端基础html

  • 浏览器内核:渲染引擎和js引擎


    image.png
  • web结构构成


    day01前端基础html_第1张图片
    image.png
  • 选择题


    day01前端基础html_第2张图片
    67V8VXXF}N`S_E})9}XL4$6.png
  • sublime编辑器常用快捷键
    day01前端基础html_第3张图片
    4)YVZ84LA$DAH1F6BP0)0ZT.png

sublime快捷键扩展

  • html:中文翻译为:超文本标签语言

  • 常用字符集编码方式


    day01前端基础html_第4张图片
    ww.png
  • html5基本写法


//声明文档类型
  
      //生命字符集编码方式
      html


我是h1

//字越来越小

我是h2

我是h3

我是h4

我是h1

我是段落标签

我是换行标签
我被换行了
我是水平线
  • div和span:div独自占用一行,没有语义
 我们是span我们在一行,不过`
`可以将我们分开 -->
  • 使用sublime创建html:html:xs/html:xt/!+table键
    -文本格式化标签:推荐使用前边
    
    
    
    
    
    
    
    

strong和em都有强调语气,del有删除语义,ins插入文本下划线

  • img标签属性
我是无图显示文本
  • src标签属性
我是链接名称

默认为self方式,无法返回,_blank为跳往指定链接,保留原页面,新开一个网页,新开网页也就是指定链接

  • 锚点
    • 创l建1.html



    
    1


    
    
    我要去第二段通过锚点
    
    
我要去2.html最后一段

我是第一段

我是第二段

  • 创l建2.html



    
    2


我是2.html最后一段

  • base标签可以在中设置所有链接打开方式



    
    
    


 111
 222

  • 注释语句:


    image.png
  • 空格: 

  • 上标:42下标:H2O`

  • 常见特殊字符


    day01前端基础html_第5张图片
    1.png
  • 绝对路径和相对路径

绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的“D:\web\img\logo.gif”,或完整的网络地址,例如“[http://www.itcast.cn/images/logo.gif](http://www.itcast.cn/images/logo.gif)”

相对路径
以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

  1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如
  2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如
  3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如
  • 无序列表/有序列表/自定义列表

    
  • 思维导图


    day01前端基础html_第6张图片
    HTML第一天.jpg

-练习代码




    
    Document


    

大家好一起来学习html标记语言

&bsp;     《早发白帝城》
朝辞白帝彩云间,千里江陵一日还。
两岸猿声啼不住,轻舟已过万重山

敕勒歌

朝代:南北朝

作者:佚名

    敕勒川,
    阴山下。
    天似苍穹,
    笼盖四野。
    天苍苍,
    野茫茫。
    风吹草底现牛羊。

关于我们 |  招聘信息 |   联系我们 |  意见反馈


Copyright©2016imooc.com All Rights Reserved

公式:X2+X=0   X1=0 ; X2=-1
  • 朝辞白帝彩云间
  • 千里江陵一日还
  • 两岸猿声啼不住
  • 轻舟已过万重山
  • 朝辞白帝彩云间
  • 千里江陵一日还
  • 两岸猿声啼不住
  • 轻舟已过万重山
  1. 朝辞白帝彩云间
  2. 千里江陵一日还
  3. 两岸猿声啼不住
  4. 轻舟已过万重山
  1. 朝辞白帝彩云间
  2. 千里江陵一日还
  3. 两岸猿声啼不住
  4. 轻舟已过万重山
一幅图像: 一幅动画图像:

这里是顶部

水果

蔬菜

运动

水果

  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
返回顶部

蔬菜

  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜
  • 萝卜

运动

  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球
  • 篮球

Things I've Learned

Internet Basic

  1. HTTP Requests
  2. IP Address
  3. Servers

HTML

  • Stands for HYPER Text Markup langue
  • Lots of tags
    • Boilerplate
      1. Doctype
      2. Html
      3. Head
      4. Body
        1. Title
        2. meta
        3. base
        4. delete me
    • Headings
    • paragraph
    • em
    • strong
  • 单选练习

单选题 共10题 满分:100分
1、对HTML中标签分类描述正确的是?(10分)
A、按照显示方式分为单标签和双标签 B、按照写法分为单标签和双标签C、单标签中可以继续包含其他标签 D、页面中只有双标签
2、

标签描述正确的是?(10分)
A、设置网页标题 B、设置网页段落
C、文字小于
中的文字 D、标题标签中数字越大,文字越大
3、什么是单标签?(10分)
A、页面中只有一个标签 B、单标签指的是没有开始标签
C、单标签指的是没有结束标签 D、没有开始标签和结束标签
4、target属性什么作用?(10分)
A、在图片标签中设置图片路径 B、在超链接中设置页面跳转方式
C、在超链接中设置鼠标悬停时的文字提示 D、在图片标签中设置页面跳转方式
5、对title标签描述正确的是?(10分)
A、title标签可以放到任何位置 B、title标签属于单标签
C、title标签要放到head标签中 D、title标签用来显示网页主体内容信息的
6、在HTML中设置网页标题的是哪个标签?(10分)
A、title B、body C、head D、link
7、文字斜体显示是哪个标签?(10分)
A、i标签或者strong标签 B、S标签或者em标签
C、em标签或者b标签 D、em标签或者i标签
8、web标准由哪些组成?(10分)
A、结构,样式,行为 B、结构,样式 C、样式,行为 D、结构,行为
9、文字加粗显示是哪个标签?(10分)
A、em B、ins C、strong D、u
10、对HTML描述正确的是?(10分)
A、HTML指的是超文本标记语言 B、HTML是用来设置网页样式的
C、Help txt markup Language 是HTML的单词缩写
D、HTML是用来设置网页特效的

你可能感兴趣的:(day01前端基础html)