前端三剑客入门指南-优快云博客

html入门

一:前端三剑客

html

完成页面架构的搭建
文件后缀：html

css

完成页面样式布局（装修）
文件后缀：css

javascript

完成页面功能
文件后缀：js

二:编辑器------sublime

安装

官网直接找到对应的系统版本下载，安装

插件

first:安装插件管理器  ctrl+~呼出控制台
second:粘贴官网代码：https://packagecontrol.io/ -> Install Now（如下）

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

使用

ctrl+shift+p 呼出插件管理器
install package 进入安装包的功能
输入需要安装的插件名
（esc可以退出）

转义字符

&nbsp;    一个空格
&nbsp;&nbsp  两个空格
&lt;

三:第一个页面

# html三个组成部分

# 标签：<字母开头 + 合法字符（数字 or -）>       (标签具有作用域，有头有尾)

# 指令：<！开头>  ----> <!doctype html>  <!--注释-->文档类型 和 注释

# 转义字符：由 &;包裹 ----> 特殊的字母 or 十六进制数

基本架构

<!doctype html>           # 文档类型

<html>                    # 根标签

  <head>

      <meta charset='utf-8'>

      <titl>thiss is title</title>

  </head>

  <body>

  hello,word

  </body>

<html>

四:基本标签

最基本

<div></div>
<span></span>

<div> 可定义文档中的分区域节(division/section),是一个块级元素，会自动开始新一行

<body>
  <div class = 'news'>
      <h2>New headlin</h2>
      <p>some text.some text.some text.</p>
      ...
  </div>

  <div class = 'news'>
      <h2>News headline2</h2>
      <p>some text.some text</p>
      ...
  </div>
</body>

<span></span>被用来组合文档中的行内元素。也就是一行内可以被<span></span>划分成好几个区域，从而实现某种特定的效果。

<p>
    <span>some text.</span>some other text.<span>another</span>
</p>

换行显示

<h1>
  一级标题
</h1>
...
<h6>
    六级标题
</h6>

<p>
    paragraph 段落
</p>

同行显示

//文本标签

<i>斜体</i>

<em>斜体，表示强调</em>

<b>粗体</b>

<strong>粗体，表示强调(语气更强)</strong>

<dle>删除文本</dle>

<ins>插入的文本</ins>

<sub>下标字</sub>

<sup>上标字</sup>

//组合

<table>
    <tr>
        <th>title</th>
    </tr>
    <tr>
        <td>单元格</td>
    </tr>
</table>

<form>
    <input>
</form>

功能

<img src='图片地址' alt='图片不能显示时的文本说明' title='鼠标悬浮的文本提示'>

<a href='https://www.baidu.com' target='_blank'>前往百度，并新建一个空白窗口</a>

<hr/> 分割线

<br/> 换行

五：标签分类

单双标签：
    单：主功能
    双：主内容(具有作用域)
    
行块标签（display)：
    行：同行显示
    块：换行显示
    
组合标签：
自定义标签

转载于:https://www.cnblogs.com/oden/p/10071887.html