前端学习之HTML4

目录

含义:

作用:

创建:

命名规范:

标准结构:

内容(标签):

   标签分类:

标签详情:

     字体标签:

     图像标签:

     链接标签:

     容器标签:

      多行文本框:

     下拉菜单:

     框架标签:

      列表:

     表格:

                        引入文件:

特殊字符:​​​​​​​

含义

    超文本标记语言

       超文本:超越文本限制,超级链接文本

       超文本标记语言简单来说,就是描述网页的语言

作用:

       构建页面结构

创建:

快速创建html文件:

     vscode软件(我常用的软件):

        第一种方法:文件--新建文件---选择语言----HTML

       第二种方法:点击左侧的下图图标---输入文件名称.html---回车

命名规范:

  •        不用中文命名
  •         不包含空格和特殊字符
  •         可以使用纯英文的小写字母,数字,下划线的结合
  •        首页一般用index命名
  •        文件名称要规范,不可使用中文拼音
  •       可以使用驼峰命名法  例如userName

标准结构:

<!DOCTYPE html>---- 给浏览器声明文档类型是HTML结构,使用html5语法
<!-- 以下是基本结构 -->
<html lang="en"> ----根标签,此页面使用英文语言
常见的语言类型:
lang='en'指定html语言种类
           en 英文
           ZH——CN 中文
           fr 法文

<head>------文档头部
     
  <meta charset="UTF-8"> 给浏览器声明使用的编码方式。默认是utf-8
  常见的编码方式:
        GB2312:简体中文
        BIG5  :繁体中文(港澳台地区)
        GBK   :全部中文字符(中国全部地区)
        UTF—8 :全世界所有国家要用的字符------最常用的方法
  注意:如果编码方式不是utf-8,请一定要写明编码方式,否则浏览器无法正确解读,页面会出现乱码问题
     
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 用户使用ie8及以上浏览器使用edge浏览(IE适配)
  <meta http-equiv="refresh" content="10;"> 配置网页自动刷新,跳转页面   
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 针对移动端页面进行简单配置
  <meta name="keywords" content="逗号或者斜杠分开,最多12字符">
  </meta> 配置网页关键字,利于搜索引擎
  <meta name="description" content="最多80字的网站描述">
  </meta> 配置网页描述信息
  <meta name="robots" content="">
  </meta> 针对搜索引擎爬虫的配置
  content:
  index 允许搜索爬虫索引此页面
  noindex 不允许搜索爬虫索引此页面
  follow 允许搜索爬虫跟随此页面上的链接
  nofollow 不允许搜索爬虫跟随此页面上的链接
  all 等价于index,follow
  none 等价于noindex,nofollow
  noarchive(nocache) 搜索引擎不缓存此页面
  <meta name="author" content="作者姓名">
  </meta> 配置网页的作者
  <meta name="generator" content="网页生成工具">
  </meta> 配置网页的生成工具
  <meta name="copyright" content="版权信息">
  </meta> 配置定义网页的版权信息

      <title>Document</title>-----文档标题
</head>

<body>
  文档主体
</body>

</html>

如何快速生成标准结构:输入html:5或者!------回车

内容(标签):

   标签分类:

     双标签:

          简单来说,就是<>   </> l两个括号

     单标签:

           简单来说,就是</> 一个括号 

    语义化标签:

         含义:根据标签的名字就可以知道标签的作用

          优点:

             1 代码的可读性强清晰直观,利于后期开发人员的项目交接阅读

             2 有利于搜索引擎的优化(简称:SEO)

              3 有利于方便设备解析代码(例如屏幕阅读器的应用)

         常见的标签:

              h标签,p标签    

 块级元素:

       含义:独占一行的元素

       常见的标签:div标签,p标签,h标签,address标签,blockquote标签

       使用规则:(h,p除外)可以嵌套行内元素,块级元素

行内元素:

        含义:不会独占一行的元素         

        常见的标签:span标签,input标签,

       使用规则:可以嵌套行内元素,不能嵌套块级元素

文本标签:

        含义:针对文本内容的标签

        常见的标签:em标签,strong标签,span标签  

         不常用的:cite标签(作品标题),dfn标签(专属名称),del标签(删除划线),ins标签(插入划线),sub标签(文字下标),sup标签(文字上标),code标签(代码显示),samp标签(输出文本),kbd标签(键盘文本),abbr标签(缩小,和title搭配使用),bdo标签(改变文本方向和dir搭配使用),var标签(标记变量,可以和code标签使用),small标签(附属细则),b标签(文本加粗),i标签(字体图标),u标签(反差文本),q标签(短引用),blockquote标签(长引用),address标签(地址)

