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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。