HTML学习

最新推荐文章于 2022-07-10 02:07:49 发布

木子李木

最新推荐文章于 2022-07-10 02:07:49 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/weixin_43794032/article/details/91494108

版权

1、什么是HTML？

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

超文本：文字，图片，音频，视频，动画……

2、HTML发展历史

HTML2.0 很简单的文本框

HTML5 采取动画渲染的效果

3、HTML的优势

所有的浏览器都支持
跨品台
市场的需求，从以前的c/s（客户端/服务器）—>b/s(浏览器/服务器)架构

4、W3C标准

万维网联盟（World Wide Web Consortium）

三个标准

结构化标准：HTML，xml
表现标准：css
行为标准：ECMA Script

5、网页编辑工具：

记事本

notepad++

Hbuilder

IDEA(目前学习使用)

WebStorm

VScode

6、HTML的基本结构

<!--声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--标签是成对出现-->
<!--头部标签-->
<head>
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>狂神说Java</title>
</head>
<!--网页主体-->
<body>
Hello,World!
</body>
</html>

标签都是成对出现的：

< title > : 网页的标题

< meta > : 关键字标签

head>:头部标签
<body>:网页主体
<!--H1最大 , H6最小-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<!--段落标签-->
<!--p:表示段落标签-->
<h1>段落标签</h1>
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<!--换行标签br-->
<!--br:单标签-->
</br>:换行标签
</hr>:水平线标签
<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
<!--特殊符号-->
<h1>特殊符号</h1>
<p>大于号 : &gt; </p>
<p>小于号 : &lt; </p>
<p>空格 : &nbsp; </p>
<p>引号 : &quot; </p>
<!--idea自动提醒：&+符号字符+分号结束-->
**```
7、图像标签**
常见的图像格式

- jpg
- png
- bmp
- gif

<img src="../resources/images/tx.jpg" title="鼠标悬停说:狂神cool" alt="狂神头像" width="300px" height="300px">

**  8、  链接标签**

超链接

点击跳转


锚链接

//可以容从一个地方跳转到锚指定的地方，需要的东西：标记，跳转

锚链接标记

点击跳转

跳转到demo页标记三

功能性链接

发送邮件

target

target 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开

打开第一个网页_在新网页中打开打开第一个网页_在自己网页中打开

``` **9、行内元素和块元素**

独占一行的标签：块标签：p ,h1-h6

只有自己那一部分，可以在行内定义多个的标签：行内标签

a ,strong , img ,em 等

开放标签，也就是闭合标签

<p></p>

自闭合标签

</br>

10、列表
ul 无序列表
ol 有序列表
dl 自定义列表

<!--无序列表-->
<!--
<ul> -> 无序列表
<li> -> 选项
-->
<h1>无序列表</h1>
<ul>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ul>

<!--有序列表-->
<!--
<ol> -> 有序列表
<li> -> 选项
-->
<h1>有序列表</h1>
<ol>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ol>

<!--自定义列表-->
<!--
<dl> -> 自定义列表
<dt> -> 列表标题
<dd> -> 列表选项
-->
<h1>自定义列表</h1>

<dl>
    <dt>Java</dt>
    <dd>OOP</dd>
    <dd>Annotation</dd>
    <dd>Reflection</dd>

    <dt>Python</dt>
    <dd>数据分析</dd
    <dd>数据挖掘</dd>
    <dd>...</dd>
</dl>

代码效果展示图如下：
在这里插入图片描述
11、表格
为什么使用表格？

简单通用
结构稳定
表格结构
单元格
行（tr）
列(td)
其中colspan是跨列，rowspan是跨行
HTML表格的创建

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

12、视频和音频
标签分别为 video ，audio
例如一段代码

<video src="../resources/video/今日说法.mp4" controls width="1280px" height="720px" autoplay></video>

src -> 视频路径 (必填)
controls -> 给视频增加控制播放的按钮
autoplay -> 自动播放视频
width->视频窗口的宽度
height->视频窗口的高度
音频标签为audio，其结构同上

13、网页结构分析

<header> 头部 </header>
<footer> 尾部 </footer>
<nav> 导航 </nav>
<article> 放文章 </article>
<code> 代码 </code>
<section>独立区域</section>

14、内联框架
作用：在一个网页中嵌入另一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<iframe name="markup" src="" frameborder="0"></iframe>

<a href="https://www.baidu.com" target="markup">test</a>
<a href="demo.html" target="markup">test</a>
<a href="列表.html" target="markup">test</a>
<a href="demo2.html" target="markup">test</a>
</body>
</html>

效果展示很简单，如下图
在这里插入图片描述
15、表单元素
什么是表单？常见的表单有登陆，注册的界面

