前端--HTML入门

寂林Lin

已于 2022-04-13 16:54:26 修改

阅读量160

点赞数 2

分类专栏：前端基础文章标签： html 前端 css

于 2021-11-05 19:57:39 首次发布

本文链接：https://blog.csdn.net/m0_46126931/article/details/121167774

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

开始学HTML了

第一次写博客，内容方面可能略显杂乱，尽本人之所能做到详略得当，表单 部分是重点，需要多方面横向学习，各项关键词在使用时还需要多查一下拓展用法。

感谢@遇见狂神说
https://www.bilibili.com/video/BV1x4411V75C?p=1
HTML视频链接

网页基本标签
图像，超链接，网页布局
列表，表格，媒体元素
表单及表单应用
表单初级验证
```
**生成一个简单的网页**
```

一.网页基本信息

网页的基本结构

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--    meta 描述性标签，用来描述网页的一些信息-->
<!--    meta一般用来做SEO (搜索引擎优化)-->
    <meta charset="UTF-8">
    <meta name="keywords" content="养猪专业户,养猪大厂">
    <meta name="description" content="来这个地方养猪">
<!--    title标签 代表网页标题-->
    <title>我的第一个网页</title>
</head>
<body>
Hellow World!
</body>
</html>

二.网页标签

1.网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--    meta 描述性标签，用来描述网页的一些信息-->
<!--    meta一般用来做SEO (搜索引擎优化)-->
    <meta charset="UTF-8">
    <meta name="keywords" content="养猪专业户,养猪大厂">
    <meta name="description" content="来这个地方养猪">
<!--    title标签 代表网页标题-->
    <title>我的第一个网页</title>
</head>
<body>
Hellow World!

<!--1.标题标签-->
<h1> 一级标签</h1>
<h2> 二级标签</h2>
<h3> 三级标签</h3>
<h4> 四级标签</h4>
<!--2.水平线标签-->
<hr/>

<!--3.段落标签-->
<p>  两只老虎    两只老虎 </p>

跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
<p>    真奇怪      真奇怪</p>
<p>    两只老虎     两只老虎 </p>
<p>   跑得快        跑得快</p>
<!--4.换行标签-->
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>

<!--5.字体样式标签-->
<h1>字体样式标签</h1>
粗体：i love you （strong）<strong>i love you</strong><br>
斜体：i love you （em）<em>i love you</em>
<br/>
<!--6.特殊符号-->
空       格 ：<br>
空&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt; 大于符号 gt
<br/>
&lt;    小于符号 lt
<br>
&copy;版权所有寂林

<!-- 特殊记忆方式
-->
<h2>记不住标签:</h2>
<h3>1.——> 先输入& 再输入一个字母 </h3>
<h3>2.——> 查百度</h3>

</body>
</html>

span 和 div
在这里插入图片描述

2.网页图像标签（JPG,GIF,PNG,BMP…）

1. src：图片地址（相对地址||绝对地址）
相对地址(推荐使用)，绝对地址(从盘符开始写)
…/ 代表上一级目录
2. alt：图片名字（图片加载不出来就显示名字,选填）
==3.title：悬停文字 ==
4.height width：图片高度宽度

<!DOCTYPE html> <!--告诉浏览器使用html规范！！！-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习-->
src：图片地址（必填） <br>
    相对地址(推荐使用)，绝对地址(从盘符开始写)<br>
    ../  代表上一级目录 <br/>
alt:图片名字（图片加载不出来就显示名字,选填） <br>
title：悬停文字(选填) <br>
height:图片高度 <br>
width:图片宽度 <br>
<img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="108" height="100">
<img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="200" height="300">


</body>
</html>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/7b9c33fea75846098ce33cbf0bf4893e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a-C5p6XTGlu,size_13,color_FFFFFF,t_70,g_se,x_16)

## 3.超链接标签

 1. 插入链接（可以是图片 可以是文字）
 2. 锚链接（可以回到/跳转到设定位置）
 3. 功能性链接（mailto跳转到发邮件联系）
4. ==html target属性==
 

> _blank -- 在新窗口中打开链接
> _parent -- 在父窗体中打开链接
> _self -- 在当前窗体打开链接,此为默认值
> _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 一个对应的框架页的名称 -- 在对应框架页中打开

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a href="#top">顶部</a>
<!--a标签学习-->
a标签中
<br>

 <em>href必填：表示跳转到某个页面</em><br>
<em>target:表示窗口在哪里打开</em>
<br>
target_blank:在新页面打开
target_self 在自己的网页中打开

<a href="1.我的第一个网页.html"target="_blank"> 点击我跳转到页面</a> <br>
<a href="http://www.baidu.com"> 点击我跳转到百度</a> <br>

<a href="3.链接标签.html"><img src="../resources/image/1.jpg" alt="1004" title="点击跳转到第3个网页" width="108" height="100"></a>

<p>
    <img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="108" height="100">
</p><p>
    <img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="108" height="100">
</p><p>
    <img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="108" height="100">
</p><p>
    <img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="108" height="100">
</p><p>
    <img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="108" height="100">
</p><p>
    <img src="../resources/image/1.jpg" alt="1004" title="悬停文字" width="108" height="100">
</p>
<!--锚链接-->
1.需要一个锚标记 <br>

2.跳转到标记 <br>

