刚开始接触前端内容,把自己的所得所思随手记录一下吧~

期待能在之后的拼搏岁月里望见曾砥砺前行的自己:

搭建环境

浏览器 Chrome FireFox Safari IE Opera
代码编辑器 VSCode、WebStorm、Hbuilder、...
vscode 安装的插件

  live server/open in browser(在浏览器中打开)

HTML5

HTML 超文本标记语言 HyperText Markup Language

  • 制作网页的基础语言
  • 不是编程语言,不需要编译,浏览器直接执行
  • html语言形成一个文件,包含各种标记(标签)
  • 版本
    1993 IETF HTML1.0(官方不这么承认但理解成这样)
    ->1995 HTML2.0->1996 HTML3.2 ->1997 HTML 4.0
    ->1999 HTML4.01->2000 XHTML 1.0、1.1 ... (w3c)
    ->2004 HTML5草案->2008 HTML5正式版 (WHATWG)

    IETF(Internet Engineering Task Force)Internet 工程任务组
    
    * XHTML与HTML区别(XHTML会比HTML更复杂)
    * HTML5在HTML4.01基础上进行了扩展
    * IETF 国际互联网工程任务组
      W3C World wide web Consortium  万维网联盟
      WHATWG 网页超文本应用技术工作组

基本语法

### html的基本骨架
先创建文件,命名为XXX.html
*命名时一定要有后面的.html(我第一次就是没注意,倒腾了好长时间)
** 可自动生成html基本骨架的方式:
“!”+“Enter”/ “!”+“Tab”

<!DOCTYPE html>
<html lang="en"> //标签的属性
``
<head>

<meta charset="UTF-8">//<meta> 元素可提供有关页面的元信息,<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

</head>

<body>

</body>

</html>

  • DTD 文本类型声明
    <!DOCTYPE html> h5的文档类型声明
  • 从html根标签开始
    <html>

      <head>
          字符集
          网页标题
      </head>
      <body>
          网页真正显示的内容
      </body> 

    </html>

    <!DOCTYPE html>
    <html lang="en">

      <head>
           <meta charset="UTF-8">
           <title>****</title>    
      </head>
      <body>
    
      </body>
    

    </html>

### 标签

双标签 如<body></body>
单标签 如<img src="...."/>
建议标签都**小写**

<标签名 属性名1="属性值" 属性名1="属性值" 属性名1="属性值">
    
</标签名>

掌握标签 1 标签的含义(语义) 2 标签有哪些属性 属性的值有哪些 3 标签的分类

常用标签
主体结构标签
   html 
   head
   body
head标签内
   title
   meta
   ...
格式排版标签   
  h1~h6 标题
  p 段落
  hr/分割线  单标记
  br/换行  单标记
  pre 按原文显示 双标记
  div  无语义 主要用于布局->作分割线,导航,可配合css
  span 无语义 主要用于布局->小范围,用在div下
  

文本标签

  em 强调 通常斜体   i(了解)
  strong 强调(语气更重) b(了解) 
  del 删除线  (在原有的数字上划一个横线)
  sub 下标 (肚子在下边所以为下标)
  sup 上标 (头在上边所以为上标)
  ins  下划线 

其他的了解

  small big  font u code  ....


花海
1 声望1 粉丝

下一篇 »
<html 2>