0
点赞
收藏
分享

微信扫一扫

html学习笔记

狗啃月亮_Rachel 2022-04-21 阅读 41
html
加载失败

HTML学习笔记

一.入门

1.HTML的基本结构

image-20220126103718101

2.注释

快捷键Ctrl+/

3.解释基本结构

​ <!—meta描述网站的信息 —>
​ <!— meta一般用来做SEO—>
​

​ <!—网站标题 —>
​ Title

​

​ ​

4.网页基本标签

…1…标题标签

<h1>一级标签<h1>
<h2>二级标签<h2>
<h3>三级标签<h3>
<h4>四级标签<h4>
<h5>五级标签<h5>
<h6>六级标签<h6>

…2…段落标签

<p>                   <p>

…3…换行标签

<br/>

…4…水平线标签

<hr/>

…5…粗体斜体

粗体：
<strong>   </strong>

斜体：
<em>   </em>

…6…特殊符号

空格：
&nbsp;
大于号：
&gt;
小于号：
&lt;
.............

5.图像标签

快捷键：img+Tab

img的学习

src：图片地址

​ 相对地址（推荐使用），绝对地址

…/ 代表上一级目录

alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

title表示悬停文字

width表示宽

height表示高

<img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270">

6.连接标签学习

…1…超链接

快捷键：a+Tab

<a href=""></a>

href：表示要跳转到的网页

><里面表示超链接的文字

快捷键：Ctrl+d（把这一行的复制到下一行）

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="我的第一个网页.html">点击我跳转到永远的我们</a>
<a href="https://lenovo.ilive.cn/?f=stee">点击跳转到浏览器</a>
</body>
</html>

展示结果

image-20220126154108425

eg2（嵌套的图像超链接）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://lenovo.ilive.cn/?f=stee">
    <img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270">
</a>
</body>
</html>

image-20220126154401672

（点击图片就直接跳转到herf里的网址中）

…2…锚链接

需要一个标记

eg：只用name做一个标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<a id="top">顶部</a>
<br/>
<a href="https://www.csdn.net/">

    <img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270">
</a>
<p><img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270"></p>
<p><img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270"></p>
<p><img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270"></p>
<p><img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270"></p>
<p><img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270"></p>
<p><img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270"></p>
<p><img src="../resources/image/我的图片.jpg" alt="我们的头像" title="永远的我们" height="271" width="270"></p>

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

</body>
</html>

(注意name弄锚链接的过程中，html5已经把name废除，用id来代替)

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<a id="top">顶部</a>
<br/>
    
    ................（此处填写一大堆内容）
    
<a href="#top">回到顶部</a>
</body>
</html>

…3…页面与页面之间的跳转

文件一中可以跳转到文件二中

文件1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>永远的我们</title>
</head>
<body>

..........

<a href="3.链接标签学习.html#down">跳转</a>
    
    
</body>
</html>

文件二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

..............

<a id="down">down</a>
    
    
</body>
</html>

…4…功能性链接

邮件链接：mailto

eg：

添加

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

7.行内元素和块元素

块元素：

无论内容多少，该元素独占一行

eg ：

行内元素：

内容撑开宽度，左右都是行内元素的可以拍排在一行

eg：…

8.列表

…1…什么是列表

列表就是信息资源的一种展示形式，它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

…2…列表的分类

无序列表

运用：导航，侧边栏。

1.无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul 标签。每个列表项始于 <li。
2.无序列表的type属性有三个值 disc：表示实心小圆点 circle：表示空心小圆点 square：表示实心小方块

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<ul>
<li></li>(其中加入需要无序列出来的内容)
<li></li>
<li></li>
<li></li>
<li></li>
    ............
</ul>
</body>
</html>

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>


<ul>
<li>C语言</li>
<li>java</li>
<li>数学</li>
<li>高数</li>
<li>英语</li>
<li>思政</li>

</ul>


</body>
</html>

image-20220126173451999

有序列表

有序列表：英文叫做 ordered list，所以标签也是取这个词组的首字母 ol。ol标签括起来的范围就是有序列表的范围，而里面的每一项都是一个list（列表项），所以，也是取这个单词的一部分，li，作为标签名。

自动生成来排序。

应用范围：试卷，问答…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<ol>
<li>C语言</li>
<li>java</li>
<li>数学</li>
<li>高数</li>
<li>英语</li>
<li>思政</li>
</ol>
</body>
</html>

image-20220126172819442

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<ol>
<li></li>(其中加入列出来的内容)
<li></li>
<li></li>
<li></li>
<li></li>
    ............
</ol>
</body>
</html>
自定义列表

应用：公司网站底部

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl标签开始。每个自定义列表项以 <dt 开始。每个自定义列表项的定义以 <dd 开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<dl>
    <dt>学科</dt>
    <dd>C语言</dd>
    <dd>高数</dd>
    <dd>java</dd>
    <dd>英语</dd>
</dl>

</body>
</html>

image-20220126173922382

9.表格

（1）简单的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
行 tr
列 td
-->
<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

</body>
</html>

image-20220126191249547

（2）跨行跨列

跨行：

此行中的内容

跨列：

此列中的内容

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--
行 tr
列 td
-->
<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

</body>
</html>

image-20220126192323040

（3）小总结

image-20220126192713400

  1. 单元格边框(border)：在使用<table border="1"></table> 的方式来定义

  2. 合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2”

  3. 单元格的对齐（align）（居中，左对齐，右对齐）

  4. 单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片

  5. 表格的标签上增加bgcolor 或者 background，就可以添加背景色或者背景图片