<!--form为表单元素-->
<!--

action : 提交地址
method : 提交方式 : post/get

-->

<h1>注册</h1>

<!--
input属性:
    type=类型
    name: 名字 , 可以重复
    id: 不能重复,保证全代码唯一
    disabled: 禁用文本框
-->

<!--
    post : 安全   效率低  能提交无限大的文件
    get : 不安全  效率高  一次请求的文件量特别小 .
    温馨提示 : 网页中一般使用post方式提交
-->

<form action="1.第一网页.html" method="get">
    <!--文本框 : input type=text-->
    <p>用户名 : <input type="text" name="username"> </p>

    <!--密码框 : input type=password -->
    <p>密码 : <input type="password" name="password"> </p>
    <p>确认密码 : <input type="password" name="password"> </p>


    <p>
        <!--文件域-->
        <input type="file">
    </p>

    <p>
        <!--radio单选框-->
        <!--name:绑定同一个组-->
        <!--checked 默认选中-->
        <!--
        注意事项:
            1. 若是要提交 , 则必须要有 name 和value属性
            k=v&k=v&k=v&k=v&k=v&k=v
            2. name就是key 提交的键 , vlaue就是提交的信息
        -->
        性别
        <input type="radio" value="boy" name="group1">男
        <input type="radio" value="girl" name="group1">女
        <input type="radio" value="!boygirl" name="group1">人妖
    </p>

    <p>
        <!--
        注意事项:
        1. 若是要提交 , 则必须要有 name 和value属性
        k=v&k=v&k=v&k=v&k=v&k=v
        2. name就是key 提交的键 , vlaue就是提交的信息
        -->
        爱好
        <!-- checkbox多选框-->
        <input type="checkbox" value="movie" name="hobby"/>看电影
        <input type="checkbox" value="music" name="hobby"/>听歌
        <input type="checkbox" value="road" name="hobby"/>压马路
        <input type="checkbox" value="code" name="hobby"/>敲代码
    </p>


    <hr/>

    <!--下拉框-->
    <!--selected 选中-->
    <select name="列表名称">
        <option value="选择的值1">一</option>
        <option value="选择的值2">二</option>
        <option value="选择的值3" selected>三</option>
    </select>

    <select name="国家">
        <option value="美国">美国</option>
        <option value="中国" selected>中国</option>
        <option value="印度">印度</option>
    </select>

    <select name="中国">
        <option value="西安">西安</option>
        <option value="重庆">重庆</option>
        <option value="新疆" selected>新疆</option>
    </select>

    <p>
        <!--按钮-->
        <input type="button" value="我的第一个button按钮">
        <!--图片按钮-->
        <!--<input type="image" src="../resources/images/tx.jpg">-->
    </p>

    <p>
        <!--
        文本域
        多行的文本框
        -->
        <textarea name="textarea" cols="20" rows="10">
            文本内容
        </textarea>
    </p>

    <hr/>

    <!--邮箱表单简单验证-->
    邮箱 : <input type="email" name="email"/>  <br/>
    <!--url简单验证-->
    url : <input type="url" name="url">  <br/>
    <!--数字的简单验证-->
    数字 : <input type="number">  <br/>
    <!--滑块,值得范围0~100-->
    滑块 : <input type="range" name="range" value="30">
    <!--搜索框-->
    搜索框 : <input type="search" name="search">



    <!--提交按钮 : input type=submit-->
    <!--重填按钮 : type="reset"-->
    <!--
    提交会产生事件 , 会将表单的内容提交到action请求的地址  ,方法为method指定的方法
    submit默认文字是提交 , 手动给按钮赋值使用 value
    -->
    <p>
        <input type="submit">
        <input type="reset">
    </p>


</form>

网页效果如下图：
在这里插入图片描述
表单其他应用，隐藏域（hidden）：只读（readonly）禁用disabled（）
表单验证
作用：保护数据的安全性，降低服务器的压力

1. 提示信息

<p>用户名 : <input type="text" name="username" placeholder="请输出用户名"> </p>

效果如下：
在这里插入图片描述
2. 非空判断
常见的密码框都为必填项，所以需要加上required

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

3. 正则表达式验证
pattern–>正则表达式

自定义验证 : <input type="text" pattern=" RE "/>

木子李木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

1、什么是HTML？HTML全名超文本标记语言（Hyper Text Markup Language）超文本：文字，图片，音频，视频，动画……2、HTML发展历史HTML2.0 很简单的文本框HTML5 采取动画渲染的效果3、HTML的优势所有的浏览器都支持跨品台市场的需求，从以前的c/s（客户端/服务器）—>b/s(浏览器/服务器)架构4、W3...
复制链接

扫一扫