开始学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>
空 格
<br/>
> 大于符号 gt
<br/>
< 小于符号 lt
<br>
©版权所有寂林
<!-- 特殊记忆方式
-->
<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。
无理需求,尤胜洪水猛兽,远超九九之数。
然我辈当持之以本心,守之以热忱。
勤习代码编写之力,精研数据解构之魂,通晓设计模式之体。
待华发落尽之时,当成全栈大罗金仙之体,持键盘以登天门。
此时意气风发,腹中豪迈气魄,当视天下甲方皆为草莽,产品经理皆为穷寇。
斜睨世间,口出豪言:"还有谁?"。
呜呼哀哉,此情此景当浮一大白~~~