HTML基础

Der_Der996

已于 2022-10-24 20:41:09 修改

阅读量88

点赞数

分类专栏： Java 文章标签： html 前端 java 1024程序员节

于 2022-10-24 20:38:40 首次发布

本文链接：https://blog.csdn.net/m0_62906329/article/details/127500839

版权

Java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构，包括标题、段落、图像、链接、表格、样式标签等核心元素的使用方法，以及如何创建网页标题、插入图片、设置超链接、创建表格、使用表单和多媒体元素等。此外，还提到了页面结构分析和内联框架的概念，为初学者提供了全面的HTML入门指导。

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

一、HTML基本结构

HTML：Hyper Text Markup Language

标签成对出现，单个的叫自闭合标签

二、网页基本信息

DOCTYPE:告诉浏览器要使用什么规范
meta：描述性标签，用来描述网站信息
title：网页标题
body标签代表网页主体

三、网页基本标签

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>

段落标签

<p>在心碎中认清遗憾</p>
<p>生命漫长也短暂</p>

水平线标签
```
<hr/>
```

换行标签

也许很远或是昨天<br/>
在这里或在对岸<br/>

粗体与斜体

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>I Love You</strong>
斜体：<em>I Love You</em>

特殊符号

<!--特殊符号-->
空格：空&nbsp;&nbsp;&nbsp;&nbsp;格

<!--大于号-->
&gt;
<!--小于号-->
&lt;
<!--版权符号-->
&copy;版权所有&nbsp;&nbsp;mmm

四、图像标签

img标签：

src:图片地址
    相对地址(推荐使用）、绝对地址
    ../  --上一级目录
<img src="../resources/image/1.jpg"alt="头像"title="悬停文字"width="940" height="940">

五、链接标签

a标签：

跳转链接

herf:必填，表示跳转页面
target:表示窗口在哪里打开
    _blank:在新标签打开
    _self:在当前页面打开
<a href="https://www.yuketang.cn/v2/web/index"target="_blank">点击我跳转到雨课堂</a>

锚链接：跳转到页面顶部或底部

<!--使用name作为标记-->
<a name="top">顶部</a>

```
<a href="#top">回到顶部</a>
```

功能性链接

邮件链接

<a href="mailto:linyangde@mail.tust.edu.cn">联系我</a>

QQ链接

六、行内元素和块元素

块元素：
- 无论内容多少，该元素独占一行
- （p、h1—h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a、strong、em…）

七、列表

有序列表

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
    <li>go</li>
</ol>

无序列表

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
    <li>go</li>
</ul>

自定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>课程</dt>
    <dd>Python</dd>
    <dd>Java</dd>
    <dd>C++</dd>
</dl>

八、表格

<!--
行：tr
列：td
边框：border
跨列：colspan
跨行：rowspan
-->
<table border="1px">
    <tr>
        <td colspan="4">学生成绩</td>

    </tr>

    <tr>
        <td rowspan="2">小明</td>
        <td>大物</td>
        <td>100</td>
    </tr>

    <tr>
        <td>概率</td>
        <td>99</td>
    </tr>

    <tr>
        <td rowspan="2">小红</td>
        <td>大物</td>
        <td>99</td>
    </tr>

    <tr>
        <td>概率</td>
        <td>100</td>
    </tr>
</table>

九、视频和音频

<!--
src:资源路径
controls：控制条
autoplay:自动播放
-->

<video src="../resources/video/视频.mp4" controls autoplay></video>

<audio src="../resources/audio/音频.mp3" controls autoplay></audio>

十、页面结构分析

元素名	描述
header(重点)	标题头部内容
footer(重点)	标记脚部区域内容
section	Web页面中一块独立区域
ariticle	独立的文章内容
aside	相关内容或应用
nav(重点)	导航类辅助内容

十一、iframe内联框架

<!--
iframe内联框架
src:地址
w-h:宽度高度
-->
<iframe src=""name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://www.cnblogs.com/linyangde/"target="hello">点击跳转</a>

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>

十二、表单

1.语法

标签：form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get (两种提交方式)
- get方式提交：可以在url中看到密码，不安全，但是高效
- post方式提交：看不到密码，可以传输大文件
文本输入框：< input type=“text”>
密码框：< input type=“password”>

<h1>注册</h1>
<!--
表单：form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get (两种提交方式)
        get方式提交：可以在url中看到密码，不安全，但是高效
        post方式提交：看不到密码，可以传输大文件
文本输入框：<input type="text">
密码框：<input type="password">
-->
<form action="1.我的第一个网页.html"method="post">
    <p>用户名：<input type="text"name="username"></p>
    <p>密&nbsp;&nbsp;&nbsp;码：<input type="password"name="password"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

2.元素格式

单选框

单选框标签：input type=“radio”
value：单选框的值
name:表示组
默认选中：checked

<p>性别：
<input type="radio"value="boy"name="sex"/>男
<input type="radio"value="girl"name="sex"/>女
    <!--name属性相同时认为两个选择框属于同一个组，此时单选框只能选其中一个-->
</p>

属性	说明
type	指定元素的类型，默认为text，还有password、checkbox等其他类型
name	指定表单元素的名称
value	元素的初始值，type为radio时必须指定一个值
size	表单元素初始宽度
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

多选框

多选框标签：input type=“checkbox”
默认选中：checked

<p>技能
    <input type="checkbox"value="Java"name="hobby">Java
    <input type="checkbox"value="Python"name="hobby">Python
    <input type="checkbox"value="C++"name="hobby">C++
</p>

按钮
- input type="button"普通按钮
  
  input type="image"图像按钮
  
  input type="submit"提交按钮
  
  input type="reset"重置按钮
- value：按钮上显示的字
- image:图片按钮
```
<p>按钮
    <input type="button"name="btn1"value="点击">
    <input type="image"src="../resources/image/1.jpg">
</p>
```

下拉框、列表框

<p>
    <select name="技能" id="">
        <option value="Java">Java</option>
        <option value="Python">Python</option>
        <option value="C++"selected>C++</option>
        <option value="C语言">C语言</option>
    </select>
</p>

文本域

<P>反馈：
    <textarea name="textarea" cols="30" rows="10">请输入内容:</textarea>
</P>

文件域

input type=“file”
name=“files”

<p>
    <input type="file"name="files">
    <input type="button"value="上传"name="upload">
</p>

特殊功能块

<!--邮件域-->
<p>邮箱：
    <input type="email"name="email">
</p>
<!--URL-->
<p>URL：
    <input type="url"name="url">
</p>
<!--数字-->
<p>数字：
    <input type="number"name="num"max="10000"min="0"step="2">
</p>

<!--滑块-->
<p>音量：
    <input type="range"name="voice" min="0"max="100"step="2">
</p>

<!--搜索框-->
<p>搜索：
    <input type="search">
</p>

3.应用

只读：readonly
禁用：disabled
隐藏：hidden

增强鼠标可用性：点击属性名跳转到对应输入框

<p>
    <label for="mark">请点击</label>
    <input type="text"id="mark" >
</p>

4.初级验证

placeholder：提示输入内容，可用于输入框
required：非空判断，必须有值才能提交
pattern：正则表达式