image-20220126193335154

10.视频和音频

src：资源路径

comtrols：控制条

autoplay：自动播放

eg：（视频元素和音频元素形式是一样的，所以这里拿视频来举例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</body>
</html>

image-20220126195541985

11.页面结构分析

image-20220126200124976

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header><h2>网页头部</h2></header>

<section><h2>网页主题</h2></section>

<footer><h2>网页尾部</h2></footer>
</body>
</html>

image-20220126202214000

12.iframe内联框架

image-20220126202542219

iframe内联框架

src：地址

width宽度

height高度

name

13.初始表单post和get的提交

image-20220126203424185

action：表单提交的位置，可以是网站，也可以是请求地址

method：post，get的提交方式

<form action="表单提交的位置，可以是网站，也可以是请求地址" method="post">

提交：

  <input type="submit">

重置：

    <input type="reset">

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<form action="3.链接标签学习.html" method="post">
    <p> 名字: <input type="text" name="username"></p>
    <p> 密码:<input type="password" name="pwd"> </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

image-20220126204958350

image-20220126205005021

14.文本框和单选框

image-20220126205322750

1.设置默认值

value：设置默认值

2.限制用户输入框输的长度

maxlength：限制用户输入框输的长度

3.文本框长度

size：对文本框长度的设置

eg:

<p> 名字: <input type="text" name="username" value="66666"></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<form action="3.链接标签学习.html" method="post">
    <p> 名字: <input type="text" name="username" value="66666"></p>
    <p> 密码:<input type="password" name="pwd"> </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

image-20220127011809713

4.单选框标签

radio单选框

<p>性别
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<form action="3.链接标签学习.html" method="post">
    <p> 名字: <input type="text" name="username" value="66666"></p>
    <p> 密码:<input type="password" name="pwd"> </p>
    <p>性别
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uO93vaHq-1650537828014)(https://gitee.com/yan-chaochao/typora-library/raw/master/typora-library/image-20220127012706327.png)]

5.多选框

checkbox

eg：

 <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"  value="game" name="hobby">游戏
        <input type="checkbox"  value="homework" name="hobby">作业
    </p>

image-20220127013432189

6.按钮

input type=“button” 普通按钮

input type=“image” 图像按钮

input type="submit"提交按钮

input type="reset"重置，清空表单

1.简单的按钮

<!--按钮-->
    <p>
    <input type="button" name="btnl" value="点击边长">
</p>

image-20220127015545837

2.图片按钮（图片也是可以点击的了）

  <input type="image" src="../resources/image/我的图片.jpg">

  <p>
    <input type="image" src="../resources/image/我的图片.jpg">
    <input type="button" name="btnl" value="点击边长">
</p>

3.默认选中：
checked

    <input type="checkbox"  value="code" name="hobby" checked>敲代码

image-20220127021209594

15.列表框文本域和文件域

1. 下拉框

<!-- 下拉框-->
    <p>下拉框
        <select name="列表名称" id="">
            <option value="j">java</option>
            <option value="c">c</option>
            <option value="c++">c++</option>
            <option value="操作系统">操作系统</option>
            <option value="全栈">全栈</option>
        </select>

    </p>

image-20220127020552986

默认选中:selected

     <option value="j" selected>java </option>

image-20220127021019047

2.文本域

cols—行

rows—列

<!--文本域-->
    <p>反馈
        <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    </p>

image-20220127021629775

3.文件域

（上传文件）

<!--文件域-->
<p>
    <input type="file" name="files">
</p>

image-20220127022019250

（加个小的效果

<input type="button" value="上传" name="upload">

image-20220127022226409

）

16.搜索块滑框

1.邮件验证

<!--邮件验证-->
<p>邮箱：
    <input type="email" name="email">

</p>

image-20220127022655268

2.URL验证

image-20220127022957930

3.数字验证

<p>数字
    <input type="number" name="num" max="100" min="0" step="10">
</p>

max-min两个值之间的范围

step这里应该是要被多少整除的意思

image-20220127023410428

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zu9CcUup-1650537828018)(https://gitee.com/yan-chaochao/typora-library/raw/master/typora-library/image-20220127023426589.png)]

4.滑块

image-20220127023832392

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

5.搜索框

<p>搜素：
    <input type="search" name="serch">

</p>

image-20220127024203586

（因为后面有个❌，所以在用户名那里用这个也可以）

17.表单的应用

1.只读

readonly

在表单中的内容不允许改变，可以和默认值value的方法一块使用

<p> 名字: <input type="text" name="username" value="java"readonly></p>
2.禁用

disabled

禁止在表单中选择此项，可以与默认值checked配合使用，或者在提交选项类型的时候单独使用

   <input type="radio" value="boy" name="sex"checked disabled>男

image-20220127025005334

3.隐藏域

hidden

  <p> 密码:<input type="password" name="pwd" hidden> </p>

image-20220127025301844

举报

相关推荐

【学习笔记】Html笔记

html前端

HTML学习笔记

htmllinqc#

HTML：学习笔记

htmlcss自定义

学习笔记——HTML，jQuery。

jqueryjava

HTML学习笔记一

python开发语言

HTML学习笔记（三）

html学习前端

html css学习笔记

javascript

HTML 学习笔记（基础）

数据结构链表

HTML学习笔记1

html表单数据代码人生

HTML学习笔记（一）

html学习前端
0 条评论
加载失败