2021-03-21 html巩固笔记（当天巩固）

最新推荐文章于 2024-09-18 10:06:00 发布

奋进的叻叻

最新推荐文章于 2024-09-18 10:06:00 发布

阅读量234

点赞数 1

分类专栏：前端文章标签： html 列表前端

本文链接：https://blog.csdn.net/weixin_45648850/article/details/115059178

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

文章目录

HTML
- 完结！

介绍W3C

World Wide Web Consortium(万维网联盟)
Web技术领域最权威和最具影响力的国际中立性技术标准机
http://www.w3.org/
http://www.chinaw3.org/

W3C标准包括

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

HTML描述

Hyper Text Markup Language (超文本标记语言)
最新版本：HTML5
跨平台，几乎所有的知名浏览器都支持使用HTML5

标签学习

HTML的基本标签

<!--DOCTYPE ：告诉浏览器所使用的规范-->
<!DOCTYPE html>
<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!--meta标签：描述性标签，用于网站描述-->
    <meta charset="UTF-8">
    <!--title标签：网页标题-->
    <title>Title</title>
</head>
<!--body标签：代表网页的主体，实现网页的代码就写在body里面-->
<body>
<!--基本标签-->
<!--1.标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--2.段落标签-->
<P>你好</P>
<P>你好呀</P>
<P>我是你爹</P>
<P>什么？</P>
<P>你爹是我啊</P>

<!--3.水平线标签-->
<hr/>

<!--4.换行标签-->
你好<br/>
你好呀<br/>
我是你爹<br/>
什么？<br/>
你爹是我啊<br/>

<!--5.字体样式标签-->
粗体：<strong>java</strong><br/>
斜体：<em>java</em>

<!--6.常用特殊符号标签-->
空&nbsp;格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于：&gt;<br/>
小于：&lt;<br/>
版权：&copy;<br/>
    
</body>
</html>
<!--此处自行复制查看效果-->

图像标签

<body>
<!--图片标签-->
<!--
src ：图片的相对地址或者绝对地址
alt ：图片名（自定义）
title ：鼠标悬停显示的文字
width ：图片的宽度
height ：图片的长度
-->
<img src="" alt="" title="" width="" height="">
</body>

超链接标签

<body>
<!--超链接标签-->
<!--href :跳转地址 \ target :表示窗口在哪里打开-->
<a href="" target="">（可以输入文字，也可以嵌套图片等等）</a>
    
<!--锚链接-->
<!--
1.需要一个锚标记（name）
2.跳转到标记：格式（# + name）
-->
<a name="name">锚标记</a>
<a href="#name">跳转到锚标记位置</a>

<!--还有一些功能性链接-->

</body>

列表标签

<body>
<!--列表-->
<!--1.有序列表-->
<ol>
    <li>java</li>
    <li>java</li>
    <li>java</li>
    <li>java</li>
</ol>

<!--2.无序列表-->
<ul>
    <li>java</li>
    <li>java</li>
    <li>java</li>
    <li>java</li>
</ul>

<!--3.自定义列表-->
<!--dl :标签 \ dt :列表名称 \ dd :列表内容-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>php</dd>
    <dd>c</dd>
    <dd>c++</dd>
</dl>
</body>

表格标签

<body>
<!--表格-->
<!--border :边框宽度 \ style :样式-->
<table border="1px" style="text-align: center">
    
    <!--tr :行 \ td :列-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <!--rowspan :跨行-->
        <td rowspan="2">跨行</td>
    </tr>
    <tr>
    <!--colspan :跨列-->
        <td colspan="3">跨列</td>
    </tr>
</table>
</body>

视频和音频标签

<body>
<!--视频标签-->
<!--src :资源路径 \ controls :控制条 \ autoplay :自动播放-->
<video src="" controls autoplay>视频</video>

<!--音频标签-->
<!--src :资源路径 \ controls :控制条 \ autoplay :自动播放-->
<audio src="" controls autoplay></audio>
</body>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于整个页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面中的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

iframe内联框架

一个页面里嵌套另一个页面

<body>
<!--内联框架-->
<iframe src="" name="name" width="" height=""></iframe>
<!--可联合超链接标签使用-->
<a href="" target="name">跳转</a>
</body>

表单语法

<body>
<!--表单标签-->
<!--
action :表单提交的位置，可以是网站，也可以是一个请求处理的地址
method :post 和 get 两种提交方式
        get :可以在url中看到提交的内容，不安全，但是高效
        post :比较安全，且可以传输大型文件
-->
<form action="Html03.html" method="get">
    <!--input :搜集用户信息   根据type的不同类型，提供不同的样式-->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <!--按钮-->
    <p>
        <!--submit :提交按钮 \ reset :重置按钮-->
        <input type="submit">
        <input type="reset">
    </p>
    <!--自定义按钮-->
    <p>
        <input type="button" name="btn1" value="submit">
        <input type="image" src="" value="" name="btn2">
    </p>
    <!--单选-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="gitl" name="sex">女
    </p>
    <!--多选框标-->
    <p>
        爱好：
        <input type="checkbox" value="girl" name="hobby">女孩
        <input type="checkbox" value="boy" name="hobby">男孩
        <input type="checkbox" value="gay" name="hobby" checked>gay
    </p>
    <!--文件域-->
    <p>
        上传文件：
        <input type="file" name="file">
    </p>
    <!--邮箱验证-->
    <p>
        邮箱验证:
        <input type="email" name="emails">
    </p>
    <!--URL-->
    <p>
        URL:
        <input type="url" name="url">
    </p>
    <!--数字-->
    <p>
        数字:
        <input type="number" name="number" max="100" min="0" step="1">
    </p>
    <!--滑块-->
    <p>
        滑块:
        <input type="range" name="range" max="100" min="0" step="10">
    </p>
    <!--搜索框-->
    <p>
        搜索：
        <input type="search" name="search">
    </p>
    <!--下拉框-->
    <p>
        下拉框：
        <select name="contry">
            <option value="1">中国</option>
            <option value="2">日本</option>
            <option value="3" selected>瑞士</option>
            <option value="4">印度</option>
        </select>
    </p>
    <!--文本域-->
    <p>
        <textarea name="textarea" cols="50" rows="20">文本域</textarea>
    </p>
</form>
</body>

表单元素

属性	说明
type	指定元素的类型，text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素名称
value	元素的初始值，type为radio是必须指定一个值
size	指定表单元素的初始宽度，当tpye为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	tpye为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单的应用

隐藏域 : hidden
只读 : readonly
禁用 : disabled

<!--增强鼠标可用性-->
    <p>
        <label for="mark">文本</label>
        <input type="text" id="mark">
    </p>

表单初级验证

提示信息 : placeholder
元素不能为空 : required
正则表达式 : pattern

此文章为“奋进的叻叻”巩固HTML的笔记，CSS可能不会进行写文章记录，因为内容较多且杂。

若有不足的地方请多多指教！

参照视频：https://www.bilibili.com/video/BV1x4411V75C?p=19

完结！

奋进的叻叻

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录