html简单入门

HTML

1. 初认HTML

一、HTML、CSS、JavaScript简介和分工

1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。

2、CSS(层叠样式表 Cascading Style Sheets),用来定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})

3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。有一个封装JavaScript的库，JQuery。

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript定义网页的行为，打个比喻，HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人；如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript和CSS是个毁容的植物人；如果说HTML是建筑师，CSS就是干装修的，Javascript是魔术师

HTML：Hyper Text Markup Language（超文本标记语言）

超文本：包括文字、图片、音频、视频、动画等等
HTML5+CSS3：目前的主流技术搭配

W3C：World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

try一个网页：

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

    <body>
        
    </body>
</html>

自闭合标签：如<meta charset="UTF-8">
开放标签和闭合标签：<body> </body>

2. 网页基本信息

注释：
1

<!DOCTYPR>：告诉浏览器我们要使用什么规范
<html></html>：网页的总标签，所有的网页内容都在其中
<head></head>：
<body></body>:网页的主体
<title></title>:网站的标题
<meta>：描述性标签，用来描述网站的一些信息
- 一般用来做SEO（搜索引擎优化）

3. 网页基本标签

标题标签：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
- 分别是一级到六级标签，大小从大到小
段落标签：<p></p>
换行标签：<br>
- 换行和段落之间的间隔不同
水平线标签：<hr>
字体样式标签：
- 粗体：<strong></strong>
- 斜体：<em></em>
注释：
特殊符号：&xxx;
- &开头 ;结尾
- 空格： 
- 版权符号：©

4. 图像标签

常见的图像格式有：jpg、gif、png、bmp...

嵌入图像：

1	`<img src="图像地址" alt="图像的替代文字（图片加载失败的时候会显示）" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" ...>`

必选项有src和alt
高和宽设置不是截取，而是压缩或者拉伸

5. 超链接标签及应用

页面间链接：页面之间的跳转
1
<a href="path链接路径" target="目标窗口位置" ...>链接文本或图像</a>
- 必选项有href
- 链接文本或图像指的是提示信息
  - 文本直接填写文本即可
  - 图像需要用上面的img标签进行嵌套
- target表示在什么位置打开新的窗口
  - _self：默认选项，在当前页面打开
  - _blank：在新页面打开
  - _parent：
  - _top：
锚链接：指定地址之间的跳转
- 首先需要一个锚标记，然后才可以跳转到标记
1
2
3
4
5
<a name="标记名">标记在网页中的提示</a> <a href="#标记名">点击跳转的提示文字或者图片</a> <a name="top">顶部</a> <a href="#top">点击跳转回到顶部</a>
- 可以和上面的网页间链接一起使用
  - 在后面加上#标记，表示去到新页面的指定位置

功能性链接

邮箱链接mailto

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

6. 块元素和行内元素

块元素
- 无论内容多少，该元素独占一行。新起换行。
- 如<p>,<h1>,...
行内元素
- 内容是可以撑开宽度的，左右都是行内元素的可以排在一行。新起不换行。
- 如<a>,<strong>,<em>,...

7. 列表标签

无序列表

<ul>
    <li>第一个</li>
    <li>第二个</li>
</ul>

有序列表

<ol>
    <li>第一个</li>
    <li>第二个</li>
</ol>

自定义列表

<dl>
<dt>自定义名称1</dt>

<dd>自定义选项1</dd>
<dd>自定义选项2</dd>
<dd>自定义选项3</dd>

</dl>

8. 表格标签

<table></table>：生成表格
<tr></tr>：生成一行
<td></td>：生成一列
生成的表格是有边框分隔的，只是默认没有显示出来
- 在table标签中增加属性border=""
  - 1px：指定边框的宽度
实现跨列，在td标签上操作colspan="xxx"
- <td colspan="2"></td>，这样该列就会占两列的长度
实现跨行，也是在td标签上操作rowspan="xxx"
- <td rowspan="2"></td>，这样该行的该列就有两行的高度

9. 媒体元素

视频元素 video
1
<video src="视频路径" controls autoplay ></video>
- 必选项为src
- controls表示显示控制选项，如播放暂停，进度条等等
- autoplay：自动播放
音频元素 audio
1
<audio src="音频路径" controls autoplay></audio>
- 相关操作与视频元素的添加类似

10 .页面结构分析

页面结构，元素和描述。

这些是规范，利于源代码的查看和分析，并不会强制改变位置，只是用来标记相应的位置。

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

11. iframe内联框架

在一个网页中嵌套另一个网页。（套娃）

b站分享视频，嵌入代码尝试

1	`<iframe src="链接网站" name="标记名" frameborder="0" width="xxx" height="xxx"></iframe>`

必选项为src
src可以为空，即src=""，这样可以利用name的标记名，结合a跳转来在对应地方生成内容
- 内联对象

12. 初始表单post和get提交

表单提交，如应用在登录等操作的信息提交部分。

举例：

<form action="https://www.baidu.com" method="get">

    <p>帐号: <input type="text" name="username"> </p>

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

    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>

