1. Web标准的构成

    • 结构：结构对于网页元素进行整理和分类，现阶段主要学的是html
    • 表现：表现用于设置元素的板式、颜色、大小等外观样式，主要指的是CSS
    • 行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

  2. HTML标签导读

    • HTML语法规范：

      • HTML标签是由尖括号包围的关键词，例如<html。
      • HTML标签通常是成对出现的，例如<html>和</html>,我们成为创标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
      • 有些特殊的标签是单个标签，例如<br/>，我们成为单标签。
    • 标签关系
      • 双标签关系可以分为两类：包含关系和并列关系

  3. HTML基本结构标签

     <html>
    
     <head>
    
         <title><title>
    
     </head>
    
     <body>
    
     </body>
    
 </html>

  4. HTML常用标签

    • 标题标签 <h1> - <h6> 重要

      • 加了标题的文字会加粗，字号也会依次变大
      • 每个标题独占一行

  5. DOCTYPE和lang标签以及字符集的作用

    • <!DOCTYPE html>
    • <html lang="en"> 用来定义当前文档的显示语言
      • en:定义语言为英语
      • zh-cn:定义语言为中文
    • <meta charset="utf-8" /> 用来定义字符集

  6. 标签语义

    • 段落标签和换行标签

      • 段落标签:<p></p> <把HTML文档分成若干段落>
      • 换行标签：<br /> <强制换行>
    • 文本格式化标签
      • 加粗标签：<strong></strong>和<b></b>
      • 文字倾斜：<em><em>和<i><i>
      • 删除线：<del></del>和`
      • 下划线：<ins></ins>和`
      • 注意：优先使用strong、em、del、ins标签，这些语义笔记强烈
    • div和span标签：没有语义，他们是普通盒子，用来装内容
    • 图像标签和路径
      • img:<img src="图像URL" />

        属性 属性值 说明
        src 图片路径 必须属性
        alt 文本 替换本，图像不能显示的文字
        title 文本 提示文本，师表放到图像上，显示的文字
        border 像素 设置图像边框粗细
    • 超链接标签
      • 链接的语法格式 
            <a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
        属性 作用
        href 用于指定连接目标的URL地址，（必须属性）当标签应用href属性时，他就具有了超链接的功能
        target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
    • 链接分类
      • 外部链接：连接到其它网站，如百度
      • 内部链接：连接到本站点内的网页
      • 空连接：#
      • 下载链接：href中内容为文件，浏览器则会下载此文件
      • 网页元素链接：<a href="http://www.baidu.com" ><img src="baidu.jpg" /></a>
      • 锚点链接：点击链接，可以快速定位到页面中的摸个位置 
         1.在链接文本href属性中国，设置属性值为 `#名字` 的形式，如<a href="#two">第二集</a>
        
 2.找到目标标签，在里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>

Web前端基础第一天的更多相关文章

  1. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  2. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  3. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  4. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  5. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  6. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

  7. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  8. web前端基础知识学习网站推介

    内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...

  9. Web前端基础怎么学？ JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

随机推荐

  1. **********Prometheus（三）******************

    通过centos7.x来部署Prometheus ####同步时间,否则后面监控会有异常!!!!!####### 1. 创建文件夹,上传软件包.解压并将prometheus promtool两个命令复 ...

  2. 在众多小说中，Python告诉你哪本小说好看

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 有趣的Python PS:如有需要Python学习资料的小伙伴可以 ...

  3. Eureka源码分析

    源码流程图 先上图,不太清晰,抱歉 一.Eureka Server源码分析 从@EnableEurekaServer注解为入口,它是一个标记注解,点进去看 注解内容如下 /** * 激活Eureka服 ...

  4. python基础-json、pickle模块

    json.pickle区别 总结: """ json: 1.不是所有的数据类型否可以序列化,序列化返回结果为字符串 2.不能多次对同一文件序列化 3.json数据可以跨语 ...

  5. sudo -s 命令 [oh-my-zsh] 提示检测到不安全目录

    运行sudo -s 命令时,[oh-my-zsh] 冒出下面一大堆提示: [oh-my-zsh] Insecure completion-dependent directories detected: ...

  6. cli命令速查

    在文件的指定行(n)插入指定内容: sed -i "niecho "haha"" a 执行后,在a文件的第n行插入echo "haha" 多 ...

  7. 快速从零开始安装Laravel5.2教程

    前面 本文默认你Win电脑什么都没装,也就是从零开始安装Laravel,并且环境都由我来指定分配哈! 环境 首先搭建运行环境,先到 PhpStudy官网 下载PhpStudy的Windows版本.然后 ...

  8. 从头学pytorch(十三):使用GPU做计算

    GPU计算 默认情况下,pytorch将数据保存在内存,而不是显存. 查看显卡信息 nvidia-smi 我的机器输出如下: Fri Jan 3 16:20:51 2020 +------------ ...

  9. 可以用 Python 编程语言做哪些神奇好玩的事情？除了生孩子不能，其他全都行！

    坦克大战 源自于一个用Python写各种小游戏的github合集,star数1k.除了坦克大战外,还包含滑雪者.皮卡丘GOGO.贪吃蛇.推箱子.拼图等游戏. 图片转铅笔画 帮助你快速生成属于自己的铅笔 ...

  10. Jmeter:运行报：Error occurred starting thread group :线程组, error message:Invalid duration 0 set in Thread Group:线程组, see log file for more details

    最近在用jmeter做压测,上周五压测的脚本,今天早晨结束后. 点击同样的脚本,运行就报Error occurred starting thread group :线程组, error message ...