HTML(一)

HTML结构详解>>>

新建HTML文件，输入 html:5,按tab键后，自动生成的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1. 文档声明头 (<!DOCTYPE html> )

　　出现在HTIL页面第一行开头的这一行，就是文档声明头，DocType Declaration，简称DTD。

2. 头标签(head)

　　head标签放在头部分之间,包含: <title>, <meta>, <link>, <style>

<title> : 制定整个网页的标题,在浏览器最上方显示.

二. body标签中相关标签

字体标签：

h1~h6、<font> 、<u>: 下划线、<b>:加粗、<strong>:加粗, <em>: (斜体)、<sup>: (上标)、<sub>: (下表)

排版标签:

<div> 、<span> 、 <br>: (换行标签)、<hr>: (水平线标签)、<center>: (居中标签)、<pre>: (预定义标签)

超链接 :　　<a>　

图片标签 : 　　<img>

h1~h6

>>>标题使用<h1>至<h6>标签进行定义, <h1>定义最小的标题,具有align属性,属性值可以是: left,center,right.

字体标签>>>

<!--文档的声明 一个html文件就是一个文档-->
<!doctype html>
<html lang="前端">
<head>
    <!--head标签中的内容不会显示到浏览器上-->
    <!--单闭合标签 定义文档的编码类型-->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端第一天</title>
</head>
<!--body中的内容都会显示到浏览器中-->
<body>
    菜菜
    <!--h1块级模块: 独占一行-->
    <h1>辉哥</h1><h6>辉哥</h6>
    <h2>辉哥</h2>
    <h3>辉哥</h3>
    <h4>辉哥</h4>
    <h5>辉哥</h5>
    <!--下划线-->
    <u>姜玉阳</u>
    <!--加粗-->
    <b>周传雄</b><strong>周杰伦</strong>
    <!--换行-->
    <br>
    <!--分割线-->
    <hr><hr>
    <!--斜体-->
    <em>哈哈哈</em>
    <!--空白折叠: 换行和空格折叠成一个-->
    <pre>
        关不上的窗破碎的酒杯
        破碎的酒杯
    </pre>


</body>
</html>

字体标签

排版标签>>>

段落标签<p> (paragraph缩写).

　　文本级标签,放文字,图片,表达元素

　　align="属性值": 对齐方式. 属性包括: left, center, right

　　<p>这是一个段落</p>

　　<p align="center">这是另一个段落</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <!--记住:p标签只能放 字体标签和img 表单 input,它不能放块-->
        <p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p>
        <p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p>
        <p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p>
        <p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p>

        <!--p标签中不能放块级标签-->
        <p>
            哈哈哈
            <!--<div>嘿嘿</div>-->
            <p>嘿嘿</p>
        </p>
    </div>
</body>
</html>

View Code

块级标签<div>(division) 和<span>

　　div: 把标签中的内容作为一块对待,必须单独占一行

　　align="属性值": 设置块的位置,可选择: left,right,center

　　span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

　　<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

　　如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，　　　　　　　　DIV+CSS来实现各种样式。

超链接>>>

　　<a href="">段落段落段落段落段落段落</a>　　a是一个文本级标签

　　herf: 目标url

　　title: 悬停文本

　　name: 设置一个锚点的名称

　　target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：

_self：在同一个网页中显示（默认值）
_blank：在新的窗口中打开
_parent：在父窗口中显示
_top：在顶级窗口中显示

1.外部链接: 链接到外部文件

　　<a herf="new.html">点击进入到进网页</a>

　　a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

　　href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

2.锚链接：

　　在本页面或者其他页面的的不同位置进行跳转

　　3.特殊链接

返回页面顶部的位置

 <a href="#">跳转到顶部</a>

与js有关：

 <a href="javascript:alert(1)">内容</a>
  <a href="javascript:;">内容</a>

javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</2
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<ahref="javascript:alert()">内容</a>

图片标签<img/>(image) >>>

img标签的常用其它属性

width：宽度
height：高度
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
align：指图片的水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

两个写法:相对路径和对决路径,网路路径 src(source)

　　1.　　<img src="images/1.jpg">

　　2.　　<img src="C:UsersaaaDesktophtml-01images1.jpg">

　　3　　网路路径<img src="http://www.baidu.com/2016040102.jpg">

<!DOCTYPE html>
<html lang="小米商城首页">
<head>
    <meta charset="UTF-8">
    <title>小米商城首页</title>
</head>
<body>
        <div id="top" style=" 1000px;">
            <div class="top-1">
                <span>小米商城</span><span class="stp">|</span>
                <span>MIUI</span><span class="stp">|</span>
                <span>IoT</span><span class="stp">|</span>
                <span>云服务</span><span class="stp">|</span>
                <span>金融</span><span class="stp">|</span>
                <span>有品</span><span class="stp">|</span>
                <span>小爱开放平台</span><span class="stp">|</span>
                <span>政企服务</span><span class="stp">|</span>
                <span>下载app</span><span class="stp">|</span>
                <span>Select Region </span><span class="stp">|</span>
                <div class="login">
                    <a href="#">登录</a>
                    <a href="#" class="sep">|</a>
                    <a href="#">注册</a>
                    <a href="#" class="sep">|</a>
                    <a href="#">消息通知</a>
                    <span><img src="./tupian/gou.jpg" alt="" height="20">购物车(<span class="count">0</span>)</span>

            </div>

            <div class="top-2">
                <a href="#">小米手机</a>
                <a href="#">红米</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">空调</a>
                <a href="#">新品</a>
                <a href="#">路由器</a>
                <a href="#">智能硬件</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
                <form action="https://www.baidu.com/s" method="get">
                    <input type="text" name="wd" value="小米8 小米MIX2S">
                    <input type="submit" value="搜索">
                </form>
            </div>

            <div class="list">
                <u1 type="square">
                    <li>手机</li>
                    <li>电视<li>
                    <li>笔记本<li>
                    <li>家电<li>
                    <li>出行<li>
                </u1>
            </div>

            <div class="xiaolist">

                <table border="1" style="border-collapse: collapse;" width="300px">
                    <tr height="100">
                        <td>选购手机</td>
                        <td>企业团购</td>
                        <td>F码通道</td>
                    </tr>
                    <tr height="100">
                        <td>米粉卡</td>
                        <td>以旧换新</td>
                        <td>话费充值</td>
                    </tr>
                </table>
                <img src="./tupian/gou.jpg" alt="" height="1000">

            </div>

        </div>
</body>
</html>

小米商城练习