action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：提交方法有post和get提交方式，还有dialog
- GET：点击提交之后，会跳转到第一个action中的网站
  - 但是此时会在url中显示帐号和密码信息，不安全但是高效
- POST：点击提交之后，在url中不会显示帐号和密码信息，但是同样可以在其他地方抓到相关信息
  - 检查 - network - 找到请求 - header - 表单数据
  - 这里面有请求的帐号密码数据
  - 可以利用其他的后台加密技术来实现在这一阶段的加密

13. 文本框和单选框

表单元素格式 input标签：

type：指定元素的类型
- 有text、password、checkbox、radio（单选框）、submit、reset、file、hidden、image和button等
- 默认为text
name：指定表单元素的名称
value：元素的初始值。type为radio的时候必须指定一个初始值
size：指定表单元素的初始长度。
- 当type为text或passeard的时候，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength：type为text或password的时候，输入的最大字符
checked：type为radio或checkbox的时候，指定按钮是否选中，表示是否默认选中

单选框分组概念，value是对应的选项值，而name表示组的概念：

<input type="radio" value="boy"> 男
<input type="radio" value="girl"> 女

<input type="radio" value="boy" name="sex"> 男
<input type="radio" value="girl" name="sex"> 女

如果没有指定name的话，那么此时可以同时选中男女
value可以理解为是在后台中的提交信息中的值，而外面的男女是提示信息，类似注释的意思
value就是单选框或者多选框的值(在后台获取的时候的value)

14. 按钮和多选框

多选框

<input type="checkbox" value="sing" name="hobby"> 唱
<input type="checkbox" value="dance" name="hobby"> 跳
<input type="checkbox" value="rap" name="hobby"> rap
<input type="checkbox" value="baskerball" name="hobby"> 篮球

同样有利用name实现的分组概念
获取的值会提交为数组的形式
按钮

1 2	`<input type="button" name="btn1" value="我是按钮"> <input type="image" src="图片路径">`

按钮中value的值为显示在按钮上的文字提示
- 于是也可以在submit和reset中利用value来修改默认值
type为image形式的时候，也是按钮的功能，并且起到的是submit的作用

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

列表框（下拉框）

<select name="Kon轻音少女">
    <option value="mio">澪</option>
    <option value="lv" selected>律</option>
    <option value="yoi">唯</option>
    <option value="mugi"></option>
    <option value="zimiao">梓</option>
</select>

name表示列表的后台名称
下拉框中的可选项用option
select表示初始选择哪一个，都没有selected就是第一个
文本域：即多行文本

1	`<textarea name="reply" id="" cols="30" rows="10"></textarea>`

可以指定初始行列的大小，但是在网页中是可以拖动的
文件域：用来上传文件等等

1	`<input type="file" name="files">`

还只是选择文件，真正提交需要利用前面的submit

16. 搜索框滑块和简单验证

目前的表单，即使没有任何信息也能够提交，现在需要对提交信息作初步的验证。

举例一些简单地带验证功能的input：

邮箱验证：
<input type="email" name="email">
url验证：
<input type="url" name="url">
数字验证：
<input type="number" name="num" max="xxx" min="xxx" step="xxx">

但是验证是初级验证，比较简单的验证。
如果不满足要求是无法提交的
滑块：

1	`<input type="range" name="xxx" min="xxx" max="xxx" step="xxx">`

搜索框：

1	`<input type="search" name="search">`

17. 表单的应用

增加属性 readonly
禁用 disabled
隐藏 hidden
- 隐藏了但是仍旧存在
增强鼠标的可用性
- 目前的文字只是提示用语，点击文字并不会有任何的作用
- 希望能够实现文字和输入框的绑定
- 利用label，一个label可以绑定一个id
1
2
<label for="mark">你点我光标就到id=mark的输入框中去</label> <input type="text" id="mark">
- 也可以直接用label将提示文字和input输入框包在一起，这样不需要for也能实现对应功能

18. 表单初级验证

placeholder：提示信息
- 举例：请输入用户名。提示信息在没有输入之前都会存在，即使光标点击了没输仍然存在
- 注意与默认值的区别
required：表示该区域的值必须要填写，不能为空
pattern：正则表达式判断
- pattern="正则表达式的内容"
- 需要满足正则表达式才能够提交

这些只是初级验证，高级的验证更加复杂，需要利用JavaScript

前端 > 基础

#html

html简单入门

http://example.com/2023/03/27/html简单入门/

作者

EverNorif

发布于

2023年3月27日

许可协议

javascript简单入门上一篇

css简单入门下一篇

html简单入门

HTML

1. 初认HTML

2. 网页基本信息

3. 网页基本标签

4. 图像标签

5. 超链接标签及应用

6. 块元素和行内元素

7. 列表标签

8. 表格标签

9. 媒体元素

10 .页面结构分析

11. iframe内联框架

12. 初始表单post和get提交

13. 文本框和单选框

14. 按钮和多选框

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

16. 搜索框滑块和简单验证

17. 表单的应用

18. 表单初级验证

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