HTML + CSS 学习笔记(一)

HTMLCSS 的关系

  1. HTML 是网页内容的载体。内容是网页制作者放在页面上想要让用户浏览的信息,可以包括文字、图片、视频等。

  2. CSS 是表现。比如,标题字体、颜色变化或者标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  3. JavaScript 是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单,或鼠标滑过表格的背景颜色改变。可以这么理解,有动画的,有交互的一般都是用 JavaScript 来实现。

标签的语法

  1. 标签有英文尖括号 <> 括起来,如 就是一个标签。
  2. HTML 中的标签一般是成对出现的,分开始标签和结束标签。
  3. 标语标签之间是可以嵌套的,但是先后顺序必须保持一致,如

    ...

  4. HTML 标签不区分大小写,但建议都小写。

HTML文件的基本结构


   ...
   ...

  1. 称为根标签,所有的网页标签都在

  2. 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有 </em> 、<em><script></em>、<em><style></em>、<em><link></em>、<em><meta></em>等标签。</p></li> <li><p>在 <em><body></em> 和 <em></body></em> 标签之间的内容是网页的主要内容,如 <em><h1></em> 、<em><p></em> 、<em><a></em> 、<em><img></em> 等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。</p></li> </ol> <h3>head 标签</h3> <pre><code><head> <title>...

    HTML 的代码注释

    语法:``
    

    body 标签: 在网页上显示的页面内容一定要放在 body 标签中。

    标签: 在网页上显示文章,把文章的段落放到

    标签中。

    标签

    为你的网页添加标题,文章的标题使用 ,一共有 6 个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。依据重要性递减。

    是最高的等级。

    标签

    强调语气

    表示强调, 表示更强烈的强调。在浏览器中 默认用斜体表示, 用粗体表示。

    标签

    为文字设置单独样式

    1. 标签是为了强调一段话中的关键字时使用的,它们的语义是强调。

    2. 标签是没有语义的,作用是为了设置单独的样式用的。

    
    
      
      
      了不起的盖茨比
       
     
    
    

    1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。

    菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。

     标签:短文本的引用
    
    
    标签:长文本的引用
    标签:分行显示文本 这种标签属于空标签,只有一个开始标签,没有结束标签。   :输入空格
    :添加水平横线(空标签)
    标签:为网页加入地址信息 标签:加入一行代码 插入多行代码就不能使用标签,可以使用
    标签。
        
     无序标签:添加信息列表
    
    
    • 我的第一个列表信息
    每项li前都自带一个圆点

      有序标签

    添加有前后顺序的信息列表

    1. 我的第一个列表信息
    2. 我的第二个列表信息
    每项
  3. 前都自带一个序号,序号默认从1开始
  4. 标签

    相当于一个容器,用来盛放一些独立的逻辑部分。

    逻辑部分:页面上相互关联的一组元素,如网页中的独立的版块。

    标记版块名称:
    `
    ...
    `

    标签

    网页上的表格

    创建表格的4个元素:tabletbodytrthtd

    1.整个表格是以`
    `开始,
    结束。 2....:如果不加、、,table表格加载完成后才显示出来。加上这些表结构,tbody包含行的内容下载完优先显示不必等待表格结束后再显示。如果表格很长,可以使用tbody分段一部分一部分的显示。 3....:表格的一行,有几对tr表格就有几行。 4....:表格的一个单元格,一行中包含几对td就说明一行中有几列。 5....:表格的头部的一个单元格。 6.表格中列的个数,取决于一行中数据单元格的个数。

    添加下面代码可以给表格添加边框

    ``
        
    
    班级 学生数 平均成绩
    一班 30 89
    二班 35 85
    三班 32 80

    标签

    为表格添加标题和摘要

    摘要

    摘要的内容是不会在浏览器中显示出来,作用就是增加表格的可读性(语义化),是搜索引擎更好的读懂表格的内容。

    语法
    

    标题

    用来描述表格的内容,标题的显示位置在表格的上方。

    语法:
    
    标题文本

    标签

    链接到另一个界面

    使用标签可以实现超链接

    语法:
    
    链接显示的文本
        
    Click here!
    

    在新建浏览器窗口中打开链接

    链接显示的文本
    
    使用`mailto`在网页中链接E-mail地址
    
        链接显示的文本
        
    

    标签

    为网页插入图片

    语法:
    下载失败时的替换文本
    

你可能感兴趣的:(HTML + CSS 学习笔记(一))