html学习第一天

2024-01-02 21:22:06

编辑器：

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

五大主流浏览器(重点)

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

HTML

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

字符集 meta

  • <metacharset="utf-8" /> 单标签
  • 字符集的设置：为了防止出现页面乱码

标签

  • 标题标签 <h1> </h1> 1-6
  • 段落标签 <p> 自动换行
  • 换行标签 <br> 单标签
  • 水平线标签 <hr>单标签
    • width：宽度
    • size：高度
  • 盒子标签 <div> </div>
  • 范围标签 span 不换行
    结构化表现化标签
  • 加粗标签 <b> <strong>
  • 倾斜标签 <i> <em>
  • 下划线标签 <u> <ins>
  • 删除线标签 <s> <del>
    特点：不会换行

图片标签

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

链接标签

  • 标签名：<a> </a>
<ahref="https://www.baidu.com"  target="_self">百度一下</a>
  • 属性：
    • href：有下划线，且字体改变
    • 未知地址：#
    <a href="#">我是一个未知的链接</a>
  • target：默认是在当前窗口打开
    • _blank：新窗口打开
    • _self:在当前窗口打开
  • base: 设置网页中所有a标签链接的打开方式 base
  • 写在 <head>上面 单标签

定位

  • 锚点定位:链接的href属性与跳转的id属性保持一致，加#
<h3><a href="#first">第一集</a></h3>
<h4 id="first">第一集的标题</h4>

特殊字符（常用）

  • 空格： &nbsp；
  • 大于：&gt；
  • 小于：&lt；
  • 版权：&copy；

列表标签

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

注释、运行

  • ctrl+/ 或 ctrl + shift + /
    <!-- -->
  • alt + B 打开浏览器运行

文章来源:https://blog.csdn.net/m0_58779986/article/details/135309419
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。