RUNOOB html第一天

1.教程

后缀名

  • .html
  • .htm
    只有两种,有没有 l 没区别

2.简介

  • html5文档
  • 页面根元素
  • 包含元数据(meta)
    就是定义网页格式为utf-8(就跟定义算术是二进制还是十进制一样)
  • 标题</li> <li><body> 可见内容<br> 只有<body>里面才能显示</li> <li><h1>..<h6>各级标题</li> <li><p> 文本,段落</li> </ul> <h4>html</h4> <p>超文本语言<br> 不是编程,属于标记语言<br> web页面,描述网页</p> <h4>标签</h4> <p>一般成对出现。<br> <><br> <em>开始(开放)标签</em><br> <em>结束(闭合)标签</em></p> <h4>元素</h4> <p>约等于标签</p> <h4>web浏览器</h4> <p>浏览器是用于读取标签,按照需要的形式展现给用户<br> 谷歌浏览器,IE,firefox,safari</p> <h4>版本</h4> <ul> <li>html (1991)</li> <li>html+ (1993)</li> <li>html2.0 (1995)</li> <li>html3.2 (1997)</li> <li>html4.01 (1999)</li> <li>xhtml1.0 (2000)</li> <li><strong>html5 (2012)</strong></li> <li>xhtml5 (2013)<br> 2000年之前基本上2年换一个版本,2012年开始了新的时代</li> </ul> <h4><!doctype>声明</h4> <p>为了让浏览器正确读取内容<br> 不区分大小写<br> 一般情况<br> <strong>html 5</strong></p> <pre><code><!DOCTYPE html> </code></pre> <p><strong>html 4.01</strong></p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </code></pre> <p><strong>xhtml 1.0</strong></p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </code></pre> <h4>中文网页乱码</h4> <p>有些浏览器默认GBK为默认编码,所以需要在head声明<meta charset="UTF-8"></p> <h1>3.编辑器</h1> <p>推荐:notepad,sublime text,vs code<br> <em>Windows</em> 用户可以使用记事本;<br> <em>Linux</em> 用户可以选择几种不同的文本编辑器,如 vi、vim 或者 emacs ;<br> <em>Mac</em> 用户可以使用 OS X 预装的 TextEdit。</p> <h4>新建</h4> <p>文件(F)——新建(N)</p> <pre><code><!doctype html> <html> <head> <meta charset="utf-8"> <title>

    标题

    文字

    另存为.html

    文件(F)——另存为(A)

    运行

    双击

    Notepad++ 和 Sublime Text 还可以配合 Emmet 插件来提高编码速度。

    Emmet 官网:http://emmet.io/

    4.html基础

    标题

    ...

    逐渐减小
    段落

    内容


    连接

    百度
    

    图像

    
    
    • 在相同目录下
      ?=?.jpg
    • 在不同目录下
      .html和image同一目录
      ?=image/?.jpg/
      .html在connage文件夹,image跟connage同一目录
      ?=../image/?.jpg
    • 在不同盘(f)
      ?=file:///f:/?.jpg
    • 来源于网络
      写绝对路径

    5.元素

    段落

    文本
    换行

    元素语法
    某些元素有空内容
    空元素开始结束就结束了,例如 br
    但是更建议写成


    大多数标签都可以设置属性

    记得写结束标签
    记得使用小写

    6.属性

    一般用在开始标签里
    给元素设置一些附加属性

    百度
    

    一般用双引号,个别情况下有双引号就必须用单引号
    使用小写
    一般情况
    class 类名,一个或者多个
    id 定义元素
    style 行内样式
    title 作为工具条使用

    7.标题

    最大

    最小
    浏览器会自动在段落前后空行
    标题便于分清主次,同时也方便网页编制索引实现快速浏览

    • 分割线

    分割线
    • 注释
    
    
    • 查看源代码
      右键——查看源文件(IE)/查看页面源代码(firefox)

    8.段落

    • 分行br
    • 多个空格算一个,多个分行算一行

    9.文本格式化

    加粗    代替表着重
    斜体    代替表着重
    电脑自动输出
    (这里这里)
    下标
    上标
    小号字
    插入字加下划线
    删除字中间划线
    

    计算机输出标签(这里)

    计算机代码
    键盘码
    计算机代码样本
    变量有斜体效果
    
    预格式文本

    引文、引用、标签定义

    缩写
    
    地址
    文字方向

    该段落文字从右到左显示。

    长的引用
    短的引用语 引用、引证 一个定义项目有倾斜效果

你可能感兴趣的:(RUNOOB html第一天)