前端--HTML入门
开始学HTML了
第一次写博客，内容方面可能略显杂乱，尽本人之所能做到详略得当，表单 部分是重点，需要多方面横向学习，各项关键词在使用时还需要多查一下拓展用法。
感谢@遇见狂神说
https://www.bilibili.com/video/BV1x4411V75C?p=1
HTML视频链接
文章预览：
- 一.网页基本信息
- 二.网页标签
- 1.网页基本标签
- 2.网页图像标签（JPG,GIF,PNG,BMP...）
- 4.列表标签
- 5.表格标签
- 三.媒体元素
- 四.页面结构分析
- 五.内联框架
- 六.表单
- 七.完结
网页基本标签
图像，超链接，网页布局
列表，表格，媒体元素
表单及表单应用
表单初级验证
**生成一个简单的网页**
一.网页基本信息
网页的基本结构
<!-- 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>
```## 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。无理需求，尤胜洪水猛兽，远超九九之数。然我辈当持之以本心，守之以热忱。 勤习代码编写之力，精研数据解构之魂，通晓设计模式之体。待华发落尽之时，当成全栈大罗金仙之体，持键盘以登天门。此时意气风发，腹中豪迈气魄，当视天下甲方皆为草莽，产品经理皆为穷寇。斜睨世间，口出豪言:"还有谁?"。 呜呼哀哉，此情此景当浮一大白~~~
前端--HTML入门相关推荐
- openresty 前端开发入门五之Mysql篇
2019独角兽企业重金招聘Python工程师标准>>> openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysq ...
- Web前端开发入门之网页制作三要素！
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...
- angular语言前端开发_web前端开发入门全套学习方法路径，兼职在家做网站也能月入上万...
前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性.这个部分内容非常简单,而且非常容易掌握.相信你也更愿意学习这个部分,毕 ...
- webpack打包前端项目入门
前言:在开发过程中,利用webpack可以帮我们自动把ES6语法编译成低版本浏览器能解析的JavaScript代码.下面给出webpack打包前端项目入门案例. [终端:进入项目所在目录] 1.初始化 ...
- 支付宝前端推出《Web前端开发入门手册》
web前端教程 用大白话,来讲编程 近日,支付宝前端团队写的<Web前端开发入门手册>对外公开了,原本是用于内部培训使用,现在对外公开了. 这本手册是初学者的福音,它的受众群体是前端小白, ...
- openresty json mysql_openresty 前端开发入门五之Mysql篇
openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...
- 还在迷茫于前端如何入门和进阶？万字指南让你不再迷茫！
我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域.每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题. 作为程序员, ...
- web前端好入门吗？
什么是web前端? 大家越来越肯定前端的作用,如今也高端web前端开发人员依旧紧缺.而web前端技术说白了就是JavaScript.CSS.HTML等"传统"技术与Adobe AI ...
- 什么是web前端？Web前端好入门吗？
什么是web前端? 大家越来越肯定前端的作用,如今也高端web前端开发人员依旧紧缺.而web前端技术说白了就是Java.CSS.HTML等"传统"技术与Adobe AIR.Goog ...
- 基于qiankun搭建ng-alain15微前端项目入门实践
基础环境 实践日期:2023-02-22 ng versionAngular CLI: 15.1.6 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
最新文章
- 取名字_公司起名起名免费建筑公司取名字大全
- windows通过脚本批量设置环境变量（env、path）实战：java环境、scala环境、maven环境、gradle环境、nodejs、git等
- 从语义（semantic）GIS和知识表达谈起
- python getattr函数_[转]Python中的getattr()函数详解
- chap单向认证客户端
- 新建第一个windows服务（Windows Service）
- USACO 之 Section 2.3 （已解决）
- 暑假周进度总结报告8
- led投屏软件_SmartDrop——LED/LCD大屏内容投屏管理软件
- 老古语道：十九年头七年寡，鼠年难逢双春年，有何说法？
- linux 软件下载后无法安装不了怎么办,Firefox无法安装怎么办
- c语言随机数 单片机32,自己用C语言写PIC32单片机的serial bootloader
- 计算机安全排名,电脑安全卫士排行榜
- Mac快速录制音频工具:Recordia
- 南昌航空大学计算机控制实验,南昌航空大学关于实验教学的管理办法
- kali密码破解工具
- 人脸识别技术入驻了哪些行业
- oceanus-58总体框架理解
- 点云离群点剔除 — open3d python
- ES6新特性总结（2）解构赋值、模板字符串、Symbol