美文网首页
二阶段day1

二阶段day1

作者: 我才是鳄鱼宝宝 | 来源:发表于2018-10-30 17:14 被阅读0次

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>

    <body>

    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>

        <!--2.段落标签: p
    
    
            网页的内容中一个段落文字对应一个p标签
            p标签的内容结束后会自动换行
            
            注意:html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效)
                 但是可以通过一些特殊的符号,来产生特定的效果
                 
            空格符:&nbsp;
            强制换行:<br />
        -->
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;随着今年苹果秋季发布会的闭幕,从 1(初代 iPhone)到 10(iPhone X),<br />
            新 iPhone 的命名即将用尽包括数字 10 以内的所有数字,<br />
            对于苹果来说,从明年开始,为新 iPhone 命名将会是一件头疼的事情。2&divide;10=0.2
        </p>
        <p>
            实际上,去年苹果公司决定用罗马数字 X(读 ten)来命名开始,iPhone 已经步向了「命名荒」,
            而进一步加剧这个情况的,则是今年的新 iPhone,由于新 iPhone 并没有巨大的变化,
            所以它似乎并不足以获得一个全新的命名,比如说 iPhone Ⅺ (11)这样的称呼。
        </p>
        
        <!--3.文字效果:
            a.加粗:b标签,strong标签
            b标签:单纯的在样式上进行加粗
            strong标签:除了将文字加粗显示外还有强调的意义
            
            b.倾斜:i标签,em标签
            em标签有强调的作用
        -->
        <p>实际上,去年<i>苹果公司</i>决定用罗马数字 X(读 ten)来命名开始,<em>iPhone</em> 已经步向了「<b>命名荒</b>」,
            而进一步加剧这个情况的,则是今年的新 iPhone,由于新 iPhone 并没有<strong><em>巨大</em></strong>的变化,
            所以它似乎并不足以获得一个全新的命名,比如说 <strong>iPhone Ⅺ</strong> (11)这样的称呼。</p>
            
        <!--4.水平线:hr
            单标签
        -->
        <hr />
        
        <!--5.列表标签:ul,ol,dl
            
            ul:无序列表
            ol:有序列表
            dl:自定义列表
        -->
        <ul>
            <li>语文</li>
            <p>语文是个什么样的学科。。。。</p>
            <li>数学</li>
            <li>英语</li>         
        </ul>
        <ol>
            <li>北京</li>
            <p>北京最大的特点是雾霾~</p>
            <li>成都</li>
            <p>天府之国</p>
            <li>大连</li>
            <p>美丽的海滨城市</p>
            <li>重庆</li>
            <p>辣妹儿+火锅</p>
            <li>青岛</li>
        </ol>
        <dl>
            <!--dt对列表进行分组-->
            <dt>A</dt>
            <!--dd列举分组下的内容-->
            <dd>and</dd>
            <dd>are</dd>
            
            <dt>B</dt>
            <dd>big</dd>
            <dd>bpdy</dd>
        </dl>
        
        
    </body>
    

    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图片和超链接</title>
    </head>
    <body>

            src属性:图片地址(可以是本地图片地址,也可以是远程服务器上的图片地址)
            title属性:设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
            alt属性:用来设置图片加载失败的时候出现的提示信息
        -->
        <img id="1" src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
        <img id="2" title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
        <img id="3" src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
        <img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
        <img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
        <img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
        <img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
        <img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
        <img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
        <img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
        <img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
        <img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
        
        <!--2.超链接标签:a标签
            想要点击跳转的地方都可以使用超链接语法
            注意:a标签的内容部分是可见的,是可以被点击
            
            (1)href属性:跳转目标对应的地址
            a.其他的网页地址  -----  跳转
            b.写本地的一个html路径 ------ 跳转
            c.空  ------- 刷新当前网页(重新加载)
            d.选择器  ------ 让网页跳转到指定的位置
            
            (2)target属性:设置跳转方式
            _self(默认值):在当前页中刷新出新的内容
            _blank:创建一个新的页面,在新的页面中刷新出href指定的内容
            注意:刷新当前网页和在当前网页中跳转到指定位置的时候,只能使用默认的_self
        -->
        <a target="_blank" href="http://www.baidu.com">百度一下</a>
        <a href="http://www.1000phone.com">千锋</a>
        <a href="01-文本标签.html">文本标签</a>
        <a href="">刷新</a>
        <a href="#1">第一张</a>
        <a href="#2">第二张</a>
        <a href="#3">第三张</a>
    </body>
    

    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>表格标签</title>
    </head>
    <body>

            2.属性
            a.border属性: 设置表格的边框的宽度(只能作用于table)
            b.bordercolor:设置边框颜色 (只能作用于table)
            c.background:设置背景图片
            d.bgcolor:设置背景颜色(可以作用于table\tr\td)
            e.cellspacing:设置单元格与单元格之间的间距(默认是1)
            f.cellpadding:设置内容和单元格之间的间距
            g.width: 一般作用于某一个单元格,影响的是这个单元格对应的那一列
            h.height: 一般作用于行,影响的是一行的高度
            i.align:设置对齐方式(可以作用于table\tr\td)
            作用于table,让整个表格在浏览器中居中
            作用于tr/td,让内容在单元格中居中
        -->
        <table border="1" bordercolor="red" bgcolor="beige" cellspacing="0" align="center">
            <!--<tr><th>成绩表</th></tr>-->
            
            <!--第一行-->
            <tr bgcolor='coral' height="50" align="center">
                <!--第一行的第一个单元格-->
                <td width="100">姓名</td>
                <td width="60">成绩</td>
                <td width="140">是否留级</td>
            </tr>
            
            <!--第二行-->
            <tr height="140">
                <td bgcolor="cornflowerblue" align="center">张三</td>
                <!--第二行的第二个单元格-->
                <td>90</td>
                <td>否</td>
            </tr>
            
            <!--第三行-->
            <tr height="80">
                <td>李四</td>
                <td>80</td>
                <!--第三行的第三个单元格-->
                <td>否</td>
            </tr>
        </table>
        
        <!--table>tr*3>td*4: 创建一个3行X4列的表格-->
        
        
    </body>
    

    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>细线表格</title>
    </head>
    <body>
    <p>XXX信息表</p>
    <table cellspacing="1" bgcolor="purple">
    <tr bgcolor="white" height="80" align="center">
    <td width="120">姓名</td>
    <td width="250">毕业院校</td>
    </tr>
    <tr bgcolor="white" height="100">
    <td>余婷</td>
    <td>

    <img src="img/luffy4.jpg"/>
    <a href="http://www.tsinghua.edu.cn/publish/thu2018/index.html">清华大学</a>
    </td>
    </tr>
    <tr bgcolor="white" height="100">
    <td></td>
    <td></td>
    </tr>
    <tr bgcolor="white" height="100">
    <td></td>
    <td></td>
    </tr>
    <tr bgcolor="white" height="100">
    <td></td>
    <td></td>
    </tr>
    </table>

    </body>
    

    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>

    </head>
    <body>

            过程:先确定表格中最多多少行,然后再数每一行有多少个单元格。
                 再确定每个单元格是否有合并现象,如果单元格有行的合并就设置单元格的rowspan属性,
                 如果有列的合并就设置单元格的colspan的值。
        -->
        
        <table bgcolor="black" cellspacing="1" width="600" height="500">
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        
    </body>
    

    </html>

    客户端来卡号的看法熬枯受淡放开手
    fasjfkashkjsfakhf
    sakdfhaj
    ks 阿斯蒂芬哈 萨克交话费

    百度一下

    常用标签

    1.HTML<head>元素

    <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
    可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

    标签 描述
    <title> 定义了文档的标题
    <base> 定义了页面链接标签的默认链接地址
    <link> 定义了一个文档和外部资源之间的关系
    <meta> 定义了HTML文档中的元数据
    <script> 定义了客户端的脚本文件
    <style> 定义了HTML文档的样式文件

    < meta>元素

    meta标签主要是通过属性为网页提供元数据主要包括:name属性和http-equiv属性

    <mate name=“参数”, content=“具体描述”>  
    

    name属性参数:

    1.keywords(关键字)
    说明:用于告诉搜索引擎,你网页的关键字。举例:

    <meta name="keywords" content="python,技术,理科生,前端">   
    

    2.description(网站内容的描述)
    说明:用于告诉搜索引擎,你网站的主要内容。举例:

    <meta name="description" content="关于python的技术博客">  
    

    3.author(作者)
    说明:用于标注网页作者 举例:

    <meta name="author" content="726550822@qq.com">  
    

    4.viewport(移动端的窗口)
    说明:这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。

    <meta name="viewport" content="width=device-width, initial-scale=1">  
    

    5.robots(定义搜索引擎爬虫的索引方式)
    说明:robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
    举例:

    <meta name="robots" content="none">
    

    具体参数如下:
    a.none : 搜索引擎将忽略此网页,等价于noindex,nofollow。
    b.noindex : 搜索引擎不索引此网页。
    c.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
    d.all : 搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。
    e.index : 搜索引擎索引此网页。
    f.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

    6.renderer(双核浏览器渲染方式)
    说明:renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例:

    <meta name="renderer" content="webkit"> //默认webkit内核
    <meta name="renderer" content="ie-comp"> //默认IE兼容模式
    <meta name="renderer" content="ie-stand"> //默认IE标准模式  
    

    http-equiv属性

    
    

    百度一下

    a b
    abc bca
    a b
    abc bca

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>学习HTML</title>
    </head>

    <!--
        body标签中的内容是在网页中可见的部分
        html学习目标就是掌握body中的常用标签
    -->
    <body>
        今天开始学习web前端
    </body>
    

    </html>

    相关文章

      网友评论

          本文标题:二阶段day1

          本文链接:https://www.haomeiwen.com/subject/riogtqtx.html