Day039--HTML

2022-11-09 09:50:46

HTML小马哥博客

HTML CSS + DIV实现整体布局

1. HTML
    超文本标记语言
　　 对换行不敏感
　　 空白折叠现象
　　 标签要严格密封
　　新建HTML文件，输入 html:5,按tab键后，自动生成的代码如下：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>
　　

　　head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>

  • <title>：指定整个网页的标题，在浏览器最上方显示。
  • <meta>：提供有关页面的基本信息
  • <link>：定义文档与外部资源的关系。
  • <style>:定义内部样式表与网页的关系

　　主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

　　


2. body中标签的分类
    - 字体标签
        h1 - h6 标题标签

在htm中都是标签,标签的作用: 体现了语义化

　　h1-h6, u,b,strong,br,hr,em,pre用法
# pycharm中新建html文件

<!--文档的声明 一个html文件就是一个文档-->

<!DOCTYPE html>

<html lang="en">

    <!--双闭合-->

    <head>

        <!--head标签中的内容不会显示到浏览器上-->

        <!--meta是单闭合标签 定义文档的编码类型，右边默认有个/,可以不写-->

        <meta charset="UTF-8">

        <!--title是双闭合标签-->

        <title>今天我们学习html</title>

    </head>

    <!--body中的内容都会显示到浏览器上-->

    <body>

    <!--普通文本-->

    吴老板

    <!-- h1 只允许页面中有一个: 为了seo和爬虫-->

    <h1>吴老板</h1>

    <h2>吴老板</h2>

    <h3>吴老板</h3>

    <h4>吴老板</h4>

    <h5>吴老板</h5>

    <h6>吴老板</h6>

    <!--行内标签: 在一行内显示,不换行-->

    <!--underline 下划线-->

    <u>娃哈哈</u>

    <!--强调-->

    <b>你好啊</b>

    <!--强调-->

    <strong>你好啊</strong>

    <!--排版标签-->

    <!--换行标签-->

    <br>

    <!--线-->

    <hr>

    <hr>

    <hr>

    <!--行内标签用法示例-->

    ok,基本上HTML标签就给大家介绍到这里，基本上呢，<strong>div+css</strong>布局，我们常用的的标签如下：

    <!--斜体标签-->

    <em>哈哈</em>

    <!--空白折叠: 换行和空格折叠成一个空格-->

    <hr>

        鹅鹅鹅

            曲项向天歌

    <!--保留格式,但是前面会有空格,固定格式-->

    <hr>

    <pre>

                鹅鹅鹅

            曲项向天歌

    </pre>

    </body>

</html>

用法示例

    标签分类:
        1. 行内标签
            span (文本级标签,里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。)
            a
            em  i
            strong  b

            特点:
                - 在一行内显示, 不换行
                - 不能设置宽高, 如果不设置宽高, 默认是内容的宽高
            - 行内块标签: img  input
                特点:
                    - 一行内显示
                    - 可以设置宽高
        2. 块级标签
            h1-h6
            div
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <span id="active" title="你好" style = "color: aqua;width: 100px;">嘿嘿和你</span>

    <!--id是文档中是唯一-->

    <div id="top" style="width: 200px;">

        <div class="top-l">

            <!--div标签是块级标签 独占一行,span是行内标签 一行内显示-->

            <span>小米商城</span>

            <span class="sep">|</span>

            <span>MIUI</span>

            <span class="sep">|</span>

            <a href="https://iot.mi.com/index.html" target="_self">loT</a>

            <a href="https://iot.mi.com/index.html" target="_blank">|</a>

        </div>

        <div class="shopCart">

            <i>图标</i>

            <!--span标签只能放行内标签 em,i span,strong,img. 不能放块级标签

                块级标签中可以放块级标签,行内标签

             -->

            <span>购物车(<span class="count">0</span>)</span>

        </div>

        <div class="login">

            <a href="#">登录</a>

            <a href="#" class="sep">|</a>

            <a href="#">注册</a>

            <a href="#">|</a>

            <a href="#">消息通知</a>

        </div>

    </div>

    <div id="header">

    </div>

    <div id="wrap">

    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <div class="box">

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

        <!--表示阻止a标签的默认跳转-->

        <a href="javascript:void(0);">跳转顶部</a>

        <a href="./01-我的第一个html代码.html">跳转第一个网页</a>

    </div>

