初识Html标签

HTML基本标签

1. 给浏览器声明文档解析类型,声明使用的是html这样的语言。

<!DOCTYPE html>

2.html 文档层级最高的标签。
3.meta 用来标记一些头部信息:

<meta charset="UTF-8"> 
        <!-- meta 用来标记一些头部信息;charset=“” 字符编码集;UTF-8 万国码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="HTML 标签">
        <!-- name="keywords"关键字 -->
<meta name="description" content="38期html/css教学">
        <!-- name="description"描述信息 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- name="viewport" 视口 -->

4.网站标题

<title>html第一课</title>

常用的标签

1.标题标签 h1-h6 属于块级标签占一行。
2.段落标签 p。
3.水平线标签hr。
4.换行标签br。
5.行内标签:span。
6.长引用标签 blockquote 块级,短引用标签q 行内。

<div>
	<p>
        一个人一首歌
        <hr>
        一家子一台戏
        <br>
        <span>那戏已不是好演的</span>
    </p>
     <blockquote>黄河之水天上来,奔流到海不复还</blockquote>
     <q>110</q>
</div>

文本格式化标签

1.strong 加粗,有强调性,强调给浏览器;b加粗,只是视觉上的加粗。
2.斜体标签 :em加重语义的斜体;i 只是视觉斜体。
3.删除线:del 加重语义,s 不加重语义。

 <p>
 	<strong>昨天</strong>下了一夜雨
    <b>走起</b>路来路挂泥
    天上有几丝<em>云彩</em> 
    <br>
    已然是<i>好天气</i>
    <br>
    不是云彩不下雨 <del>雨雨雨</del>
    <br>
    不是莲藕不挂泥 <s>泥泥泥</s>
 </p>

展示标签

1.图片展示标签:
src=“” 存放相对路径,或者存放绝对路径,项目中使用相对路径;
alt=“图片不能正常显示时的替换文本”;
title=""鼠标悬停提示文本;
width&height此处为属性,意为图片原始宽高。

<img src="" alt="" title="" width="100" height="100">

2.视频展示标签:
controls 播放控件,可直接写controls。

<video src="" controls></video>

3.音频展示标签:

<audio src=""></audio>

列表标签

1.无序列表:块级,存放结构相似内容。

<ul><li></li></ul>

2.有序列表:块级,有顺序内容,type属性:更改排序。

<ol type=""><li></li></ol>

3.自定义标签:
dt:名词;
dd:对该名词的解释。

<dl>
    <dt></dt>
    <dd></dd>
</dl>

特殊符号

1.pre 保留代码原格式。

<pre></pre>

2.常见特殊符号:

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

练习

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="练习">
    <meta name="description" content="初识HTML标签练习">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习_Y</title>
    <style>
        .box{
            width: 1220px;
            height: 1000px;
            border: 1px solid greenyellow;
            margin-left: 2px;
        }
        .img_2 h2{
            margin: -30px 100px;
        }
        .img_2 p{
            margin-top: 44px;
        }
        ul{
            margin-left: -38px;
        }
        ul li{
            margin: 20px 10px 0 0;
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img_1">
            <img src="素材/初识Html/images/faq01.jpg" alt="常见问题" title="">
            <hr>
        </div>
        <div class="img_2">
            <img src="素材/初识Html/images/faq03.jpg" alt="客服" title="">
            <h2>客服温馨提示</h2>
            <p>为了减少您可能的等待时间,您不妨先仔细阅读下面的常见问题。 查询物流状态,退货,退余额等操作均可以登录聚美优品网站后自助进行,无需联系客服。如果仍无法解决。请您在本页页底联系在线客服,或拨打聚美客服电话。小美谢谢您的理解!</p>
            <hr>
        </div>
        <ul>
            <li class="begin">
                <strong>美订单什么时候发货?大概多长时间可以收到货?</strong>
            </li>
            <li>
                <p>正常情况下您的订单将在6小时内发出(最晚不超过1个工作日)。8月1日的订单,将在3日内全部发出。发货之后,您可以在我的订单中可以查看发货状态。由于快递公司可能无法实时更新信息,因此您看到的发货情况可能有一定延迟。/p>
            </li>
            <li>
                <strong>为什么后下的订单,先收到了,之前下的订单还没有收到?你们是按什么顺序发货的?</strong>
            </li>
            <li>
                <p>为了单位时间内以最快速度处理尽量多订单,聚美会适当综合按订单里货品配货的情况安排发货顺序,因此可能会出现订单发货和下单顺序不完全一致的情况。我们会尽一切努力为您尽快发货。</p>
            </li>
            <li>
                <strong>订单显示发货了,但快递信息为什么还没有更新?</strong>
            </li>
            <li>
                <p>您在聚美订单页面看到的物流查询信息由快递公司传递提供。由于快递公司信息更新会有一定延迟,请您多多谅解。(延迟时间可能从1天到3天不等,EMS快递的物流配送信息可能最多可能有1周左右延迟)</p>
            </li>
            <li>
                <strong>名品折扣产品显示发货了,但是为什么没有快递信息?为什么有时联系快递,快递称没有这个订单?</strong>
            </li>
            <li>
                <p>由于名品折扣产品由品牌商负责发货,品牌商选择的部分快递公司不能及时提供快递物流信息,请您耐心等候。除非地域偏远,最晚七日内您应该可以收到货品。</p>
            </li>
            <li>
                <strong>名品折扣产品收到后,发现漏发了或者错发,应该怎么办?</strong>
            </li>
            <li>
                <p>请您先准备好漏发,错发的相关图片(拍摄图片),再通过在线客服核实,我们需要和品牌商方面进行确认,待客服确认后会进行补发或退款。</p>
            </li>
            <li>
                <strong>如果使用了现金券或红包的订单想退货,怎么办?</strong>
            </li>
            <li>
                <p>对没有付款的订单或者货到付款订单,您可以选择取消订单再重新下单。如果订单已经付款(或货到付款订单已被系统确认),请您自助登陆聚美优品网站提交退货申请,待聚美工作人员审批通过后订单就会进入退货状态,同时订单对应红包会变为“未使用”状态。此时您可以选择在我的订单页面将红包订单进行退款退货。</p>
            </li>
        </ul>
        <div>
            <img src="素材/初识Html/images/faq02.jpg" alt="没能解决您的问题?" title="">
        </div>
    </div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值