html标签

最新推荐文章于 2023-07-14 18:04:08 发布

山河月色

最新推荐文章于 2023-07-14 18:04:08 发布

阅读量98

点赞数 1

分类专栏： web html标签文章标签：列表 html5 html 前端

本文链接：https://blog.csdn.net/m0_52412801/article/details/118636524

版权

web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html标签

3 篇文章 0 订阅

订阅专栏

html

html不是编程语言是超文本标记语言
网页文件的第一句是文档声明主要目的就是告诉浏览器以什么版本解析网页

     <!DOCTYPE html>这是一个h5声明

常用的浏览器及内核
浏览器内核
Chrome谷歌 webkit
Safaril苹果 webkit
Firefox火狐 Gecko
IE Trident
Opear persto 后期变为Bink

html标签

img标签

     <img src="" alt="" title="">
     其中src是图片的路径  /根目录 ./同级目录 ../上级目录 ../../上上级目录
     alt是当图片加载不成功时显示的文字
     title是当鼠标移入图片是显示的文字

div标签

<div>
	  div主要用来套小区域，段落文字，div
	  特性：宽度取决于父盒子宽度的大小，高度取决于内容的大小，独立成行
</div>

span标签

<span>
      span主要用来套图，套小图标，套几个字
	  特性：宽高取决于内容的大小，并排放置
</span>

加粗，斜体，下划线，中划线

     无语义化标签：<b>加粗</b> <i>斜体</i> <u>下划线<u/> <s>中划线<s/>
     语义化标签(可以增加网站曝光率)：<strong>加粗语义化标签</strong>  <em>斜体有语义</em> <ins>下划线有语义</ins> <del>中划线有语义</del>

标题，段落

<h(1~6)></h1(1~6)>
一个页面有且只有一个h1，建议只用h1到h3不建议用h4及以下的标题
<p></p>
可以看到明显的换行的就是一个段落
特性：一般来说只能套文字，也可以套文本标记小类型 span em strong 不能套图片(若想在p里套图片推荐在p里嵌套一个span     标签，在span里嵌套图片)，p元素是平级的

特殊字符 ,换行，水平线

     特殊字符：人民币：&yen;
          版权符号：&copy;
          空格：&nbsp;
          大于：&gt;
          小于：&lt;
     换行：<br>     一个空行一般用于文本里做换行
     水平线：<hr>   水平线：不可以设置高度

列表标签

     无序列表
	<ul >
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
     有序列表
    <ol>
        <li>1234</li>
        <li>1234</li>
        <li>1234</li>
    </ol>
     自定义列表
    <dl>
        <dt>列表标题</dt>
        <dd>列表数据</dd>
    </dl>

列表css属性

       css列表属性: 
       list-style:复合属性
       list-style-position:前缀标识位置 inside(li里面)/outside(li外面)
       list-style-image:url();插入图片取代小黑点标识 
       list-style-type:设置标识的类型 
       list-style:none 取消小标识

表格标签

     表格的头部thead
     表格主体tbody
     table表格区域>thead表格头部+tbody表格主体
     thead>行tr>字段单元格th
     tbody>行tr>列td 
     thead,tbody语义化标签
     与表格的渲染顺序有关系（弱化）
     当前表格标签 tr>th  tr>td
     <table>
         <thead>
             <tr>
                 <th>123</th>
                 <th>123</th>
                 <th>123</th>
             </tr>
         </thead>

         <tbody>
            <tr>
                <td>123456</td>
                <td>123456</td>
                <td>123456</td>
            </tr>
            <tr>
                <td>123456</td>
                <td>123456</td>
                <td>123456</td>
            </tr>
            <tr>
                <td>123456</td>
                <td>123456</td>
                <td>123456</td>
            </tr>
         </tbody>
     </table>
     **表格的合并**
  		 跨行合并 rowspan="n" n是你想合并的行数
         垂直方向 从上到下跨越 写在嘴上侧单元格

         跨列合并 colspan="n" n是你想合并的列数
         水平方向 从左到右 写在最左侧单元格

表格独有属性

	border-collapse:collapse;细线边框
	cellspacing:0 单元格之间的间距
	cellpaddig:0 内容与单元格之间的间距

超链接

<!-- 超链接 a 闭合标签（双标签） -->
    <h3>文字链接</h3>
    <!-- target="self本页打开（默认值）/ _blank以新页打开" -->
    <a href="https://www.ctrip.com">携程</a>

    <h3>图片链接</h3>
    <a href="https://www.jd.com" target="_blank">
        <img src="../images/1.jpg" alt="">
    </a>

    <h3>盒子链接</h3>
    <div>
        <a href="">
            <img src="" alt="">
            <p></p>
            <div></div>
        </a>
    </div>
    <h3>下载链接</h3>
    <a href="../images/1.zip">下载</a>

描点链接

 <!-- fixed固定在哪一个位置 -->
    <div style="position:fixed;right: 50px;top: 100px;">
        <!-- 锚点链接：点击a链接跳转到某一个页面的某一个部分 -->
        <a href="#ms">秒杀</a>
        <a href="#gc">广场</a>
        <a href="#tj">推荐</a>
    </div>

   <!-- 跳转到本页的某一个模块 只需要写href#id值(id值为本页模块的id值)
        跳转到其他页某一个模块 需要href="页面地址#id值"(id值为其他页模块的id值)
    -->

    <div>
        <!-- id唯一性 标识# -->
        <h1 id="ms">秒杀</h1>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
        <p>秒杀</p>
    </div>

    <div>
        <h1 id="gc">广场</h1>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        <p>广场</p>
        </div>

    <div>
    <h1 id="tj">推荐</h1>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
        <p>推荐</p>
    </div>

山河月色

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
html标签

htmlht加粗样式ml不是编程语言是超文本标记语言网页文件的第一句是文档声明主要目的就是告诉浏览器以什么版本解析网页 <!DOCTYPE html>这是一个h5声明常用的浏览器及内核浏览器内核Chrome谷歌 webkitSafaril苹果 webkitFirefox火狐 GeckoIE
复制链接

扫一扫

专栏目录