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. CF600E Lomsat gelral (dfs序+莫队)

    题面 题解 看到网上写了很多DSU和线段树合并的题解,笔者第一次做也是用的线段树合并,但在原题赛的时候却怕线段树合并调不出来,于是就用了更好想更好调的莫队. 这里笔者就说说莫队怎么做吧. 我们可以通过 ...

  2. C#基础_VS常用快捷键

    Shift+End,Shift+Home,跳转到当前代码的行尾和行首. 1.窗口快捷键 记忆诀窍: 凡跟窗口挂上钩的快捷键必有一个W(Windows): Ctrl+W,W:  浏览器窗口 (浏览橱窗用 ...

  3. 【java】学习路线5-public和private、构造方法、this关键字、封装对象、static关键字、main方法结构解析

    //一个教务管理系统//知识点清单/*public & private 的区别一个是公开的,一个是私有的,作用域不一样,访问的权限不一样咯如果是用private修饰,则调用者只可以是在当前的作 ...

  4. JavaScript之数组常用API

    这篇文章主要帮助大家简单理解数组的一些常用API用法,许多小伙伴常用方法记不住?别急,看完下面的介绍您一定就会明白各个方法是如何用的了.该文章适合新手小白看,大佬可以多多指点️! 1.数组的创建以及A ...

  5. KingbaseES 工具sys_dump,sys_restore使用介绍

    说明: KingbaseES V8R6版本中自带数据库备份导出sys_dump,和备份恢复sys_restore工具. sys_dump:把KingbaseES数据库抽取为一个脚本文件或其他归档文件. ...

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

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

  7. [开源福利] FreeRedis 历时两年正式发布 v1.0 [C#.NET Redis Client]

    最近很多 .net QQ 群无故被封停,特别是 wpf 群几乎全军覆没.依乐祝的 .net6交流群,晓晨的 .net跨平台交流群,导致很多码友流离失所无家可归,借此机会使用一次召唤术,有需要的请加群: ...

  8. (Bug修复)C#爬虫,让你不再觉得神秘

    Bug修复 https://github.com/ZhangQueque/quewaner.Crawler/issues/1 修复加载Https网址中午乱码,导致Node解析失败的问题 1.使用第三方 ...

  9. 一文入门Qt Quick

    以下内容为本人的著作,如需要转载,请声明原文链接微信公众号「englyf」https://www.cnblogs.com/englyf/p/16733091.html 初识Qt Quick 很高兴可以 ...

  10. Java 读写锁 ReadWriteLock 原理与应用场景详解

    Java并发编程提供了读写锁,主要用于读多写少的场景,今天我就重点来讲解读写锁的底层实现原理@mikechen 什么是读写锁? 读写锁并不是JAVA所特有的读写锁(Readers-Writer Loc ...