html学习第一天

编辑器：

• HBuilder:后面做UNIApp微信小程序
• DW:比较古老，控件的拖动
• sublime:界面 简介，插件少
• webStorm：后期做vue的开发
• vscode：插件丰富，各大公司都在用

五大主流浏览器(重点)

• 谷歌浏览器：webkit-blink
• IE浏览器：trident
• 狐狸浏览器：gecko
• 欧朋浏览器：Presto-webkit-blink
• safari浏览器：webkit

HTML

• Hyper Text MarkUp Language 超文本标记语言

字符集 meta

• 单标签
• 字符集的设置：为了防止出现页面乱码

标签

• 标题标签
  1-6
• 段落标签

  自动换行

• 换行标签
单标签
• 水平线标签

  ---

  单标签
  • width：宽度
  • size：高度
• 盒子标签
• 范围标签 span 不换行
  结构化表现化标签
• 加粗标签
• 倾斜标签
• 下划线标签
• 删除线标签
  特点：不会换行

图片标签

• 图片标签：单标签

<img src="./xiyanyang.jpg"alt="我是喜羊羊"border="20" title="喜羊羊"/>

• 属性：
  • src：图片的路径
  • title：图片的名称，当光标移入到图片是显示title属性
  • alt：当图片不显示时，显示alt的属性
• 图片路径
  • 线上路径：通过域名访问 http：xxxxxx
  • 本地路径：
    • 相对路径：
      • 同一目录 ：./图片名称
      • 下一级目录：./文件夹名/图片名
      • 上一级目录：…/图片名称
    • 绝对路径：死路径（不建议使用）

链接标签

• 标签名：

百度一下a>

• 属性：
  • href：有下划线，且字体改变
  • 未知地址：#

    <a href="#">我是一个未知的链接a>

• target：默认是在当前窗口打开
  • _blank：新窗口打开
  • _self:在当前窗口打开
• base: 设置网页中所有a标签链接的打开方式 base
• 写在 上面 单标签

定位

• 锚点定位:链接的href属性与跳转的id属性保持一致，加#

<h3><a href="#first">第一集a>h3>
<h4 id="first">第一集的标题h4>

特殊字符（常用）

• 空格：  ；
• 大于：>；
• 小于：<；
• 版权：©；

列表标签

• 有序列表 ul>li (每个li有默认小点）
• 序列表 ol>li (每个li有默认的数字序号）

注释、运行

• ctrl+/ 或 ctrl + shift + /
  
• alt + B 打开浏览器运行