标签详情:

            字体标签:

    标题标签:
    <h1>1</h1> ---显示的字体最大
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>----显示的字体较小
   注意:1-6  字体大小:由大逐渐变小
       一个页面一般只使用一个h1标签
       h标签不可以嵌套h标签
       h标签的展示效果可以通过css修改
       
   常用的标签:h1,h2,h3
 文字加粗(加粗,强调作用)
   <b>123</b>
   <strong>456</strong>

 文字斜线 
    <i>123</i>
    <em>456</em>

 删除线 
    <s>123</s>
    <del>456</del> 不常用

 下划线
    <u>123</u>
    <ins>456</ins>  不常用

 段落标签
    <p>12345678910</p>

 注意:p标签不可以嵌套p标签,div标签,h标签

 水平标签(分割线-实线)
    <hr>

 换行标签
    你好,惠特米勒<br>

  显示代码原格式:
    <pre></pre>

     图像标签:

图像标签:
  作用:引用图片
  <img src="图片来源/图片路径" alt="图片不显示时的替代文本" title="鼠标悬停时显示的内容" width="图片宽度" height="图片高度">


  属性:
    src   图片的路径,可以是本地图片路径,或者是网络图片路径
      路径:
       绝对路径:
         本地绝对路径:相对于本地电脑的文件路径(不推荐使用,局限性比较大)
         网络绝对路径:可以在浏览器上查看的文件路径
       相对路径:相对当前文件位置获取的文件路径
           同级位置:./
           上一级位置:../
           下一级位置:/
    alt   图片在不加载成功后展示的文本内容;有利于搜索引擎的优化
    tilte  鼠标悬停的时候显示的文本提示信息
    width  图片显示的宽度
    height 图片显示的高度
    onerror 图片加载失败后处理函数
     例子:
     <img src="http://123.com/image/name.png" onerror="this.src = defaultImage" />


图片常见的格式:
   jpg:
     含义:一种有损的压缩格式(肉眼不易观察的细节容易丢失)
     优点:颜色丰富,占用空间小
     缺点:不支持透明背景,不支持动态图片
   png:
     含义:一种无损的压缩格式,更高质量的图片
     优点:颜色丰富,占用空间大,支持透明背景
     缺点:不支持动态图片
   bmp:
     含义:不进行压缩的图片格式,保存图片更多细节
     优点:颜色丰富,保留细节更多,占用空间极大,
     缺点:不支持透明背景,不支持动态图片
   gif:
     含义:仅支持256种颜色,色彩呈现不是很完整
     优点:支持简单的透明背景,支持动态图片
     缺点:支持的颜色比较少,透明背景呈现度不如png
   webp:
     含义:谷歌推出的图片格式,专门用来在网页中呈现图片
     优点:拥有以上几种格式的优点
     缺点:兼容性不好,使用时需要处理兼容问题
    base64:
     含义:特殊的文本内容,需要使用浏览器打开
     生成:通过一些图片转base64格式的工具或者网站
     优点:可以直接使用,不用发送请求
     缺点:文本信息不可以修改;文本信息过长vscode不支持提示信息
     

链接标签:

链接标签:
  作用:跳转到某个页面         
  <a href="链接地址,具有超链接属性" target="目标窗口弹出方式">  文本或者图像</a>
  属性:
    href    跳转的路径(支持相对路径和绝对路径)
       参数: 
        tel    调用打电话功能
        mailto 调用发送邮件功能
        sms    调用发送短信功能
 
    target  跳转的方式
      常用的方式:
         self   默认值,在当前页面打开
         blank  在新窗口打开
    download 下载此文件
  锚点:
     含义:点击某段文字可以跳转到文本相关位置
      特殊使用:
        <a name=""></a>  刷新页面
        <a name="#"></a>  返回本页面的顶部
        <a name="javascript:脚本内容;"></a>  书写js脚本,脚本内容为空不进行任何操作


    例子:
      点击跳转 <a href="#href"></a>
      跳转位置 
          1 <a name="href"></a>
          2 <div id ="href"></div> 推荐使用

注意:a标签不可以嵌套a标签

容器标签:

 div标签:
    作用:可以装载许多标签,通常用于构建结构
  <div>是一个容器,用来装结构</div>
  注意:最常用的标签

 span标签
   作用:在一行内显示的内容
  <span>一行只能放一个span</span>

      多行文本框:

textarea控件:文本框
              作用:可以输入许多的文字内容
              属性:name  名称
                    id   ID名
                    cols 文本域的宽度,基本不用
                    rows 文本域的高度,基本不用

<textarea name="" id="" cols="30" rows="10"></textarea>

     下拉菜单:

 select下拉菜单:
      option中想要默认选中:selected=“selected”;
  
    <select name="" id="">
        <option value="">选项1</option> 推荐书写value
        <option value="">选项2</option>
    </select>

   框架标签:

