HTML基础

AQAQian_

已于 2022-02-12 23:24:37 修改

阅读量608

点赞数 4

分类专栏： JavaWeb

于 2022-02-05 23:58:02 首次发布

本文链接：https://blog.csdn.net/AQAQian_/article/details/122781816

版权

HTML CSS 标签结构网页布局基础教程

关键词由CSDN通过智能技术生成

JavaWeb 专栏收录该内容

5 篇文章 19 订阅

订阅专栏

一，HTML概述

HTML：Hyper（超）Text（文本） Markup（标记） Lannguage（语言）

由此可知HTML代码是由“标签”构成的

关于标签的整体概述：

●大部分标签都是成对出现的，<body>为开始标签，</body>为结束标签

●少数标签只有开始标签成为“单标签”，如<meta>

●开始标签和结束标签之间写的是标签的内容

●开始标签中可能会带有属性，如id属性，相当于给这个标签设置了一个唯一的标识符

先展示一下一个简单的HTML写法：

<html>
<head>
<title>你好世界</title>
</head>
<body>
<h1>我去春游</H1>
<p>我玩的<em>很开心</em></p>
<p>明天接着去！</p>
</body>
</html>

它的网页效果是这样的：

二，HTML文件基本结构

● html 标签是整个 html 文件的根标签(最顶层标签)

● head 标签中写页面的属性.

● body 标签中写的是页面上显示的内容

● title 标签中写的是页面的标题.

三，HTML常见标签

1，输出内容的标签

1）标题标签

有六个, 从 h1 - h6. 数字越大, 则字体越小

2）段落标签

        <p>段落内容</p>

注意：html 内容首尾处的换行, 空格均无效，在 html 中文字之间输入的多个空格只相当于一个空格. html 中直接输入换行不会真的换行, 而是相当于一个空格。

<p>我去春游
    我玩的很开心
    明天接着去</p>

效果如下：

3）换行标签

<p>我去春游<br>
   我玩的很开心<br>
   明天接着去</p>

效果如下：

注意：br 是一个单标签(不需要结束标签)

4）注释标签

注意：在IDEA中可以用ctrl + / 快捷键快速进行注释/取消注释.

2，格式化标签

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签

下划线: ins 标签和 u 标签

3，图片标签

<img src="……">     标签必须带有 src 属性. 表示图片的路径
alt="…"帮助视觉有障碍的用户阅读出图片内容
width="指定图片宽度：直接跟数字，不加单位，默认单位是像素"
height="指定图片高度:"
注意：只指定宽度时高度可以按照图片比例自适应
关于路径：
相对路径：以 html 所在位置为基准, 找到图片的位置. 
        同级路径: 直接写文件名即可 (或者 ./) 
        下一级路径: image/1.jpg 
        上一级路径: ../image/1.jpg
绝对路径：一个完整的磁盘路径, 或者网络路径，例如 
        磁盘路径 D:\rose.jpg 
        网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

4，超链接标签（a标签）

1）href：即hyper reference(超链接)，必须具备, 表示点击后会跳转到哪个页面

如：<a href="http://www.baidu.com/">百度</a>

再如：<a href="http://www.baidu.com/"target="_blank">在新页面打开百度</a>

其中2）target:表示打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

3）#跳转

<body>
    <h1>目录</h1>
<!--    <a href="http://www.baidu.com/">百度</a>-->
<!--    <a href="http://www.baidu.com/"target="_blank">在新页面打开百度</a>-->

    <a href="#about-web">web概述</a>
    <a href="#about-html">关于HTML</a>
    <a href="#about-css">关于CSS</a>
    <a href="#about-js">关于JS</a>
    <h1>正文</h1>
        <h2 id="about-web">web概述</h2>
        <h2 id="about-html">关于HTML</h2>
        <h2 id="about-css">关于CSS</h2>
        <h2 id="about-js">关于JS</h2>
    <!--    <a href="#">表示跳到顶部-->
</body>

这个#跳转功能相当于我们平常所见的目录，点击可以跳转到当前页面中对应的内容

4）网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

<a href="https://www.baidu.com">
    <img src="anchor.jpg" width="120">
</a>

点击在网页上所显示的图片就可以跳转到href对应的网页

5）禁止 a 标签跳转：<a href="javascript:void(0);">无法跳转</a>-->

5，表格标签（table标签）

1）基本结构

● table 标签: 表示整个表格

● tr: 表示表格的一行

● td: 表示一个单元格

● th: 表示表头单元格. 会居中加粗

● thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的

他们之间的关系可以用下面的树状图来体现：

我们可以建一个简单的表格：

代码如下：

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td>id</td>
            <td>小A</td>
            <td>23</td>
            <td>165</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小B</td>
            <td>25</td>
            <td>175</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小C</td>
            <td>25</td>
            <td>177</td>
        </tr>

    </tbody>
</table>

2）合并单元格

跨行合并: rowspan="n"

跨列合并: colspan="n"

6，列表标签

1）有序列表： ol li

2）无序列表：ul li

3) 自定义列表[重要] : dl (总标签) dt (小标题) dd (围绕标题来说明)

7，排版标签

div span

div 标签, division 的缩写, 含义是分割.div 是独占一行的, 是一个大盒子.

span 标签, 含义是跨度. span 不独占一行, 是一个小盒子.

8，form标签

描述了要把数据按照什么方式, 提交到哪个页面中。在没有学习js之前我们所有的用户提交的内容必须包含在一个form（表单）之中，把用户输入并且将内容发送给服务器的这个动作表示提交动作（submit）

form表单+button： submit提交按钮

form表单可以实现资源和其他资源关联（用户点击提交按钮后，浏览器就会请求另外的资源，通过action属性中的url确定，可以是外部资源，当不写时默认时当前资源）

携带着的信息，默认情况下以url中的query-string形式出现

9，input标签

● type（必须有），type类型包括：button（按钮），checkbox（多选框），text（文本），file（文件），image（图片），password（密码），radio（单选框）等

● name和value：name即给input起个名字，尤其对于单选框，具有相同的name才能多选一，相当于key-value中的key, 而value就是用户在输入框中输入的内容

● 对应的url：路径？query-string

query-string即查询字符串，它本身是可选的，发生在form表单提交之后，是我们目前遇到的最常见的形式，格式如下：？key1=value1&key2=value2&key3=value3…

注：在一次form表单中name允许出现重复

代码示例：

<form action="https://www.baidu.com">
    <div>
        <input type="text"name="hello-world">
        <input type="text"name="bye">
        <input type="text"name="bye">
    </div>
    <div>
        <button>点击后提交</button>
    </div>
</form>

如下可见提交之后的url显示：

● checked: 默认被选中. (用于单选按钮和多选按钮)

● 单选框和多选框：只有name相同才能视为一组

● 关于提交：

        <button>什么都不写，默认就是提交</button>

        <button type="button">只是显示按钮（button），但不具备提交功能</button>

        <button type="reset">重置（reset）</button>

        <button type="submit">提交</button>