web前端学习之旅笔记01--HTML

  HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟!

  HTML 教程 (w3school.com.cn)

  HTML是网页的骨架负责页面的结构,css负责表现,js负责行为

HTML概述:

  HyperText Mark-up Language 意思是超文本标记语言,超文本指超链接,标记指标签,这个扩展名为.html或.htm的文本文件使用浏览器打开,被浏览器按标签描述渲染成网页,显示的网页可以跳转到对应的网页。

HTML基本结构:

<!-- 文档声明,声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签(元素),网页中的所有内容都要写根元素的里边 -->
<html>

<!-- head是网页的头部,head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>

<!-- meta标签用来设置网页的元数据,这里meta用来设置网页的字符集,避免乱码问题 -->
<meta charset="utf-8">

<!-- title中的内容会显示在浏览器的标题栏,搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>网页的标题</title>

</head>

<!-- body是html的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里 -->
<body>

<!-- h1网页的一级标题 -->
<h1>网页的大标题</h1>

</body>

</html>

HTML字符实体:
  &nbsp 空格
  &gt 大于
  &lt 小于
  <br/> 换行

HTML标签:
  <div>块标签,无具体语义
  <span>行标签,无具体语义
  带样式标签
    <em>行内元素,表示语气强调词,文字倾斜
    <i>表示专业词汇,文字倾斜
    <b>表示文档中的关键字或者产品名,文字加粗
    <strong>表示非常重要的内容,文字加粗
  语义化标签
    <h1>标题
    <p>段落
    <ul><li>列表 
     
HTML图片
  <img src="相对路径" alt="加载失败显示,盲人读屏文字显示"/>
  ./  当前文件所在目录
  ../  当前文件所在目录的上级目录

HTML链接
  <a>在网页上定义一个链接地址
  href属性:定义跳转地址
  title属性:定义鼠标悬停提示
  target属性:定义链接打开位置
    “_self”:原位置打开
    “_blank”:新开浏览器窗口打开
  <a href="#">跳转到页面顶部<a>

HTML列表  
  在html中也可以创建列表,html列表一共有三种:
  1、有序列表
  2、无序列表
  3、定义列表

  无序列表,使用ol标签来创建无序列表
  使用li表示列表项

  无序列表,使用ul标签来创建无序列表
  使用li表示列表项

  定义列表,使用dl标签来创建一个定义列表
  使用dt来表示定义的内容
  使用dd来对内容进行解释说明

HTML表格
  <table border="1" width="300" hight="100">//列
    <tr>行
      <td></td>//格子
    </tr>
  </table>

HTML布局
  就是排版,传统布局即table布局(EDM邮件),现在流行HTML+css布局
  下一篇做个 个人简历的传统table布局
HTML具体中文文档链接在下面哦!
HTML 教程 (w3school.com.cn)

web前端学习之旅笔记01--HTML的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  3. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  4. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  5. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  6. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  7. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  8. 立方体旋转 【web前端学习部落22群120342833】

    效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- // ...

  9. 2015 WEB前端学习路线图

    2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨

随机推荐

  1. 线程重用问题--ThreadLocal数据错乱

    前言 复现Java业务开发常见错误100例--1 项目完整代码:Github地址 知识点回顾: ThreadLocal的定义和使用: ThreadLocal概念以及使用场景 配置文件的读取: 获取配置 ...

  2. Java反射(重要)

    全文内容 1: 获取字节码文件对象的三种方式 2: 获取公有,私有方法,并调用构造方法,成员方法 3: 获取并调用私有成员变量 4: 如何为实例对象的成员变量赋值 5: 文末有一些注意 tea1类代码 ...

  3. Spring 源码学习笔记10——Spring AOP

    Spring 源码学习笔记10--Spring AOP 参考书籍<Spring技术内幕>Spring AOP的实现章节 书有点老,但是里面一些概念还是总结比较到位 源码基于Spring-a ...

  4. ABC209F. Deforestation——DP(、数学容斥)

    题面 有 n n n 棵树排成一排,每棵树高度为 h i ( i ∈ [ 1 , n ] ) h_i~(i\in[1,n]) hi​ (i∈[1,n]) ,你现在要按照一个排列 P P P 的顺序去砍 ...

  5. 应用性能监控:SkyWalking

    目录 SkyWalking 简介 SkyWalking 搭建 平台后端(Backend) 平台前端(UI) Java Agent(Java 应用监控) Java Agent 下载 Java 演练项目 ...

  6. Windows如何创存储虚拟机并制作存储虚拟化LUN的映射

    创建虚拟机 只能设置为8G,不能多也不能少 选择仅主机模式 选择使用现有磁盘 浏览选择自己的vmdk文件 选择保存现有格式 点击完成 点击编辑虚拟机设置 添加一个40G的硬盘 修改为40G并选择存储为 ...

  7. C++基础入门:C++初始

    1. C++环境:Clion搭建 下载链接:clion官方网址 1.1 点击下载 1.2 下载对应版本 1.3 安装步骤: 1.3.1 下载完毕后,打开exe文件,进入安装界面,点击[Next > ...

  8. 走进Redis-扯扯集群

    集群 为什么需要切片集群 已经有了管理主从集群的哨兵,为什么还需要推出切片集群呢?我认为有两个比较重要的原因: 当 Redis 上的数据一直累积的话,Redis 占用的内存会越来越大,如果开启了持久化 ...

  9. 03-MyBatisPlus的CRUD 接口

    一.insert 1.插入操作 @RunWith(SpringRunner.class) @SpringBootTest public class CRUDTests { @Autowired pri ...

  10. Windows Powershell 对于布尔值的处理

    Windows PowerShell中有很多场景需要输入0或者1作为命令的参数.Powershell对于布尔值的逻辑处理究竟是怎样的呢?除了最常用的$True, $False, 1, 0.对于要求输入 ...