<!DOCTYPE html>
<html lang="en">
<!--      文档的根标签 -->
<head>
    <!--     头，标签处 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7.9上午</title><!-- 适配搜索引擎  只能用一个 -->
    <link><!-- 链接CSS，引入CSS样式 -->
    <style></style><!-- 定义CSS样式 -->
    <script></script><!-- 定义和引入JS，，，同时拥有上面CSS的两种功能 -->
</head>
<body>
    <!-- 身体，目前来说，所有在网页上能看的东西都是body里的 -->
    我是帅逼
    <h1>我是帅逼</h1><!-- h1~h6 标题标签，字体变粗变大变黑，上下空一行 -->
    <h2>我是帅逼</h2>
    <h7>我是帅逼</h7><!-- 无效标签，会显示，但没有任何功能 -->
    <p>我是大帅比</p><!-- 段落标签 ，上下空一行 -->
    <p>我是大帅比2.0</p>
    我是大<br><!-- 换行，相当于Word打字的空格 -->
    帅比
    <b>我是大帅比3</b><!-- 加粗 --><br>
    <code>我是大帅比3</code><br>
    <!-- 计算机代码 -->
    <em>我是大帅比3</em><br>
    <!-- 强调文本，字体倾斜 -->
    <i>我是大帅比3</i><br>
    <!-- 斜体，和字体倾斜不同 -->
    <kbd>我是大帅比3</kbd><br>
    <!--  -->
    <pre>我是大帅比3</pre><br>
    <!-- 预格式 -->
    <small>我是大帅比3</small><br>
    <!-- 更小的字体 -->
    <abbr>我是大帅比3</abbr><br>
    <!-- 缩写 -->
    <samp>我是大帅比3</samp><br>
    <!-- 加粗 -->
    <address>地址</address><br>
    <bdo>文字方向</bdo><br>
    <blockquote>从另一个源引入文字</blockquote><br>
    log<sub>10</sub><!-- 下标文本 --><br>
    <cite>工作</cite><br>
    X<sup>10</sup><!-- 上标文本 --><br>
    <ins>插入文本</ins><br>
    <del>删除文本</del><br>
    普通的链接：<a href="" target="_blank" title="来点一下"></a><br>
    <!-- href 要去的地方，可以是文件下的其他文件，写相对地址。
    也可以是外部网址，但去外部网址必须是完整网址，
        错误示范：“www.baidu.com”
        正确示范：“http://www.baidu.com”
   
        target 怎么打开链接。 _blank 新打开一个网页
                            _self  在当前窗口打开，（默认，不写就是这个）
                            _parent  在父容器窗口打开
                            _top  在最顶级的父容器窗口打开
                       
        title   标题，当鼠标悬停在标签上出现的提示文字，几乎可以用在所有的标签上                
                        -->
    图片链接：<a href="http://baidu.com"><img
            src="file:///C:/Users/%E5%91%A8%E9%B9%8F/Pictures/QQ%E6%88%AA%E5%9B%BE20211013184153.png"></a><br>
    邮箱链接：<a href="2921060653@qq.com">我的邮箱</a><br>
    标记链接：<a href="tips">描记链接</a><br>
    <a id="tips">目标位置</a><br>
    <img src="file:///C:/Users/%E5%91%A8%E9%B9%8F/Pictures/QQ%E6%88%AA%E5%9B%BE20211013184153.png" height="200"
        alt="早柚睡着了"><br>
    <!-- src 链接，相对和绝对，
            height 和 width尽量只用一个 ，
            alt 图片加载不出来的时候提示文字
            align：对齐方式（不推荐）-->
    <marquee>弹幕</marquee><br>
<div>空白</div>
<span>空白</span>
<!-- 区块：
                    div 块，立方体，可以有宽高，
                    span 行，没有宽高。尺寸是根据内容确定 -->
无序列表：
<ul type="改变列表前面的圆">
    <li>我是大帅比4</li>
    <li>我是大帅比4</li>
    <li>我是大帅比4</li>
    <li>我是大帅比4</li>
    <li>我是大帅比4</li>
    <li>我是大帅比4</li>
</ul>
<!-- ul 里面必须嵌套 li -->
有序列表：
<ol type="改变列表前面的数字">
    <li>我是大帅比5</li>
    <li>我是大帅比5</li>
    <li>我是大帅比5</li>
    <li>我是大帅比5</li>
    <li>我是大帅比5</li>
    <li>我是大帅比5</li>
