2022-7-9 第八小组顾宇佳学习笔记（HTML）

最新推荐文章于 2024-10-18 19:19:52 发布

haha姐

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量90

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_46536570/article/details/125756034

版权

一、HTML

概念：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>百度一下</title>
    <link>
    <style></style>
    <script></script>
</head>
<body>
    今天天气好晴朗，处处好风光!!!
</body>
</html>

html：文档的根标签
head：头，标签处。
title：适配搜索引擎。meta charset=utf-8
link：链接css的，引入css样式
style：定义css样式
script：定义js，也可以引入js

body：身体。目前来说在网页上看见的所有的东西都是body里的

基本标签

h1~h6：标题标签，字体变大，变粗，变黑，上下空一行
p：段落，上下空一行
br：换行，一个br就是一个回车

<b>加粗</b><br>
    <code>计算机代码</code><br>
    <em>强调文本</em><br>
    <i>斜体</i><br>
    <kbd>键盘输入</kbd><br>
    <pre>预格式
        哈哈
    </pre><br>
    <small>更小的字体</small><br>
    <strong>加粗</strong><br>


<abbr>缩写</abbr><br>
<address>地址</address><br>
<bdo>文字方向</bdo>
<blockquote>从另一个源引入</blockquote>
<cite>工作</cite>
log<sub>10</sub>
m<sup>2</sup>
<ins>插入文本</ins>
<del>删除文本</del>
<font size="7" color="red">我是font</font>

文本格式化标签

超级链接：a（重要）
    锚记链接：<a href="#tips">锚记链接</a>

    普通的链接：<a href="html03.html" target="_blank" title="点我">走你</a><br>

    <br>
    图片链接：<a href="http://www.baidu.com"><img src="img/lijian.jpeg"></a>

    <br>
    邮箱：<a href="mailto:123456789@qq.com">站长信箱</a>
    <br>
    <a id="tips">目标位置</a>
href：要去的地方
http地址（完整域名）:带有http或https的完整网址
默认的方式去到当前项目下某一个页面（地址）
../：返回上一级目录
./：当前目录（不需要写）
target：目标。怎么打开目标地址
_blank：在新窗口打开
_self：在当前窗口打开（默认）
_parent、_top：在父容器（顶级父容器）打开
title：标题，当鼠标悬停在标签上出现的提示文字
图片：img
src：图片的路径
<img src="img/lijian.jpeg" height="200" alt="李健在唱歌" title="李健很帅" align="center">李健北京演唱会

    <marquee loop="1">弹幕</marquee>
</body>
height、width：宽和高（尽量指定一个属性，等比例缩放）
title：
alt：图片无法正常加载的提示文字
align：对齐方式
区块/空白：
div：块。立方体，可以有宽高
    span：行。没有宽和高。尺寸是根据内容确定
 <style>
        div {
            height: 200px;
            width: 200px;
            background: red;
        }
        span {
            height: 100px;
            width: 1000px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>div</div>

    <span>span8787787987987987</span>
</body>
无序列表：
  无序列表：
    <ul type="disc">
        <li>我是无序列表</li>
        <li>我是无序列表</li>
       
    </ul>
有序列表：
    有序列表：
    <ol>
        <li>我是有序列表</li>
        <li>我是有序列表</li>
        <li>我是有序列表</li>
       
    </ol>
自定义列表：
自定义列表：
    <dl>
        <dt>项目1</dt>
        <dd>描述项目</dd>
        <dt>项目2</dt>
        <dd>描述项目</dd>
    </dl>

表格

表格：生成一个5*5的表格
    <table border="1" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>手机号</th>
                <th>专业</th>
                <th>家庭住址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>13312345678</td>
                <td>计算机科学与技术</td>
                <td rowspan="2">吉林省长春市朝阳区</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>女</td>
                <td>13545678912</td>
                <td>软件工程</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="center">
                <td colspan="6">备注：上述学生为党员积极分子</td>
            </tr>
        </tfoot>
    </table>

表单元素：提交数据
form：
action：数据的提交地址

注释：

提交和重置按钮，只能控制和他们在同一个form标签内的元素

所有的文本框的内容都是它的value属性

前后端交互的事情，
浏览器开发者工具的使用

id：每个HTML元素的唯一（不能重复）标识

表单：

<p>

<hr size="1" color="red">

转义字符&lt;和gt， 还有别的

©版权号

表单提交的数据格式：username=admin等号左边是表单元素的name属性，右边是表单元素的value属性

method：
get：提交的数据都会显示在地址栏，不安全，地址栏长度是有限制的。
post：提交的数据是不显示在地址栏，封装一个请求体，长度也没有限制了。