</body>

</html>

div分区

            p: 文本级标签,记住, 只能放文字,行内标签,img,表单元素,不能放块 (p标签中不能放div,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>

p标签的错误用法示例

　　　　　　 　ul:(用得最频繁)

                unordered list  无序列表（没有序号） 它的子元素只能是li
                ·手机 电话卡 
                ·电视 盒子
                ·
                ul
                    li 块
                    li
                    li
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="wrap">

        <div class="list">

            <ul type="square">

                <li>手机 电话卡</li>

                <li>电视 盒子</li>

                <li>笔记本 平板</li>

                <li>家电 插线板</li>

                <li>出行 穿戴</li>

                <li>智能 路由器</li>

                <li>电源 配件</li>

                <li>健康 儿童</li>

                <li>耳机 音箱</li>

                <li>生活 箱包</li>

            </ul>

             <ol>

                <li>手机 电话卡</li>

                <li>电视 盒子</li>

                <li>笔记本 平板</li>

                <li>家电 插线板</li>

                <li>出行 穿戴</li>

                <li>智能 路由器</li>

                <li>电源 配件</li>

                <li>健康 儿童</li>

                <li>耳机 音箱</li>

                <li>生活 箱包</li>

            </ol>

        </div>

    </div>

</body>

</html>

列表应用示例

            ol:
                ordered list: 有序列表 里面也放li
                1.
                2.
                3.
                4.

            dl: 自定义列表
                dt定义的标题
                dd 定义描述标题的内容
            table
                tr
                    td

                border="1" style = "border-collapse:collapse"
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--border="1" style="border-collapse:collapse;"-->

<!--border 设置边框 collapse：边框合并 -->

<table border="1" style="border-collapse:collapse;" width="100%">

    <!--tr 表示每一行-->

    <tr height="300">

        <!--每行的内容-->

        <td>id</td>

        <td>name</td>

        <td rowspan="3">age</td>

    </tr>

    <tr>

        <td>1</td>

        <td>吴老板</td>

        <!--<td>20</td>-->

    </tr>

    <tr>

        <td>2</td>

        <td>涛歌</td>

        <!--<td>30</td>-->

    </tr>

    <tr>

        <td>3</td>

        <!--<td>小马哥</td>-->

        <td colspan="2">18</td>

    </tr>

</table>

</body>

</html>

table标签应用示例

            form
                action: 提交服务器的地址  (定义表单提交时发生的动作) 默认值,明文提交,所有的数据显示在地址栏,安全性低, 最大限制2kb
                method: 提交的方式  (get post) 发送数据不会显示在地址栏上,安全性高,上传下载都用post
　　　　　　　　　 enctype: 编码类型,允许表单将什么样的数据传给服务器
　　　　　　　　　　　　　　如果有文件需要提交给服务器, method必须为POST, enctype必须为multipart/form-data

            input: 输入框
                type: 
　　　　　　　　　　　　text
　　　　　　　　　　　　button
　　　　　　　　　　　　password
　　　　　　　　　　　　radio
　　　　　　　　　　　　submit
　　　　　　　　　　　　file
                name:
　　　　　　　　　　　　
                value
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--form: 与服务器产生交互 action:交互的网址   http://127.0.0.1:8888

    表单控件中的name属性会被封装成{} key  value属性会被封装成字典的value

    -->

    <form action="https://www.baidu.com/s" method="get">

        <!--主要放表单控件-->

        <!--文本输入框-->

        <input type="text" name = 'wd' value = '路飞学城'>

        <label for="password">密码</label>

         <input type="password" name="pwd" id="password" placeholder="请输入密码">

        <input type="submit" value="搜索">

    </form>

</body>

</html>

表单应用示例

            特点:
                - 独占一行
                - 可以设置宽高,如果不设置宽, 默认是父盒子宽度的100%  ##

请求必有响应

前端的解释器就在浏览器中

F12 或检查

elements 元素

console 输出

sources资源

network网络

General请求的响应首行 :

request URL: 请求地址

request method: 请求方式 GET获取/post提交

status code 状态码

remote address 远程地址

Response响应:

显示的页面:HTML

内容: 标签

将文本放到浏览器去渲染,不是超文本,则将文件中的文本改变字体,浏览器不会跟着显示

输入标签名按Tab键自动创建闭合标签

br*20 自动创建20个br标签

ul>li*10 自动创建ul标签及下面的10个li标签

按住alt键,鼠标点多行,可以编辑多行

颜色 各个颜色加起来等于盒子大小

蓝色: 内容

黄色:边框 border

橘黄色: 外边距  margin

绿色: 内填充,内边距  padding

form input 里面可以设置宽高 style="hight= ;"

网页:

顶部栏

头部(有LOGO)

今日内容:

    HTML+CSS+JS

    HTML+CSS 没有逻辑可言 需要记住

    HTML: 定义文档的结构 (人的骨架)

    CSS: 修饰文档的样式  (肉和衣服)

    JS: JavaScript 动作  (点击, 交互)

提示补充

　　其他标签:

　　　　超链接

　　　　1. 外部链接

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

　　　　herf : hypertext reference 超文本链接, 超链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a name="top">顶部</a>

    <span id="active" title="你好" style="color:aqua;width: 100px;">嘿嘿</span>

    <!--id在文档中是唯一的-->

    <span>hehehe</span>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

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

    <!--阻止a标签的默认跳转-->

    <a href="javascript:void(0);">跳转顶部</a>

    <!--在本页面打开-->

    <a href="./01-我的第一个html代码.html">跳转第一个网页</a>

    <a href="./01-我的第一个html代码.html" target="_self">跳转第一个网页</a>

    <!--在新标签中打开-->

    <a href="./01-我的第一个html代码.html" target="_blank">跳转第一个网页</a>

</body>

</html>

返回顶部

　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="logo">

        <!--解决a标签不能设置宽高的问题:  1.把a标签强制转成块级标签 2.再设置宽高-->

        <!--src: 图片链接的资源地址 alt:图片资源加载失败的时候显示的代替文本-->

        <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&pn=2&spn=0&di=101433843280&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1265067270%2C3260796563&os=2337861475%2C1381772050&simid=0%2C0&adpicid=0&lpn=0&ln=1945&fr=&fmq=1540956776967_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F12%2F20150412H4253_NwGvx.thumb.700_0.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dnca8cdbcl&gsm=0&rpstart=0&rpnum=0&islist=&querylist="  style="display: block; height: 100px;">

             <img src="./images/xiaohua.jpg" alt="校花" height="100">

        </a>

        <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&pn=2&spn=0&di=101433843280&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1265067270%2C3260796563&os=2337861475%2C1381772050&simid=0%2C0&adpicid=0&lpn=0&ln=1945&fr=&fmq=1540956776967_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F12%2F20150412H4253_NwGvx.thumb.700_0.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dnca8cdbcl&gsm=0&rpstart=0&rpnum=0&islist=&querylist="

        >

             <img src="./images/xiaohua.jpg" alt="校花" height="100">

        </a>

    </div>

    <div>

        <img src="./images/xiaohua.jpg" alt="">

    </div>

</body>

</html>

图片超链接

　

　　# 相当于刷新了页面,此时 #后面不加锚点也会返回到顶部,相当于刷新页面的效果

　　　　2. 锚链接

　　　　3. 邮件链接

特殊字符

  • &nbsp;：空格 （non-breaking spacing，不断打空格）
  • &lt;：小于号（less than）
  • &gt;：大于号（greater than）
  • &amp;：符号&
  • &quot;：双引号
  • &apos;：单引号
  • &copy;：版权©
  • &trade;：商标™
上一篇：可编辑的表格：jQuery+PHP实现实时编辑表格字段内容


下一篇：SharePoint 2010以其他用户身份登录的弹出代码