</ol>
<!-- ol 里面也必须嵌套 li -->
自定义列表：
<dl>
    <dt>我是大帅比6</dt>
    <dd>描述我是大帅比6</dd>
    <dt>我是大帅比7</dt>
    <dd>描述我是大帅比7</dd>
</dl>
表格（一组标签）： table > tr > td
5*5的单元格
<table border="边框宽度" cellspacing="每个格子之间的间距" cellpadding="内边距">
    <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <!-- colspan合并放在td里合并里面的tr（横着合并）
        rowspan（竖着合并）
    这两个都只能放在td或th里面使用    -->
</table>
<!-- tr 是行
            td 是列
        先行后列
   
         输入table>tr*5>td*5(快捷生成5*5的表格)
       
        -->
        <hr size="厚度" width="宽度" color="颜色">
    <!-- 水平分割线 -->
<iframe src="http://baidu.com" height="100%"></iframe>
        啥也不是<br>
<!-- 内嵌一个网页 -->
    &lt;<p>&gt;
        <!-- 转义字符，若直接写<p>会被浏览器误解，需要加上&lt 和 &gt 这样的转义字符等等很多 -->
   
</body>
</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7.9下午</title>
</head>
<body>
   
    表单元素：提交数据
        <form action="数据的提交地址" method="提交的方式">
            <!-- 提交方式：
            get   提交的数据全部显示在地址栏，不安全，且有字数限制 ，不写默认项
            post  提交的数据隐藏，不显示在地址栏，且将数据封装在一个请求体，且没有字数限制，
            -->
            用户名：<input type="text" maxlength="12" placeholder="请输入用户名小于12位"><br>
                    <!-- text普通文本框
                        maxlength 最大字数
                        disabled 失效
                        placeholder 水印
                        value 表单字数，自己输入和对方输入都是这个熟悉
                    -->
            密码：  <input type="password"><br>
                     <!-- password隐藏输入 -->
            性别：  <input type="radio" name="gender" checked>男  
                    <!--checked 默认的意思 -->
                    <input type="radio" name="gender">女<br>
                    <!-- radio单选框 -->
            爱好：   <input type="checkbox">游泳<br>
                    <input type="checkbox">足球<br>
                    <input type="checkbox">篮球<br>
                    <!-- checked多选框 -->
            家庭住址：<select>
                            <option>1省</option>
                            <option>2省</option>
                            <option>3省</option>
                    </select>
                    <select>
                        <option>1市</option>
                        <option>2市</option>
                        <option>3市</option>
                    </select>
                    <select>
                        <option>1区</option>
                        <option>2区</option>
                        <option>3区</option>
                    </select><br>
                    <!-- select 下拉框;option,下拉选项 -->
            邮箱：<input type="email"><br>
            <!-- email  邮箱链接 -->
            生日：<input type="date"><br>
            <!-- date  日期 -->
            薪水：<input type="number" min="0" max="99999"><br>
            <!-- number  数字 -->
            文件域：<input type="file"><br>
            <!-- file  选择文件 -->
            提交：<input type="submit" value="提交按钮改名"><br>
            <!-- submit  提交 -->
            重置：<input type="reset"><br>
            <!-- reset  重置 -->
            自定义：<input type="button">
            <!--
                在按钮中，button可以代替input，也就是如下
                <button type="submit"></button>
               
             -->
        </form>
        <!--
            id 是html元素中的唯一标识（不能重复）
            name
         -->
</body>
</html>

