html常用标签

最新推荐文章于 2024-10-15 09:57:04 发布

x111223

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量236

点赞数

文章标签： javascript servlet 开发语言

本文链接：https://blog.csdn.net/x111223/article/details/127208496

版权

一、主流浏览器及内核（重点）

国内浏览器有哪些：IE、2345、QQ、360、搜狗、UC..... （基本上都是双内核 trident和webkit/blink）

主流的浏览器：谷歌、火狐、IE、欧朋、苹果

浏览器	公司	内核
chrome (谷歌)	谷歌	webkit - > blink
firefox （火狐）	mozilla	gecko
IE	微软	trident
opera（欧朋）	被360、奇虎收购	presto ->webkit ->blink
safari (苹果)	苹果	webkit

二、网页开发的三大核心语言

html （hyper text markup language）超文本标记语言结构层
css （cascading style sheet）层叠样式表表现层/样式层
js （javascript）脚本语言行为层

网页的三层结构：结构、表现、行为

三、html列表标签

3.1 无序列表 ul li

语法：双标签 ul和li是固定搭配 ul里只能直接放li，在li标签里可以放任何标签

语义：无序列表

用途：1、明显是列表 2、多个重复的部分

<ul type="square">
    /* type="disc" 实心圆   type=“circle” 空心圆  type=“square” 方形标记 */
        <li>今天是星期二</li>
        <li>明天是星期三</li>
        <li>后天是星期四</li>
    </ul>


    <ul>
        <li>
            <img src="" alt="">
            <p>对图片的解释</p>
        </li>
        <li>
            <img src="" alt="">
            <p>对图片的解释</p>
        </li>
        <li>
            <img src="" alt="">
            <p>对图片的解释</p>
        </li>
        <li>
            <img src="" alt="">
            <p>对图片的解释</p>
        </li>
        <li>
            <img src="" alt="">
            <p>对图片的解释</p>
        </li>
    </ul>

3.2 有序列表 ol li

语法：双标签 ol和li是固定搭配 ol里只能直接放li，在li标签里可以放任何标签

语义：有序列表

用途：明显是带序号的列表，多个重复的部分

明显是带序号的列表
<ol type="i">   
    /*type="1" 标记是数字 type="A"  大写英文字母  type="a" 小写英文字母  type="I" 大写罗马数字  type="i" 小写罗马数字*/
        <li>html-超文本标记语言</li>
        <li>css - 层叠样式表</li>
        <li>js - 脚本语言</li>
        <li>node - 第三阶段</li>
        <li>html-超文本标记语言</li>
        <li>css - 层叠样式表</li>
        <li>js - 脚本语言</li>
        <li>node - 第三阶段</li>
    </ol>


多个重复的部分
    <ol>
        <li>
            <img src="" alt="">
            <p>商品的解释</p>
        </li>
        <li>
            <img src="" alt="">
            <p>商品的解释</p>
        </li>
        <li>
            <img src="" alt="">
            <p>商品的解释</p>
        </li>
        <li>
            <img src="" alt="">
            <p>商品的解释</p>
        </li>
    </ol>

3.3 自定义列表 dl dt dd

语法：双标签 dl（自定义列表） dt（标题） dd（对当前标题的解释）

语义：自定义列表

嵌套关系：

dl里放 dt 和 dd

dt 和 dd 是兄弟关系

 <dl>
         <dt>肉类</dt>
         <dd>牛肉</dd>
         <dd>羊肉</dd>
         <dd>五花肉</dd>
         <dt>蔬菜类</dt>
         <dd>西红柿</dd>
         <dd>黄瓜</dd>
         <dd>白菜</dd>
         <dd>娃娃菜</dd>
         <dd>金针菇</dd>
         <dd>辣椒</dd>
     </dl>



     <dl>
         <dt>掰嘴</dt>
         <dd>
             <img src="" alt="">
             <p>描述描述</p>
         </dd>
         <dd>
            <img src="" alt="">
            <p>描述描述</p>
        </dd>
        <dd>
            <img src="" alt="">
            <p>描述描述</p>
        </dd>
        <dt>观影会客厅</dt>
        <dd>
            <img src="" alt="">
            <p>观影会客厅描述</p>
        </dd>
        <dd>
           <img src="" alt="">
           <p>观影会客厅描述</p>
       </dd>
       <dd>
           <img src="" alt="">
           <p>观影会客厅描述</p>
       </dd>
     </dl>

四、超链接标签

<a href="要跳转的路径" target="跳转页面的方式"></a>
      href="跳转的地址"  可以是外部链接，也可以跳转到内部地址
        路径分为：相对路径  和  绝对路径
        相对路径：对于当前文件来说去找的路径
                  /  根目录
                  ./ 同级目录 (可以省略)
                  ../ 上级目录
                  ../../ 上上级目录
                  ../../../ 三级目录 以此类推

        绝对路径：完整的地址（线上地址）和 某个盘符下去找
        
        
        注意：a标签里可以套任何标签（文字，图片，标题...都可以），唯独不能套a标签

4.1跳转页面

 <h2>a标签的 href属性</h2>
    <a href="http://www.baidu.com/">绝对路径-线上地址</a>
    <a
        href="https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=4116201790935904561&toc_style_id=feeds_default&share_to=wechat&track_id=0446d488-f250-4bc4-a61e-6f18238d63d8">绝对路径-线上新闻</a>
    <a href="E:\web0810\day19\test.html">绝对路径-本地盘符</a>
    <hr>



    <a href="/day01/代码/02常用的标签.html">相对路径</a>
    <a href="练习1.html">相对路径--同级目录</a>
    <a href="../test.html">相对路径--上级目录</a>
    <a href="../../day01/代码/02常用的标签.html">相对路径 -- 上上级目录 （day01里的代码里的02）</a>
    <hr>
    <h2>a标签的 target属性 链接打开的方式 </h2>
    <a href="./练习1.html">默认打开方式</a>
    <a href="./练习1.html" target="_self">在当前标签页打开-默认值</a>
    <a href="./练习1.html" target="_blank">在新的标签页打开</a>
    <a href="#">文字--如果暂时不知道跳到哪 # 占位置</a>

4.2锚点链接

 <!-- 
        1、给要链接的东西只能添加一个id属性
        2、把a标签和div通过id做关联
     -->
    <a href="#yonge">咏鹅</a>
    <a href="#yongliu">咏柳</a>
    <a href="#yongchun">咏春</a>
    <div id="yonge" style="height: 1500px;background: red;">
        鹅鹅鹅，曲项向天歌，白毛浮绿水，红章薄情比
    </div>
    <div id="yongliu" style="height: 1500px;background: green;">
        碧玉妆成一树高，万条垂下绿丝绦，不知细叶谁裁出，二月春风似剪刀
    </div>
    <div id="yongchun" style="height: 1500px;background: pink;">
        叶问叶问  我能打10个
    </div>

4.3下载文件（了解）

 <a href="./我的机密文件.docx">点击下载文件</a>
 提前新建好word文档

五、图片标签

单标签
<img src=“图片路径”  alt=“图片加载失败显示” title=“鼠标悬停在图片上显示的文本” width=“宽度”  height=“高度”>

支持相对和绝对路径     
     <img src="E:\web0411第一阶段\day02\03.webp" alt="细腰奥特曼" title="拯救世界"  >
     <img src="http://www.zj.gov.cn/picture/0/s2203031717426488680.jpg" alt="">
     <img src="../03.webp" alt="">
     <img src="./01.gif" alt="">
     <img src="./img/2.jpg" alt="" width="500px" height="500px">