HTML5 自学笔记简单入门

最新推荐文章于 2023-09-02 22:42:10 发布

zhangjunzi_blog

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量823

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_45439908/article/details/109025761

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5

1.初识HTML

HML:Hyper Text Markup Language(超文本标记语言）
- 包括：文字、图片、音频、视频、动画等等；
- 所有的浏览器都支持HTML5
- 跨平台
W3C标准
- World Wide Web Consortium(万维网联盟)
- Web技术领域最权威和影响力的国际中立技术标准机构
- http://www.w3.org/ (org表示开源)
- http://www.chinaw3c.org/
- W3C标准包括【重要】
  - 结构化标准语言（HTML【超文本标记语言】、XML【配置文件】）——>基本结构
  - 表现标准语言（CSS）——>美化界面
  - 行为标准（DOM、ECMAScript【JavaScript】）——>实现交互
常见的IDE
- IDE
- WebStorm

创建第一个网页

在IDE中新建一个html的文件就会出现
打开网页的方式
标签

<head></head>等成对的标签，分别叫***开放标签和闭合标签***，单独呈现的标签（空元素），如

,自闭合标签表示用/来关闭元素；
注释:，ctrl+/快捷键
DOCTYPE：告诉浏览器我们需要使用的规范；
<html>,</html>总标签，所有的东西都要写在这里面，否则无效；
meta:描述性标签，一般用来做SEO，搜索引擎
title：网页的标题

2.网页基本标签

2.1 标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签的学习</title>
</head>
 <!--写在body之间-->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>

2.2 段落标签

快捷键：p+tab可以实现

<p>你是那满城的烟雨</p>
<p>你是那山川的河流</p>
<p>你是那伟岸的山河</p>

2.3 换行标签

<br/>属于自闭和标签

你是那满城的烟雨<br/>
你是那山川的河流<br/>
你是那伟岸的山河<br/>

2.4水平线标签

<hr/>:hr+tab就可以自动括起来

2.5粗体，斜体

粗体:<strong></strong>

斜体：<em></em>

<strong>你是那满城的烟雨</strong><br/>【加粗+换行】
<em>你是那山川的河流</em>

2.6 注释和特殊符号

空格：在html中表示可以空多个格， :表示一个空格；

>:>

<:<

版权符号：©

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
&gt;<br/>
&lt;<br/>
&copy;<br/>

特殊符号记忆

&+字母去看看是不是需要的；

3.图像标签

3.1常见的图像格式

JPG、GIF、PNG、BMP（位图）

<img src ="path" alt = "text" title = "text" width ="x" height ="y">

src =“path”:图像的地址

相对路径：从当前目录进行资源所在目录的访问**【…/表示返回上一级目录】**
绝对路径：从盘开始写“F:/”

alt="":图片加载不出来显示的文字；

title = “”:鼠标悬停提示的文字

width= “”:图像的宽度

height=""图像的高度

注意：在IDE中所要用到的图片等资源文件全部放在固定的资源文件夹中，在项目中新建资源集合文件夹

<img src="../resources/images/haimian.jpg" alt="查找不到图片！">

3.2 超链接标签a标签

文本超链接

图像超链接

超链接

<p><a href="First_NetPage.html">HelloWorld</a></p>
<a href="https://www.baidu.com">百度</a><br/>
<!--图片超链接-->
<a herf ="https://www.cbaidu.com">插入imag的标签内容</a>
<a href="https://www.baidu.com"><img src="../Resources/images/haimian.jpg" alt="海绵宝宝" width="200" height="180" title="百度"></a><br/>

href[Hypertext reference]:跳转到哪个界面【本地的html名字；域名网址】

target:规定在何处打开链接

_blank:重新打开一个空白页；
_parent:在父窗口或者包含链接引用的框架的框架集中打开
_self:在本页或者本框架内部打开；
_top:在框架中有一个链接，如果设置成_top属性，当访问这个连接的时候会跳出框架，将此页面全屏显示，忽略所有框架；
framename:指定框架名的页面打开；

两个标签之间：链接载体（可以是文字也可以是图片或者其他）

target:表示窗口在哪里打开【可以是当前页面也可以是，新打开一个页面】

_blank：表示在新标签也打开
_self:在自己的网页中打开

锚链接

简介：锚链接实际上就是链接文本，又叫锚文本,一种特殊的超链接；锚点，<a href="#文本"></a> 可以在同一个页面中不同的位置间跳转，依据文本的内容

同一页面的跳转

1）使用name作为标记在顶部,设置锚标记；

<!--没有用href这个不是超链接只是一个标记-->
<a name="top">顶部</a>

2）在底部进行连接到顶部，设置跳转；

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

不同页面的锚点跳转：<a href=“a.html#文本”></a>

<!--1.在基本标签.html设置锚标记-->
<a name="top">顶部</a>
<!--2.在链接标签.html中设置链接设置-->
<a href="基本标签.html#top" target="_blank">跳转到基本标签页顶部</a><br/>

功能性链接

邮件链接：mailto
```
<a href="mailto:1160736238@qq.com" >点击联系我</a>
```
行内元素和块元素

**块元素:**无论内容多少，该元素独占一行；【p、h1-h6标签】
**行内元素:**内容撑开宽度，左右都是行内元素的可以在排一行；【a、strong、em…】

4.列表标签

列表：信息资源的一种展示形式。它可以使得信息结构化和条理化，并且以列表的样式显示出来；

分类：

有序列表

<ol></ol>:Ordered list的简称，有序列表
<li><\li>:List Item的简称；列表项目
应用范围：试卷、问答…

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

在这里插入图片描述

无序列表

<ul></ul>:Unordered List，无序列表简称；

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

应用范围：导航，侧边栏…

自定义列表

<dl></dl>：Definition List,自定义列表;
<dt></dt>:Definition Term,定义术语，列表的名称

<dd></dd>：Definition Description，定义描述（列表的内容）；

<dl>
    <dt>Projects</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C/c++</dd>
    <dt>Location</dt>
    <dd>xian</dd>
    <dd>chongqing</dd>
    <dd>shanghai</dd>
    <dd>zhejiang</dd>
</dl>

在这里插入图片描述
3.应用：公司底部

混搭【自己加的】

<dl>
    <dt>Projects</dt>
    <br/>
    <li>Java</li>
    <li>Java</li>
    <li>Java</li>
</dl>

在这里插入图片描述

5.表格标签

基本结构【表：table标签】
- 单元格：table data cell【表格中的一个单元格】
- 行：<tr></tr>(table row的缩写)
- 列：可以通过单元格实现
- 跨行：就是合并的行方向的单元格，colspan
- 跨列：合并两个列方向的单元格,rowspan

实现:5行3列的表格

<table border="1px"><!--设置边框的粗细-->
    <tr>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

6.媒体元素：视频和音频

6.1视频元素

标签：video

<body>
<!--音频和视频-->
<!--src:资源路径-->
<!--参数controls：出现播放的控制条，否则什么都不会出现-->
<!--autoplay:实现自动播放-->
<video src="../Resources/Video/Sherlock.mp4" controls autoplay>播放视频</video>
</body>

6.2音频元素

标签：Audio

<body>
<audio src="../Resources/Audio/nana.mp3" controls autoplay></audio>
</body>

注意：在Chrome中不会进行自动播放，在系统自带浏览器就会自动播放；

7.页面结构

导航栏、侧边栏、主体、条目、页底；

元素构成【标签】

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

8.iframe内联框架

内联框架：实现网页中嵌套另一个网页

嵌入代码：<iframe src="//player.bilibili.com/player.html?aid=372484815&bvid=BV18Z4y1L7TQ&cid=244627086&page=1" scrolling=“no” border=“0” frameborder=“no” framespacing=“0” allowfullscreen=“true”> </iframe>

标签：<iframe src =“引用页面地址” name =“mainFrame框架标识名”></iframe>

属性

frameborder:（0，1）是否显示框架周围的边框
marginheight:定义顶部和底部的边距；
marginwidth：定义左侧和右侧的边距；pixels像素
scrolling:（yes,no,auto）是否显示滚动条；
src:URL,规定在页面中显示的HTML内容；
width：iframe的宽度；

<body>
<iframe src="https://www.baidu.com" frameborder="0" width="300px" height="300px"></iframe>
</body>

在这里插入图片描述

<!--src:需要跳转的链接或者路径-->
<!--name:给框架窗口命名为Hello-->
<body>
<iframe src="https://www.baidu.com" name= "Hello" frameborder="0" width="1000px" height="800px"></iframe>
<!--target:在何处打开连接文档，此时在名为Hello的iframe打开链接-->
<a href="First_NetPage.html" target="Hello">点击跳转</a>
</body>
<!--此时该链接只是在Hello这个框架中打开而已-->

9.表单语法【重要】

表单：表单是一个包含表单元素的区域,标签：form建立一个表单

表单属性：在<form 属性></form>

**method:**用于规定发送表单数据的HTTP方法（get,post）
- post:比较安全，不会暴露用户名和密码；并且可以传输大文件
- get:不太安全，会暴露密码和用户名，不能提交大文件；
**name:**表单的名字；
**action：**URL，规定提交表单时向何处发送表单数据，提交后跳转到哪个页面；
**target：**规定在何处打开action的URL；

表单元素：表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

9.1 输入元素

input：<input type=“类型” name=“名字” />，自闭和标签

type:

text(文本域)大多数情况下文本域默认20个字符；
password（密码）:密码字段不会显示明文，以星号和原点代替；
提交按钮：submit

重置：reset

<body>
<h1>Register</h1>
<form action="First_NetPage.html" method="post" name="user_info" target="_blank">
    <!--文本输入框：input type"text"-->
    <p>Username：<input type="text" name="username"/></p>
    <!-- 密码框：input type="password"-->
    <p>Password：<input type="password" name="password"/></p>
    <!-- 提交:type ="submit"-->
    <p>
        <input type="reset" name="Reset"/>
        <input type="submit" name="Submit"/>
    </p>
</form>
</body>

单选按钮（RadiosButtons）:radio

<!--单选框一定要放在name相同的一个组之中才会使是单选框-->
<p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
</p>

注意

标签外面的值是不会被选中的，只有标签中的value="boy"才是选中后可以传输的数据；外面的“男”只是用于页面属性的修饰；

复选框：checkbox

<!--复选框-->
<!--一组选项同样要放在name相同的一个组里面-->
<!--checked:表示默认选中-->
    <p>爱好：
        <input type="checkbox" name="hobby" value="coding">敲代码
        <input type="checkbox" name="hobby" value="sleep" checked>睡觉
        <input type="checkbox" name="hobby" value="chatting">聊天
    </p>

按钮：button

 <p>
    <!-- value中的值就是显示在按钮上的字-->
        <input type="button" name="btn1" value="开始测试">
</p>

图片按钮：image

<!--跟submit效果一样进行数据提交-->
<input type="image" src="../Resources/images/haimian.jpg">

name:指定表单元素的名字
**value:**元素初始值，type为radio的时候必须设置一个值
size：指定表单元素的初始宽度，当为type为txt或password**的时候，表单元素大小以***字符***为单位，对于其他类型宽度以***像素***为单位；
**maxlength:**text和password时输入的最大字符串；
checked：type为radio或checkbox时，指定按钮是否被选中；

9.2列表框文本域

下拉框:<select ></select>,成对标签；

属性：

name:列表名称
id：全局属性，在所有的HTML标签中都适合，规定元素的唯一id

元素：

<option value=“选项的值”>显示的选项内容</option>:

<p>国家：
    	<!--name:表示该下拉框的属性名称为Country-->
        <select name="Country" >
            <!--selected:表示默认选中状态-->
            <option value="China" >中国</option>
            <option value="USA">美国</option>
            <option value="UK" selected>英国</option>
            <option value="Japan">日本</option>
        </select>
</p>

文本域：多行的文本输入，比如反馈可以输入文本的框

标签：<textarea></textarea>

<p>意见反馈：
        <!-- clos:表示列数；rows：表示行数-->
        <textarea name="feedback"  cols="30" rows="10"></textarea>
</p>

9.3 文件域

文件域：上传文件的框，使用input标签**<input type =“file”/>**

<p>
        <input type="file" name="files"/>
        <!--增加了一个上传按钮-->
        <input type="button" value="上传文件" name="upload"/>
</p>

在这里插入图片描述

9.4搜索滑块和简单验证

简单验证

<!--  邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!-- 网址验证-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!-- 数字验证-->
    <p>商品数量：
        <input type="number" name="number" max="10" min="0">
    </p>

在这里插入图片描述

滑块

也是input标签，type="range"

<p>音量：
        <input type="range" name="voice" max="10" min="0" step="1">
</p>

在这里插入图片描述
3. 搜索

也是input,type=“search”;

 <p>搜索框：
        <input type="search" name="search">
        <input type="button" value="搜索">
</p>

在这里插入图片描述

9.5表单的应用

隐藏域

hidden

<p>Password：<input type="password" name="password" value="123456" hidden></p>

在这里插入图片描述
2. 只读

readonly参数

<p>Username：<input type="text" name="username" value="Admin" readonly></p>

禁用

disabled

<input type="radio" value="girl" name="sex" disabled/>女

在这里插入图片描述
4. 点击文字就能够锁定文本框

label标签:<label></label>

<p>
    <!-- for:跳转的对象-->
    <label for="mark">邮箱</label>
    <!--id设置全局标记-->
    <input type="email" name="email" id="mark">
</p>

9.6表单的初级验证【重要】

初级验证：在前端就对输入进行一个简单的提示和验证保证输入的准确性；

1.placeholder:提示用户的信息输入；

<p>Username：<input type="text" name="username" placeholder="请输入用户名"></p>

在这里插入图片描述
2. required:非空

加了这个参数，则框内必须填写信息，否则无法提交；

<!--required:非空判断-->
<p>Username：<input type="text" name="username" placeholder="请输入用户名" required></p>

在这里插入图片描述
3.pattern:正则表达式

<p>生日：
    <input type="text" name="birthday" placeholder="1997-01-01" pattern="\\d{4}-\\d{2}-\\d{2}"  required>
</p>

10.总结

<标签名称 标签内部进行属性，参数的设置，值的设置会进行存储和读取>显示到网页可以看见得标题，内容等</标签名称>
标签内部设置得属性名称都是小写；
自己感觉成对标签里面可以再嵌套其他标签；
标签前后、成对标签中间位置输入得内容只是显示在页面的内容，不会被读取；

zhangjunzi_blog

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML5 自学笔记简单入门

HTML51.初识HTMLHML:Hyper Text Markup Language(超文本标记语言）包括：文字、图片、音频、视频、动画等等；所有的浏览器都支持HTML5跨平台W3C标准World Wide Web Consortium(万维网联盟)Web技术领域最权威和影响力的国际中立技术标准机构http://www.w3.org/ (org表示开源)http://www.chinaw3c.org/W3C标准包括【重要】结构化标准语言（HTML【超文本标记语言】、XM
复制链接

扫一扫

专栏目录