HTML学习

最新推荐文章于 2022-12-28 16:27:36 发布

LL°

最新推荐文章于 2022-12-28 16:27:36 发布

阅读量63

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_43978563/article/details/117297290

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构，包括标题、段落、链接、列表、表格等元素的使用方法，以及CSS和DOM在网页呈现和交互中的作用。同时涵盖了图像标签、超链接、表单组件的实例，适合初学者理解网页制作核心技术。

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

HTML

注意：上传的话都要有个name

Hyper Text Markup Language(超文本语言)

W3C（World Wide Web Consortium万维网联盟）标准：

结构化标准语言（HTML,XML）
表现标准语言（CSS）
行为标准（DOM,ECMAScript）

注释写法：

基本信息

<!-- head标签代表网页的头部信息-->
<!--title网页标题 -->
<!--meta描述性标签，它用来描述我们网站的一些信息 -->
<!--body标签代表网页主体 -->

网页基本标签：

标题标签h、段落标签p、换行br、水平线hr

粗体strong、斜体em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>

<h1>标题标签1</h1>
<h2>标题标签2</h2>
<p>段落符号1</p>
<p>段落符号2</p>

<br/>换行符号1
<br/>换行符号2

<hr/>
水平线标签

<strong>c粗体</strong>
<em>斜体</em>
<!--特殊符号-->
&nbsp;空格
&gt;>
&copy;版权符号
&lt;<
<hr/>
</body>
</html>

图像标签img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<img src="../resource/image/1.jpg" alt="图片"，title="悬停文字",width="200",height="200"/>
</body>
</html>

超链接标签（a标签）

a标签+tab

href必填：表示跳转到哪个页面

target：表示窗口在哪里打开（_blank 在新的页面打开，_self 在自己的页面打开（默认））

锚链接：1、需要一个标记 (使用#)

2、跳转到标记

<a name="top">顶部</a>
....
<a href="#top">点击回到顶部</a>
<a href="图像标签.html#top">点击回到顶部</a>

功能链接（有很多）：

<a href="mailto:1769612662@qq.com">点击联系我</a>

列表ol、ul、dl

<!--有序列表-->
<ol>
    <li>你好</li>
    <li>我好</li>
    <li>大家好</li>
</ol>
<!--无序列表-->
<ul>
    <li>你好</li>
    <li>我好</li>
    <li>大家好</li>
</ul>
<!--自定义列表-->
<dl>
    <dt>小标题1</dt>
    <dd>你好</dd>
    <dd>我好</dd>
    <dt>小标题1</dt>
    <dd>你好</dd>
    <dd>我好</dd>
</dl>

表格标签table

<!--
table表格 tr行
  td 列
-->
<table border="1px">
    <tr>
        <td colspan="3"> 学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">颜定灵</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">帅哥颜</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

媒体元素

视频 video
音频 audio

参数有src资源路径（必填）、controls控制条、autoplay自动播放

内联框架iframe

iframe

参数：src:引用页面地址 name：框架标识名

w-h宽度高度

表单学习

表单form

form

action:表单提交的位置，可以是网站，也可以是一个请求处理地址

method：post，get 提交方式

get:我们可以在URL中可以看到提交的信息，不安全，高效

post：比较安全，传输大文件

<form action="网页.html" method="get">
    <p>名字：<input type="text" name="username"></p>
    <p>密码： <input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

文本框text和单选框radio

都是用input标签

文本框：type为text

参数：value：默认初始值，maxlength：最长能写几个字符，size：文本框的长度

单选框：type选radio

value：单选框的值，name：表示组

<p>性别：
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
</p>

多选框checkbox和按钮button

<p>爱好（多选）：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">代码
    <input type="checkbox" value="chat" name="hobby"> 聊天
    <input type="checkbox" name="game" name="hobby">游戏
</p>
<p>
    <input type="button" name="button1" value="按下">
</p>

下拉框select（不需要input）、文本域textarea（不需要input）和文件域file

<!--下拉框
selected 指默认选项
-->
    <p>国家选项：
        <select name="选项" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="UK" selected>英国</option>
        </select>
        <!--文本域-->
    </p>
    <textarea name="textarea" cols="30" rows="10"></textarea>
    <p>

        
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="file">
        <input type="button" value="上传">
    </p>

简单验证、搜索框search和滑块range

<!--邮箱验证-->
<p>邮箱：
    <input type="email" name="email">
</p>
<!--URL验证-->
<p>网址：
    <input type="url" name="url">
</p>
<!--数字验证-->
<p>数字验证：
    <input type="number" name="number" max="100" min="0" step="2">
</p>

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

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

表单应用

隐藏域：hidden

只读：readonly

禁用：disabled

表单初级验证

提示信息：placeholder

非空判断：required

正则表达式：pattern

LL°

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

HTML注意：上传的话都要有个nameHyper Text Markup Language(超文本语言)W3C（World Wide Web Consortium万维网联盟）标准：结构化标准语言（HTML,XML）表现标准语言（CSS）行为标准（DOM,ECMAScript）注释写法：基本信息<!
复制链接

扫一扫