• 31.前端之html


    前端

    前端主要内容

    1. html:页面架构
    2. css:页面布局
    3. javascript:页面交互
    4. jquery:js的工具包
    5. bootstrap:快速页面搭建框架

    HTML

    1. html是超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。html不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

      标记:符号 - 标签 - 没有逻辑

    2. 组成:转义字符、指令、标签

    3. 目的:完成页面架构的搭建

    第一个页面

    <!--注释:doctype 必须出现在页面的最上方,规定该文档采用的html版本类型 -->
    <!doctype html>
    <!--html语言不区分大小写-->
    
    <!--页面标签:包含所有页面内容,只有head与body两个子标签-->
    <html>
        <!--头标签:样式、脚本、后勤操作:页面编码、页面标签标题图标-->
        <head>
            <title>第一个页面</title>
            <meta charset="utf-8">
            <style></style>
            <script></script>
        </head>
        <!--体标签:页面显示内容存放区域、样式、脚本-->
        <body>
            你好,html &nbsp;&nbsp;&nbsp;&nbsp; 这是我的第一个页面
            <style></style>
            <script></script>
        </body>
    </html>
    

    指令

    被<>包裹,以!开头,包括:

    *		注释:<!-- --> 
    *		文档类型:<!doctype>
    

    转义字符

    被 & ; 包裹,内容为特殊的字母或数字组成

    <: &lt;
    >: &gt;
    空格:&nbsp;
    版权:&copy;
    

    标签

    被<>包裹,以字母开头,可以包含数字和减号-

    系统标签:h1~h6 p span div i b a img hr br table form input
    自定义标签:满足合法命名的所有标签
    注释:html语言中,系统建议只使用系统标签,不建议使用自定义标签
    

    基础标签

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>标签</title>
    </head>
    <body>
        <!-- 1、标题:加粗 -->
        <!--重点:h1标签的语义:是该页面的主标题-->
        <h1 title="这是标题">一级标题</h1>
        <h2>二级标题</h2>
        <h6>六级标题</h6>
        正文文本 <br>
        正文文本
    
        <!--2、段落: 自带换行,有段落间距-->
        <p>这是一个段落这是一个段落这是一个段落这是一个段落</p>
        <p>这是一个段落这是一个段落这是一个段落这是一个段落</p>
    
        <!--3、换行标签-->
        正文文本 <br>
        正文文本 <br>
    
        <!--自带换行的文本标签:h1~h6 p -->
        <!--4、文本类型标签:不自带换行的文本标签 - span i b -->
        <span>span</span>
        <span>span</span>
        <b>加粗标签</b>
        <b>加粗标签</b>
        <strong>以加粗作为强调的强调标签</strong>
        <strong>以加粗作为强调的强调标签</strong>
        <i>斜体标签</i>
        <i>斜体标签</i>
        <em>以斜体作为强调的强调标签</em>
        <em>以斜体作为强调的强调标签</em>
        <br>
        <span>一般用来嵌套其它文本类标签 上<sup>角标</sup> 下<sub>角标</sub> </span>
    
        <!--5、超链接标签-->
        <a href="https://www.baidu.com" target="_blank">前往百度</a>
        <br>
    
        <!--6、图片标签-->
        <!--title:鼠标悬浮的文本提示-->
        <!--alt:img标签资源加载失败-->
        <img title="这是二哈" alt="二哈" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969644141,2516639069&fm=26&gp=0.jpg">
    
        <!--7、列表标签: 无序ul>li 有序ol>li -->
        <!--ul>li{第$列}*5-->
        <ul>
            <li>第1列</li>
            <li>第2列</li>
            <li>第3列</li>
            <li>第4列</li>
            <li>第5列</li>
        </ul>
    
        <!--8、表格标签 table>tr>th|td -->
        <!--tr:行 th:标题单元格 td:普通单元格 -->
        <!--border:边框-->
        <!--cellspacing:单元格的间距,最小为0,
        但是单元格之间是两条线,可以用rules="all" 处理成一条线 -->
        <!--cellpadding:单元格的内边距(文本与标签的间距)-->
        <table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
            <caption>表格标题</caption>
            <thead>
                <tr>
                    <!--th{标题}*3-->
                    <th>标题</th>
                    <th>标题</th>
                    <th>标题</th>
                </tr>
            </thead>
            <tbody>
                <!--(tr>td{单元格}*3)*2-->
                <!--rowspan:合并行-->
                <!--colspan:合并列-->
                <tr>
                    <td rowspan="2">单元格</td>
                    <td colspan="2">单元格</td>
                </tr>
                <tr>
                    <!--<td>单元格</td>-->
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>表尾表尾</td>
                    <td>表尾表尾</td>
                    <td>表尾表尾</td>
                </tr>
            </tfoot>
        </table>
    
        <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>
    </body>
    </html>
    

    表单

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>表单标签</title>
    </head>
    <body>
        <!--1、form的作用:完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
        <form action="">
            <p>
                <!--label作为input的文本解释标签,for绑定id-->
                <!--value属性是表单标签的内容,就是提交给后台的-->
                <!--name是提交给后台的key,value是值-->
                <!--placeholder是文本占位符-->
                <!--type是决定标签的类型本质(input|button)-->
                <!--multiple,checked布尔类型属性,不需要写值,multiple多选 checked默认激活-->
                <label for="username">账号:</label>
                <input id="username" type="text" value="Owen" name="usr">
            </p>
            <p>
                <label for="password">密码:</label>
                <input id="password" type="password" placeholder="请输入密码" name="pwd">
            </p>
            <p>
                <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
            </p>
            <p>
                <input type="file" name="file" multiple>
            </p>
            <p>
                男<input type="radio" value="male" name="sex" checked>
                女<input type="radio" value="female" name="sex">
            </p>
            <p>
                男<input type="checkbox" value="male" name="hobby" checked>
                女<input type="checkbox" value="female" name="hobby" checked>
                哇塞<input type="checkbox" value="other" name="hobby">
            </p>
            <p>
                <button type="button">普通按钮</button>
                <button type="reset">重置按钮</button>
                <button type="submit">提交按钮</button>
            </p>
            <p>
                <textarea cols="30" rows="10"></textarea>
            </p>
            <p>
                <input type="button" value="按钮" />
                <input type="reset" value="重置" />
                <input type="submit" value="登录" />
            </p>
        </form>
    </body>
    </html>
    

    标签的分类

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>标签的分类</title>
    </head>
    <body>
        <h1>标签的分类</h1>
        <hr>
        <!-- 1、是否自带换行 -->
        <!--带换行:h1 p div table form tr ul li -->
        <!--不带换行:span i b a img input button label textarea-->
    
        <!-- 2、单双标签 -->
        <!--单标签(主功能):br hr input img link -->
        <!--双标签(主内容):html head body h1 p span div a label button -->
        <!-- / 代表标签的结尾,但是单标签可以省略 -->
        <div></div>
        <hr />
    
        <!--3、简单和组合标签-->
        <!--组合:ul>li table>tr>td|th form>input -->
    </body>
    </html>
    
  • 相关阅读:
    MogoDb的使用及配置
    HttpClient中转上传文件
    springboot +Thymeleaf+UEditor整合记录
    Linux 下安装mysql
    Java开发微信公众号(五)---微信开发中如何获取access_token以及缓存access_token
    Java开发微信公众号(四)---微信服务器post消息体的接收及消息的处理
    Java开发微信公众号(三)---微信服务器请求消息,响应消息,事件消息以及工具处理类的封装
    Java开发微信公众号(二)---开启开发者模式,接入微信公众平台开发
    Java开发微信公众号(一)---初识微信公众号以及环境搭建
    mybatis sql转义符号
  • 原文地址:https://www.cnblogs.com/yellowcloud/p/11305339.html
Copyright © 2020-2023  润新知