2、HTML基础

最新推荐文章于 2024-06-14 07:44:22 发布

hl8187

最新推荐文章于 2024-06-14 07:44:22 发布

阅读量91

点赞数

分类专栏： Web前端文章标签： html 前端 vscode

本文链接：https://blog.csdn.net/hl8187/article/details/127164962

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、概念

1.岗位：移动前端/WEB前端
2.web组成标准：结构(html)、表现(css)、行为(js)
3.W3C制定了结构和表现的标准，非赢利性的。ECMA制定了行为标准。
4.HTML指的是超文本标记语言，HTML5指的是HTML的第五次重大修改，目前仍处于持续更新中。

二、站点的创建和使用

1.站点的作用：

用来归纳一个网站上所有的网页、素材以及他们之间的联系，放在对应的文件夹里，整合资源。

2.站点需要包含什么

    html文件夹
    css文件夹
    js文件夹
    images文件夹
    index.html

3.文件的命名规则

  <1>用英文不用中文
  <2>文件名有小写英文字母开头，由数字字母下划线组成。不得包含中文和特殊字符。
  备注：不遵循规则我的代码能运行么？  前期可以，但是后期会出现莫名其妙的错误，所以不推荐写中文。

三、快捷键

1.vscode字体大小方法      ctrl+ +号  ctrl+   -号
2.调整主题颜色            左下角设置——设置颜色主题
3.打开vscode              将站点拖拽至图标
4.创建文件夹和文件         左侧资源管理器顶部图标，第一个为新建文件，第二个为新建文件夹。
5.html文件后缀为.html      css文件后缀为.css
6.切换中英文                shift按键
*7.复制                    ctrl+c
*8.粘贴                    ctrl+v
*9.剪切                    ctrl+x
*10.保存                   ctrl+s    点击左上角文件，设置自动保存也可(注意配置)
*11.运行页面               alt+b     (需要设置测试浏览器为默认浏览器)
*12.撤销                   ctrl+z
*13.取消撤销               ctrl+y
*14.生成页面基本结构        在英文输入法状态下shift+1生成!  敲回车
*15.注释快捷键             ctrl+/   取消注释也是ctrl+/
    <1>html、css、js注释结构是不同的，但是快捷键相同。
      ——css   /*   */
      ——js    //
    <2>注释不能相互嵌套。
*16.快速生成一段文本       lorem
注意：我们在开发时是有的所有的符号都是英文输入法状态下的符号。

四、页面基本结构

<!DOCTYPE html>
<!-- <!DOCTYPE  声明文档类型> -->
<html lang="en">
    <!-- <html  标签  将页面整体包进去，说明整个页面都是HTML标记语言> -->
<head>
    <!-- head  头部标签  用来存放页面元信息，是写给浏览器看的 -->
    <meta charset="UTF-8">
    <!-- meta  媒体信息标签  设置编码格式为utf-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- meta  媒体信息标签  设置视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- title  页眉 -->
</head>
<body>
    <!-- body页面主体标签  是写给用户看的 -->
</body>
</html>

五、html语法结构

1.单标签

  <标签名 属性='属性值' 属性='属性值' />

2.双标签

  <标签名 属性='属性值' 属性='属性值'></标签名>

3.特点：

  <1>双标签成对出现，单标签单个出现，单标签以/结尾，但是/可以省略。
  <2>标签写在<>内，标签里边第一个单词为标签名，标签除了标签名之外还可以有属性和属性值。
  <3>属性和属性值之间用=号连接，属性值写在''内。（双标签的属性和属性值写在开始标签内）

六、html基础标签

*1.标题标签    h1-h6
  特点：
    <1>双标签，默认独占一行，自带间距
    <2>不同标题有不同字号，自带加粗
*2.段落标签    p
  特点:双标签，默认独占一行，自带间距
*3.空格符     &nbsp;
  特点:浏览器默认只是别一个空格，如果我们需要多个空格，可以使用空格符。
*4.换行符     br
  特点：单标签，作用是强制换行。
*5.分割线     hr
*6.加粗       b、strong
  特点：双标签，默认不独占一行。strong具有一个强调的语气。
*7.倾斜      i、em
  特点：双标签，默认不独占一行。em具有一个强调的语气。 
8.下划线    u    特点:双标签，默认不独占一行。
9.删除线    s、del    
  特点：双标签，默认不独占一行。del具有一个强调的语气。 
10.上标   sup   特点：双标签，默认不独占一行。
11.下标   sub   特点：双标签，默认不独占一行。
12.列表
  *<1>有序列表    ol>li    
    特点：
      (1)双标签，ol和li默认都独占一行
      (2)默认自带数字序号。
    属性:
      type      类型，取值为第一个字符。
        a       小写英文
        A       大写英文
        I       大写罗马
        i       小写罗马
        1       阿拉伯数字(默认值)
      start     开始
        取值为数字，规定从第几个开始。
  *<2>无序列表    ul>li
    特点：
      (1)双标签，ul和li默认都独占一行
      (2)默认自带小点点。
  <3>自定义列表   dl>dt+dd
*13.图片标签   img
    特点：单标签，默认不独占一行。每个图片都自带大小
    属性：
      src     路径地址
        *相对路径
            ../     返回上一层
            xx/     进入某个文件夹
        网络路径
          https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp7.itc.cn%2Fimages01%2F20201116%2F6beb9493c481457f8101f5ab16b71dbe.jpeg&refer=http%3A%2F%2Fp7.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666861826&t=2abbe110874ee32f3b174d99f095ca8b
      alt       当图片无法正常显示时的提示文本信息
      title     鼠标悬停时的提示文本信息
    注意：在寻找图片路径地址时，不要出站点文件夹
*14.超链接页面跳转   a
    特点：
      <1>双标签，默认不独占一行，自带下划线。
      <2>href里边什么都不写，则是跳转当前页面。
      <3>超链接在没有访问时，默认是蓝色的，访问后为淡紫色。我们可以通过
        超链接的颜色来判断是否访问过当前网址。
    属性
      href        跳转的地址
          网络地址            <a href="http://www.baidu.com">点我去百度</a>
          相对路径地址        <a href="../index.html">点我去首页</a>
      title       鼠标悬停时的提示文本信息
      target      跳转方式
        _blank              在新窗口进行跳转
        _self(默认值)        在当前窗口跳转
      div       默认独占一行，不带有任何的含义和默认样式。
      span      默认不独占一行，不带有任何的含义和默认样式。