<a href="#top">回到顶部</a>
<a href="2.图片标签.html#return">回到网页2</a>
<a href="2.图片标签.html#down">跳转</a>
<!--功能性链接-->
邮箱链接：mailto <br> 
<a href="mailto:248789758@qq.com"><img src="../resources/image/1.jpg" alt="图片丢失" title="点击联系我" width="108" height="100"></a>
<a href="mailto:248789758@qq.com">点击联系我</a>
</body>
</html>

行内元素和块元素

块元素
无论内容多少，该元素独占一行 (p h1-h6…)

...

行内元素(a strong em …)
内容撑开宽度，左右都是行内元素的可以排在一行里面

…

4.列表标签

有序列表
无序列表
自定义列表

<!--有序列表-->
应用范围：试卷，问答... <br>
<ol> order list <br>
    <li>java</li>
    <li>C#</li>
    <li>python</li>
    <li>C++</li>
    <li>Php</li>
</ol>
<hr>
<hr>
<!--无序列表-->
应用范围：导航，侧边栏... <br>
<ul>   unordered lsit <br>
    <li>java</li>
    <li>C#</li>
    <li>python</li>
    <li>C++</li>
    <li>Php</li>
</ul>
<!--自定义列表-->
dl:标签 <br>
dt:列表名称 <br>
dd:列表内容 <br>
应用范围：公司网站底部 <br>
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
    <dt>位置</dt>
    <dd>四川</dd>
    <dd>重庆</dd>

5.表格标签

table 建表
border:给表格加边框
行 tr
列 td

    <tr>
<!--        跨列-->
        <td colspan="5">1-1</td>
<!--        <td>1-2</td>-->
<!--        <td>1-3</td>-->
<!--        <td>1-4</td>-->
<!--        <td>1-5</td>-->
    </tr>
    <tr>
<!--        跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>

在这里插入图片描述

三.媒体元素

视频元素
video
音频元素
audio

要加 controls 才能控制播放（进度条）加 autoplay （自动播放）

<!--音频和视频-->
<video src="../resources/video/人生苦短%20-%20副本.mp4" controls autoplay></video>
<audio src="../resources/audio/那些你很冒险的梦%20-%20林俊杰.mp3" controls autoplay></audio>

在这里插入图片描述

四.页面结构分析

header头
section主体
footer网页底部

<header>
  <h1>网页头部--Tencent--</h1>
</header>
<section>
    <h2>网页主体--</h2>
</section>
<footer>
    <h2>网页底部</h2>
</footer>

效果

在这里插入图片描述

五.内联框架

iframe 在一个网页中嵌入其他页面用法如下图

<body>
<!--iframe内联框架-->
src:地址 <br>
width height
-->
<iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>

运行前

点击跳转打开frame的内联窗口

六.表单

需要一个form框架
1.action:表单提交的位置，可以是网站，也可以是一个请求处理地址

2.method (提交方式): post / get
get方式提交：我们可以在url中看见我们提交的信息，不安全,高效。
post方式提交：比较安全，可以传输大文件。
3.value: 默认初始值
4.size: 文本框的长度
5.maxlenth: 最长能写几个字符
6.readonly：只读
7.disabled：禁用
8.hidden：隐藏
--------------表单初级验证--------------
9.placeholder: 输入提示
10.required：不能为空
11.pattern：正则表达式（用于自定义验证,正则表达式可以上网查）

-------------type---------
input type=" xxx "
button 普通按钮
submit: 提交按钮
reset：重置按钮
image 图像按钮
radio: 选项 (需要name命名相同name分为一组才可以多选一，checked默认勾选)
checkbox：多选框(加入 checked 默认勾选)
file -------文件域（提交文件）
textarea- 文本域(比较特殊，用textarea创建一行，不在input内)
range-------滑块
search------搜索框

————常用关键词————
在这里插入图片描述

get：可以在URL中看见提交的信息，不安全，但是高效

post：相对安全，可以传输大文件，提交信息可以在审查元素中找到

type---->

七.完结

（完整笔记–转自狂神说）

前端为体，饰以华物，予以交互，终未善用之站；

后端为灵，百家之言汇集，数据应运而存，致以站点精魄，遂成活物；

IT之路，艰险愈西行之径，途中艰险bug。

无理需求，尤胜洪水猛兽，远超九九之数。

然我辈当持之以本心，守之以热忱。 

勤习代码编写之力，精研数据解构之魂，通晓设计模式之体。

待华发落尽之时，当成全栈大罗金仙之体，持键盘以登天门。

此时意气风发，腹中豪迈气魄，当视天下甲方皆为草莽，产品经理皆为穷寇。

斜睨世间，口出豪言:"还有谁?"。 

呜呼哀哉，此情此景当浮一大白~~~

寂林Lin

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端--HTML入门

前端为体，饰以华物，予以交互，终未善用之站；后端为灵，百家之言汇集，数据应运而存，致以站点精魄，遂成活物；IT之路，艰险愈西行之径，途中艰险bug。无理需求，尤胜洪水猛兽，远超九九之数。然我辈当持之以本心，守之以热忱。勤习代码编写之力，精研数据解构之魂，通晓设计模式之体。待华发落尽之时，当成全栈大罗金仙之体，持键盘以登天门。此时意气风发，腹中豪迈气魄，当视天下甲方皆为草莽，产品经理皆为穷寇。斜睨世间，口出豪言:"还有谁?"。呜呼哀哉，此情此景当浮一大白~~~~
复制链接

扫一扫