web基础【html】

1212ｃ

已于 2023-04-09 10:26:30 修改

阅读量54

点赞数

分类专栏： Java web 文章标签：前端 html javascript

于 2023-03-04 18:37:55 首次发布

本文链接：https://blog.csdn.net/weixin_44431128/article/details/121785728

版权

Java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了网页开发的基础，包括HTML用于构建网页结构，CSS描述样式，JavaScript处理网页动态行为和用户交互。提到了各种基础标签的使用，如标题、段落、图片、超链接、表格、列表和表单元素，以及一些基本属性的应用。

摘要由CSDN通过智能技术生成

HTML：描述网页的骨架【静态】
CSS：描述了网页的样式【静态】
JAVASCRIPT：描述网页的行为（如何与用户交互）【动态】

HTML

html是通过标签组织的。形如<html> </html> 用尖括号组织，成对出现的就是标签（tag），又称元素（element）
一个标签通常是成对出现的
<html> 开始标签
</html> 结束标签
标签之间是标签的内容
标签是可以嵌套的。一个标签的内容可以是其他标签。这些标签构成了一个树形结构
可以在开始标签中，给标签赋予属性（attribute）。属性相当于是键值对，可以有一个或多个。

输入! ,在按下TAB键，就能生成一个基本的页面，这个功能叫做emmet快捷键。

<!DOCTYPE html>   <!--language的缩写 -->
<html lang="en">    <!--English 描述网页中语言为英文 -->
<head>
<!--meta 是单标签，没有结束标签-->
    <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>Document</title>     <!--网页标题 -->
</head>
<body>
    hello
</body>
</html>

在这里插入图片描述
每个标题标签都是独占一行的，是否独占一行和代码的编写没有关系
在HTML中，标签是否换行和代码的编写无关，和标签自身有关，有的标签独占一行，有的标签不独占。
HTML中源代码中的换行会被忽略，
空格：多个空格会被忽略或忽略成一个。

段落标签

<p>标签

<p>  </p>

Lorem + TAB 自动生成一段随机文本，用于帮助我们调试显示效果

换行标签

<br> 单标签，换行

    <strong>变粗</strong>
    <b>变粗</b>
    <em>倾斜</em>
    <i>倾斜</i>

    <del>删除线</del>
    <s>删除线</s>

    <ins>下划线</ins>
    <u>下划线</u>

在这里插入图片描述

图片标签img

img的核心属性src，src描述了该图片的路径
路径可以是一个本地的绝对路径，也可以是相对路径，还可以是网络路径。

    <img src="./11.png">
    <img src="11.png" alt="这是一张风景照">
    <img src="E:\java\java-learning\4.EEcode\html\11.png">
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Mkbsjfl7dnRRR8GeELHYIgHaEg?w=289&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">

alt属性：网速比较慢的时候，图挂了，就会显示个字
title属性：鼠标悬停在图片上时，会给出提示
width / height ：描述图的尺寸，宽度和高度可以同时设置，也可以只设置一个，如果只设置一个，另一个会等比例缩放。单位px 像素

超链接标签 a

    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.sogou.com">搜狗</a>
    <a href="http://www.sogou.com" target="_blank">搜狗</a>

target="_blank" ：新建一个页面，不会替换原有标签

表格标签

table：整个表格
tr：一行
td：一个单元格
th：表头中的一个单元格

<table width="500px" height="300px" border="1px" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>

        <tr>
            <td>张亦可</td>
            <td>10086</td>
        </tr>
        <tr>
            <td>张士大</td>
            <td>10342</td>
        </tr>
        <tr>
            <td>张覆盖</td>
            <td>19991/td>
        </tr>
    </table>

一句css，让td里面的元素全都水平居中

    <style>
        td {
            text-align: center;
        }
    </style>

在这里插入图片描述

列表标签

列表项 li
有序列表 ol
ordered list
无须列表 ul
unordered list

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

在这里插入图片描述

输入标签：

form

使用form进行前后端交互，把页面上用户进行的操作/输入提交到服务器上。
form表单 + button:submit 提交按钮

input

    <input type="text">
    <input type = "password">
    <input type="radio" name="gender" checked="checked"> 男
    <input type="radio" name="gender"> 女
    <br>
    多选
    <input type="checkbox" name="" id=""> 吃饭
    <input type="checkbox" name="" id=""> 睡觉
    <input type="checkbox" name="" id=""> 玩耍
    <input type="checkbox" name="" id=""> 上课

    <input type="button" value="this is button" onclick="alert('hello')">
    <input type="submit" value="">
    <input type="file" name="" id="">
    <textarea name="" id="" cols="30" rows="10"></textarea>