2022年7月9日 第四组 周鹏 HTML的初认识的更多相关文章

  1. 2022年7月12，第四组，周鹏，被算法折磨的一天【哭】【哭】【哭】【puls哭】

    今天学习了JS的几种循环语法,说实话,前几天的简单让我大意了,没有闪,很成功的被搞崩了! 一杯水,一根烟,一个算法边写边骂是一天. 多少次,我满怀期待的以为它会出现想要的结果, 但现实的残酷狠狠的折磨 ...

  2. Java学习记录：2022年1月13日(其二)

    Java学习记录:2022年1月13日(其二) ​ 摘要:本篇笔记主要记录了在设计类时的一些注意事项,类加载时类中各个部分的加载顺序以及继承和多态的知识. 目录 Java学习记录:2022年1月13日 ...

  3. Java学习笔记：2022年1月11日

    Java学习笔记:2022年1月11日 ​ 摘要:这篇笔记主要讲解了一些数据在计算机中的存在方式相关的知识点,并由此延伸出了数据在计算机中的操作以及一些数据结构的知识. @ 目录 Java学习笔记:2 ...

  4. Java学习笔记：2022年1月10日

    Java学习笔记:2022年1月10日 ​ 摘要:这篇笔记主要记录了学习<Java核心技术 卷一>的第四章时的一些心得,主要阐述了对象与类这一部分的内容.需要注意的是,这一章的内容需要精心 ...

  5. Java学习笔记：2022年1月9日(其二)

    Java学习笔记:2022年1月9日(其二) 摘要:这篇笔记主要记录了1月9日学习的第四章的类的基础知识,以及访问器以及访问器于多线程的意义. 目录 Java学习笔记:2022年1月9日(其二) 1. ...

  6. Java学习笔记：2022年1月8日

    Java学习笔记:2022年1月8日 摘要:这天主要学习了HTML超文本标记语言以及CSS层叠样式表的基本知识,主要就是通过这两种技术进行基本的网页渲染. 目录 Java学习笔记:2022年1月8日 ...

  7. Java学习笔记：2022年1月2日

    Java学习笔记:2022年1月2日 摘要:为何学习Java及Java的基础语法知识,记事本的显示原理,Java中的重要知识点 目录 Java学习笔记:2022年1月2日 1.正式开始学习Java! ...

  8. 2022年5月11日，NBMiner发布了41.3版本，在内核中加入了100％LHR解锁器，从此NVIDIA的显卡再无锁卡一说

           2022年5月11日,NBMiner发布NBMiner_41.3版本,主要提升了稳定性.         2022年5月8日,NBMiner发布NBMiner_41.0版本,在最新的内核 ...

  9. 关于2022年3月9日之后Typora登录不了--已解决

    p.s.今天是2022.7.27,软件版本:13.6.1 (以下所有方法,亲自尝试后整理出的) 报错信息: This beta version of typora is expired, please ...

随机推荐

  1. 快速上手Mybatis项目

    快速上手Mybatis项目 思路流程:搭建环境-->导入Mybatis--->编写代码--->测试 1.搭建实验数据库 CREATE DATABASE `mybatis`; USE ...

  2. JetBrains Fleet初体验，如何运行一个java项目

    序言 各位好啊,我是会编程的蜗牛,JetBrains 日前宣布其打造的下一代 IDE Fleet 正式推出公共预览版,现已开放下载.作为java开发者,对于JetBrains开发的全家桶可以说是印象深 ...

  3. 后端框架学习-----mybatis（4）

    文章目录 4.解决属性名和字段名不一致的问题 4.解决属性名和字段名不一致的问题 1.问题.数据库字段名和属性名不一致,导致查出的数据部分为空 2.resultMap(用于解决数据库表中的字段和属性) ...

  4. 2、第二种传输数据的形式：使用ajax传输数据，将前台的数据传输到后端

    第一种使用form表单中的action形式传输数据:https://blog.csdn.net/weixin_43304253/article/details/120335282 前端页面 <% ...

  5. Pycharm和IDEA利用Git操作Github仓库

    1. Git Bash 选择一个本地代码仓库文件夹:D:/Github_Code/新建文件夹,然后在此目录打开git bash 依次进行: git init //首次需执行,之后可不用 git add ...

  6. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(30)-Fiddler如何抓取Android7.0以上的Https包-番外篇

    1.简介 通过宏哥前边几篇文章的讲解和介绍想必大家都知道android7.0以上,有android的机制不在信任用户证书,导致https协议无法抓包.除非把证书装在系统信任的证书里,此时手机需要roo ...

  7. docker容器化业务

    1.环境准备: 设备 IP地址 作用 系统版本 mysql-master 192.168.100.213 Nginx-Web服务器 Ubuntu2004 mysql-slave 192.168.100 ...

  8. .NET 零开销抽象指南

    背景 2008 年前后的 Midori 项目试图构建一个以 .NET 为用户态基础的操作系统,在这个项目中有很多让 CLR 以及 C# 的类型系统向着适合系统编程的方向改进的探索,虽然项目最终没有面世 ...

  9. CSS布局秘籍(1)-任督二脉BFC/IFC

    01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子 ...

  10. 记录因Sharding Jdbc批量操作引发的一次fullGC

    周五晚上告警群突然收到了一条告警消息,点开一看,应用 fullGC 了. 于是赶紧联系运维下载堆内存快照,进行分析. 内存分析 使用 MemoryAnalyzer 打开堆文件 mat 下载地址:htt ...