• HTML基础


    前言:

    HTML不是脚本语言,不能执行的。它全称叫“超文本标记语言”,需要浏览器来解析。HTML由一个又一个的标签组成(标签也被称呼为:元素)。

    HTML包含了:head,body。(有且只有一个)。其中<head>中的<metal>是元信息。

    HTML的注释是:<!-- 注释的内容 -->

    最基本的一个HTML页面:

    <!DOCTYPE html>
    <html lang="en"><!--表示网页是英语。当第一次访问,浏览器会提示“是否翻译”-->
    <!-- 中文 : zh-cn;简体中文 : zh-hans -->
    <head>
        <meta charset="UTF-8"><!-- 编码格式。斜杠在H5中,不提倡写 -->
        <meta name="author" content="quanquan616"><!-- 斜杠在H5中,不提倡写 -->
        <meta name="keywords" content="quanquan616,张一贝"><!-- 关键字,对搜索引擎友好 -->
        <meta name="description" content="150 words">
        <title>整个网页的标题</title>
    </head>
    <body>
    
    </body>
    </html>
    View Code

    在pycharm中,不要直接run。不然用的是pycharm自带的服务器,图片路径是不对的,会照成破图。

    这么打开:(在pycharm代码界面右击,然后选红框框,会打开个新窗口,你会看到你的html文件)

    一、HTML的常用标签

    (一).标题标签<h1>~<h6>

    (二).段落标签<p>

    (三).列表标签。常用于配合<div>使用

    (1).有序列表<ol><li></li></ol>

    (2).无序列表<ul><li></li></ul>

    (3).定义列表

    <dl>
        <dt>列表项</dt>
        <dd>描述</dd>
        <dd>描述</dd>
    </dl>

    (四).<div>标签。用于分化一个个的区域。网页布局就用它!

    (五).图片标签<img src="" alt="" width="" title="">

    (1).注意src中的路径写法,如果当前html文件没有与图片文件夹同级时要写"../images/1.jpg",(".."是回到上一级目录)

    (2).当图片路径错误的时候,出现了破图,alt中的内容就会显示出来。

    (3).width可以给定一个数值,可以写百分比。给定了一个数值,就会按同比例缩放。如果写百分比,图片会根据当前网页的宽度自适应。

    (六).斜体/粗体标签

    (1).斜体:<em>或<i>,推荐写前面一种。

    (2).粗体:<strong>或<b>,推荐写前面一种。

    (七).文字标签<span>

    单纯的文字标签,需要配合CSS样式才能有效果。

    (八).超链接标签<a href="" target=""></a>

    <a href="" target="">必须要有文字,不然不会出来</a>

    (1).href中可以写死链,不管怎么点都不会有反应。这么写:"javascript:void(0);",做特效时用得到。

    (2).href可以做锚点:

    <span id="to_top">这是顶部</span>
    <a href="#python">点击,到python</a><!-- 锚点通过id来锚 -->
    <p id="python">这里是python</p>
    <a href="#to_top">返回顶部</a><!-- 要与上面的id一一对应起来,不然没效果 -->

    (3).target中常用的属性:"_blank"在新的页面打开,"_self"在本页打开,覆盖本页。

    (九).块级元素和行内元素的区别(标签分为块级和行内)

    (一)~(四)是块级标签。(四)~(九)是行内标签。文字都是行内元素。

    (1).块级元素的前后会自动换行,行内元素不会。

    (2).块级元素可以包含行内和块级,行内元素包含文本或其他行内元素,但不建议包含块级。

    (3).块级元素可以给宽高度,行内元素不能。

    (4).块级元素可以给上下外边距,行内元素不能。

    二、特殊符号

    特殊符号以与"&"开头,分号";"结束。

    &gt;<!-- 大于号 -->
    &lt;<!-- 小于号 -->
    &equals;<!-- 等于号 -->
    &amp;<!-- &符号 -->
    &nbsp;<!-- 空格 -->
    &emsp;<!-- 空白位 -->
    &copy;<!-- 版权符 -->

    其中:&nbsp;只是一个空格。&emsp;一个空白位,英文两个空格,中文四个空格。

    三、表格

    现在布局全都是div+css,表格对搜索引擎不友好,一般只用于后台展示数据。

    <table border="1" style="border-collapse: collapse;">
        <caption>表格标题</caption>
        <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>quanquan616</td>
            <td>29</td>
            <td rowspan="2">男</td><!-- rowspan合并行,上下合并。下边的td要对应去掉,不然会多出来 -->
        </tr>
        <tr>
            <td>大佬</td>
            <td>88</td>
        </tr>
        <tr>
            <td>小妹妹</td>
            <td colspan="2">不要问</td><!-- colspan合并列,左右合并 -->
        </tr>
        </tbody>
    </table>
    View Code

    四、表单

    这个非常重要!前后端交互的方式之一:表单负责收集用户数据,发送给后端。没有表单把数据提交过去,后端接收不到任何东东。

    表单的应用:常应用于登录、注册、搜索、文件上传。

    看下面的案例,例1:

    <form action="" method="get" name="self_introduce" id="" enctype="multipart/form-data">
            <div>
                <ul>
                    <p style="color: #900;"><strong>自我介绍</strong></p>
                    <li>
                        <label for="username">用户名:</label>
                        <input type="text" name="username" id="username" value="张三" readonly>
                    </li>
                    <li>
                        <label for="password">密&emsp;码:</label>
                        <input type="password" name="password" id="password">
                    </li>
                    <li>&emsp;别:
                        <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>&emsp;
                        <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>&emsp;
                        <input type="radio" name="gender" value="secret" id="secret"><label for="secret">保密</label>
                    </li>
                    <li>&emsp;好:
                        <input type="checkbox" name="hobby" value="papapa" id="papapa"><label for="papapa">啪啪啪</label>&emsp;
                        <input type="checkbox" name="hobby" value="racing" id="racing"><label for="racing">看书</label>&emsp;
                        <input type="checkbox" name="hobby" value="games" id="games"><label for="games">电脑游戏</label>
                    </li>
                    <li>&emsp;址:
                        <select name="address">
                            <option value="0">--请选择--</option>
                            <option value="ningbo" selected>江苏</option>
                            <option value="beijing">北京</option>
                            <option value="qingdao">重庆</option>
                        </select>
                    </li>
                    <li>
                        <label for="introduce">个人简介:</label>
                        <textarea name="introduce" id="introduce" cols="25" rows="10" style="vertical-align: top;">i love you</textarea>
                    </li>
                    <li>
                        上传头像:
                        <input type="file">
                    </li>
                    <li>
                        <input type="submit" value="提交">&emsp;
                        <input type="reset" value="重置">
                    </li>
                </ul>
            </div>
        </form>
    View Code

    (一).action:提交的地址。没有写,默认提交到当前页面。

    (二).method:提交方式。(获取用get,提交用post)

    (1).get:默认,以明文方式的方式。地址栏后面后拼接表单中所有的值。

    (2).post:打包提交。

    (三).name必须要有,不然后端怎么判断是哪个表单提交过来的 — —!

    (四).entype:设置编码格式

    如果有文件上传,就必须写:enctype="multipart/form-data"

    (五).标签中的name属性

    每个标签,name必须指定!它是后端接收的唯一标识,是后端区分值的唯一方式,一一对应,通过name得到value。

    例外:比如单选框、复选框,它们有同一个name,那么就通过指定后面的value区分具体的数据。

    (六).一些小技巧

    (1).文本框中:value="xxx"可以指定默认的值。placeholder="xxx"可以设置提示信息,提高用户体验度,激活这些内容会消失。readonly只读,H5就这么写,不需要再"readonly="readonly""傻不拉唧的了。

    (2).单选、复选:checked选中,H5就这么写,可以默认勾上、选中。disable禁用,不能选。

    (3).下拉列表框:<option value="xxx" selected>默认就选中了这个下拉列表。

  • 相关阅读:
    填空:类型转换1
    :其他基本数据类型存储空间大小
    10:Hello, World!的大小
    09:整型与布尔型的转换
    08:打印字符
    07:打印ASCII码
    06:浮点数向零舍入
    05:填空:类型转换2
    04:填空:类型转换1
    03:其他基本数据类型存储空间大小
  • 原文地址:https://www.cnblogs.com/xuanlv-0413/p/9294893.html
Copyright © 2020-2023  润新知