<iframe src="" frameborder="0" width="600" height ="300"></iframe>


   属性:
    src           引用的路径(支持本地路径和网络路径)
    frameborder   边框
        0         无边框
        1         有边框
    width         宽度
    height        高度

使用:
  <a href="url" target="iframe"></a>
   <form action="###" target="iframe">

   </form>
   <iframe name="iframe" frameborder="0" width="600" height="300"></iframe>

列表:

列表:容器里装载着结构,样式一致的文字或图表的一种形式
      如何快捷生成列表:列表类型(ul)+li*想要的列表数量+回车
    作用:使数据清晰明了
    无序列表:没有顺序的列表,每项前面有小圆点
    <ul>
        <li></li>
    </ul>

  常见的应用:
       导航栏

    有序列表:有顺序的列表,前面标注着数字
    <ol>
        <li></li>
    </ol>
 常见的应用:
      榜单显示
       
    定义列表:自定义列表,自己决定列表展示
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>

注意:
 1.ul/ol标签内不要使用除了li以外的其他元素,如果需要使用,可以使用li嵌套使用
 2.li标签不要单独使用
 3.ul内嵌套ul时,不要嵌套过多

表格:

table表格:
     作用:用来展示数据,可以让数据显示整齐规范 
     属性:
        table标签:
              border      外边框                           取值:0无边框  1有边框 
              width       宽度
              height      高度(无法设置表头,表脚高度)
              align       网页中水平对齐方式              取值:方位名词
              cellspacing 单元格及边框之间空白间距
              cellpadding 单元格内容及边框间空白边距
         caption表格标题
         表头:thead(同tr.tbody,tfoot)
               height      高度
               align       文字对齐方式
                  center   居中对齐
                  left     向左对齐
                  right    向右对齐
               valign      垂直对齐方式     
                  top      向上对齐
                  bottom   向下对齐
              th 表头单元格
                 align
                 valign
                 width
                 height
                 rowspan   跨行合并
                 colspan   跨列合并
          主体:tbody
               td(同th)       
          表脚:tfoot

   
    <table>-- 表格标签
        <caption>表格标题</caption>-----表格标题:居中显示在表格上,跟随table标签移动
       <thead>
        <th>表头</th>--- 表头单元格:位于表格的第一行或者第一列,并且文本加粗居中
      </thead>
      <tbody>
           <tr>--表格行标签
               <td>1</td> ---表格列标签
           </tr>
      </tbody>
     <tfoot>
        <tr>--表格行标签
               <td>1</td> ---表格列标签
        </tr>
     </tfoot>---表格脚注  
    </table>

表单:

form表单:
    作用:收集用户信息,可与用户交互
    构成:表单控件,提示信息,表单域
    form:
       action  提交地址
       target  提交后是否打开新页面
         _self   默认值,当前页面打开
         _blank  在新页面打开
       method  提交方式(get.post)
    input控件:
        属性:
           type:
              text         文本框
              password     密码框
              radio        单选框(必填name,value属性)
              checkbox     复选框(必填name,value属性)
              button       普通按钮
              submit       提交按钮(使用时不要添加name属性),默认值
              reset        重置按钮
              image        图像形式提交按钮(必须有src属性)
              file         文件域(上传文件)
              hidden         隐藏域(一定程度防止批量注册形为)
           name            名称
           value           默认文本值
           size            显示宽度(取正整数)
           checked         默认选中
           maxlength       控制最大字符数(取正整数)
           disabled        禁止使用

    <form action="地址" method="提交方式" name="表单名称">
        <input type="text">

        //文字和form绑定使用:
         1 <label for=“name”>姓名</label><input type="text" id=“name”>
         2 <label>姓名<input type="text" id=“name”></label>
        //控件分类:
        <fieldset>
          <legend> 提示信息</legend>
            form内容
        </fieldset>
   
    </form>

引入文件:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> //引入图标   
<link rel="stylesheet" href=""> //引入css文件
<script src=""></script>        //引入js文件

特殊字符:

&nbsp; 空格 
&lt; 小于号 
&gt; 大于号
&amp; 和号 
&yen; 人民币 
&copy; 版权 
&reg; 注册商标 
&deg; 摄氏度 
&plusmn; 正负号 
&times; 乘号 
&divide; 除号 
&sup2; 平方根2 
&sup3; 立方根3

  全局属性:

   常用的

     1.  id:head标签,html标签,script标签,style标签,title标签,不能使用

     2. class:

     3. style:

     4. dir: ltr 左向右,rtl右向左,auto 居中

     5.title:

     6.lang:head标签,html标签,script标签,style标签,title标签,不能使用

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛刘刘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值