1_Html

一. 引言

1.1 HTML概念

网页, 是网站中的一个页面, 是构成网站的基本元素, 是承载各种网站应用的平台. 通俗的说, 网站就是由网页组成的, 通常我们看到的网页都是以html或html后缀结尾的文件, 俗称HTML文件

1.2 HTML5

目前网页常用
提供了一些新的元素和一些有趣的新特性, 同时也建立了一些新的规则. 这些元素, 特性和规则的建立提供了许多新的网页功能, 如使用网页实现动态渲染图形, 图表, 图像和动画, 以及不需要安装任何插件直接使用网页播放视频等
优势:
- 世界知名浏览器厂商对HTML5的支持
  - 微软, Google, 苹果, Opera, Mozilla
- 市场的需求
- 跨平台

1.3 W3C标准

W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年, Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言
  - HTML, XML
- 表现标准语言
  - CSS
- 行为标准
  - DOM, ECMAScript

二. HTML简介

2.1 什么是HTML

HTML全称: Hyper Text Markup Language(超文本标记语言)
- 超文本: 包括文字, 图片, 音频, 视频, 动画等
- 标记: 标签, 不同的标签实现不同的功能
- 语言: 人与计算机的交互工具

2.2 HTML能做什么

HTML使用标记标签来描述网页, 展示信息给用户

2.3 HTML书写规范

HTML标签是以尖括号包围的关键字
HTML标签通常是成对出现的, 有开始就有结束
HTML通常都有属性, 格式: 属性="属性值"(多个属性之间空格隔开)
HTML标签不区分大小写, 建议全小写

2.4 IDEA快捷键

生成注释: Ctrl + Shift + / 或者 Ctrl + /
生成标签: Tab

三. HTML基本标签

3.1 结构标签

<html>: 根标签

    <head>: 网页头标签

    	<title>: 网页的标题</title>

    </head>

    <body>: 网页正文</body>

</html>

<body text="#f00"></body> text: 设置网页正文中所有文字的颜色

<body bgcolor="#00f"></body> bgcolor:设置网页的背景色

<body background="1.png"></body> background:设置网页的背景图

颜色的表示方式:
- 方式一: 用表示颜色的英文单词, 例: red, green, blue
- 方式二: 用16进制表示颜色, 例: #000000, #ffffff, #325687, #377405
文件路径
- ./ 表示当前目录下
- ../ 表示父目录
- / 表示根目录

3.2 排版标签

可用于实现简单的页面布局
注释标签: < !--注释-->
换行标签: < br>
段落标签: < p>文本文字< /p>
- 特点: 段与段之间有空行
- 属性: align对齐方式(left, center, right)
水平线标签: < hr/>
- 属性:
  - width: 水平线的长度(两种: 第一种, 像素表示; 第二种, 百分比表示)
  - size: 水平线的粗细(像素表示, 例如: 10px, 或者数字表示)
  - color: 水平线的颜色
  - align: 水平线的对齐方式

<!--换行-->

换<br>行

<!--段落 默认居左-->

<p>段落1</p>

<p align="center">段落2</p>

<p align="right">段落3</p>

<!--水平线 默认居中-->

<hr width="50%" align="left" color="#f00" size="7">

3.3 块标签

使用CSS+DIV是目前流行的一种布局方式
块标签
- 无论内容有多少, 该标签独占一行
- (p, h1-h6...)
行内标签
- 内容撑开宽度, 左右都是行内标签的可以排在一行
- (a, strong, em...)

3.4 基本文字标签

font标签处理网页中文字的显示方式

<font size="7"></font>用于设置字体的大小, 最小1号, 最大7号

<font color="#f00"></font>用于设置字体的颜色

<font face="宋体"></font>>用于设置字体的样式

3.5 文本格式化标签

使用标签实现标签的样式处理

<b>粗体</b>

<br>

<strong>加粗</strong>

<br>

<em>强调字体</em>

<br>

<i>斜体</i>

<br>

<small>小号字体</small>

<br>

<big>大号字体</big>

<br>

5<sup>2</sup>(上标)

<br>

H<sub>2</sub>O(下标)

<br>

<del>删除线</del>

3.6 标题标签

随着数字增大字体逐渐变小, 字体是加粗的, 内置字号, 默认占据一行

<h1>h1标题(最大)</h1>

<h2>h2标题</h2>

<h3>h3标题</h3>

<h4>h4标题</h4>

<h5>h5标题</h5>

<h6>h6标题(最小)</h6>

3.7 列表标签(清单标签)

无序列表: 使用一组无序的符号定义, < ul>< /ul>

<!--无序列表

ul: unordered list

-->

无序列表<br>

<ul>

    <li>无序列表</li>

    <li>无序列表</li>

    <li>无序列表</li>

</ul>

<ul type="circle">

    <li>空心圆</li>

</ul>

<ul type="disc">

    <li>实心圆</li>

</ul>

<ul type="square">

    <li>黑色方块</li>

</ul>

有序列表: 使用一组有序的符号定义, < ol>< ol>

<!--有序列表

ol: order list

-->

有序列表<br>

<ol>

    <li>有序列表</li>

    <li>有序列表</li>

    <li>有序列表</li>

</ol>

<ol type="1">

    <li>数字类型</li>

</ol>

<ol type="A">

    <li>大写字母类型</li>

</ol>

<ol type="a">

    <li>小写字母类型</li>

</ol>

<ol type="I">

    <li>大写古罗马</li>

</ol>

<ol type="i">

    <li>小写古罗马</li>

</ol>

嵌套列表: 无序列表与有序列表相互嵌套使用

<ul>

    <li>嵌套列表</li>

        <ol>

            <li>嵌套列表</li>

        </ol>

</ul>

自定义列表

<!--自定义列表

dl: definition term

-->

<dl>

    <dt>语言</dt>

    <dd>Java</dd>

    <dd>python</dd>

    <dd>C</dd>

    <dd>Linux</dd>

    <dt>位置</dt>

    <dd>北京</dd>

    <dd>上海</dd>

    <dd>广州</dd>

    <dd>深圳</dd>

</dl>

3.8 图形标签

在页面指定位置处引入一幅图片, < img>

src: 引入图片的地址

alt: 提示信息, 如果图片未能正确显示, 则显示提示信息

title: 鼠标悬停图片上提示的信息

width: 图片的宽度

height: 图片的高度

border: 图片的边框

align: 与图片对齐显示方式

hspace: 在图片左右设定空白

vspace: 在图片的上下设定空白

<p align="center">

    前一行<br>

前面的文字<img src="./picture/002.png" alt="text" title="text" width="235" align="top" border="10" vspace="40" hspace="40">后面的文字

    <br>后一行

</p>

3.9 链接标签

href: 在页面中使用链接标签跳转到另一页面
- 标签: < a href="">< /a>
- 属性: href跳转页面的地址(跳转到外网需要添加协议)
target属性: 设置跳转页面时的页面打开方式
- _blank在新窗口打开
- _self在原窗口打开
锚链接: 跳转到指定位置
- 定义位置: < a name="名称">< /a>, 使用name作为标记
- 指向: < a href="#名称">< /a>, #+name属性值跳转到name标记所在位置

功能链接:

邮件链接: < a href="mailto:邮箱">点击联系我< /a>

qq链接: 把跳转链接href中和图片标签src中的qq号换成真实的即可

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes">

    <img border="0" src="http://wpa.qq.com/pa?p=2:qq号:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>

</a>

<font color="red" size="5"><a name="top">顶部</a></font><a href="Demo06.html" target="_blank">跳转到另一个页面</a>

<br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br>

<font color="blue" size="5"><a name="middle">中部</a></font><br><br><br><br>

<br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br>

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

<h4><a href="#middle">回到中部</a></h4>

3.10 表格标签

普通表格 (table, tr(行), td(列))

<table border="1" width="200">

    <tr>

        <td>第一列</td>

        <td>第二列</td>

        <td>第三列</td>

    </tr>

    <tr>

        <td>第一列</td>

        <td>第二列</td>

        <td>第三列</td>

    </tr>

</table>

表格的列标签(th): 内容有加粗和居中效果

<table border="1" width="200">

    <tr>

        <th>第一列</th>

        <th>第二列</th>

        <th>第三列</th>

    </tr>

    <tr>

        <th>第一列</th>

        <th>第二列</th>

        <th>第三列</th>

    </tr>

</table>

表格的列合并属性(colspan): 在同一行内同时合并多个列

<table border="1" width="200">

    <tr>

        <th colspan="2"></th>

        <th></th>

    </tr>

</table>

表格的行合并属性(rowspan): 在同一列内同时合并多个行

<table border="1" width="200">

    <tr>

        <th rowspan="2">第一列</th>

        <th>第二列</th>

        <th>第三列</th>

    </tr>

</table>

3.11 媒体标签

<!--音频和视频

音频: audio

视频: video

src: 资源路径

controls: 控制条

autoplay: 自动播放

-->

<video src="./resource/video/min.mp4" controls autoplay></video>

<audio src="./resource/audio/Empire%20Of%20Angels.mp3" controls autoplay></audio>

3.12 页面结构分析

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

<header>

    <h2>网页头部</h2>

</header>

<section>

    <h2>网页主体</h2>

</section>

<footer>

    <h2>网页脚部</h2>

</footer>

四. 综合案例

<!--表格table

行tr

列td

-->

<table border="1">

    <tr>

        <!--colspan 跨列-->

        <th colspan="3">学生成绩</th>

    </tr>

    <tr>

        <!--rowspan 跨行-->

        <td rowspan="3">张三</td>

        <td>语文</td>

        <td>100</td>

    </tr>

    <tr>

        <td>数学</td>

        <td>100</td>

    </tr>

    <tr>

        <td>英语</td>

        <td>100</td>

    </tr>

    <tr>

        <!--rowspan 跨行-->

        <td rowspan="3">李四</td>

        <td>语文</td>

        <td>100</td>

    </tr>

    <tr>

        <td>数学</td>

        <td>100</td>

    </tr>

    <tr>

        <td>英语</td>

        <td>100</td>

    </tr>

</table>

五. html表单标签

html表单用于收集不同类型的用户输入数据

5.1 form元素常用属性

action表示动作, 值为服务器的地址, 把表单的数据提交到该地址上处理
method请求方式: get和post
- get:
  - 地址栏: 请求参数都在地址后拼接path?name="张三"&password="123456"
  - 不安全
  - 效率高
  - get请求大小有限制, 不同浏览器有不同, 但是大约是2KB; 一般情况用于查询数据
- post:
  - 地址栏: 请求参数单独处理
  - 安全可靠些
  - 效率低
  - post请求大小理论上无限; 一般用于插入删除修改等操作
enctype: 表示是表单提交的类型
- 默认值: application/x-www-form-urlencoded 普通表单
- multipart/form-data 多部分表单 (一般用于文件上传)

5.2 input元素

作为表单中的重要元素, 可根据不同type值呈现为不同状态

<form action="success.html" method="get">

    单行文体框: <input type="text" name=""><br>

    密码框: <input type="password" name=""><br>

    单选按钮: <input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女<br>

    多选框: <input type="checkbox" name=""><br>

    日期框: <input type="date" name=""><br>

    时间框: <input type="time" name=""><br>

    日期和时间框: <input type="datetime" name=""><br>

    电子邮件输入: <input type="email" name=""><br>

    数值输入: <input type="number" name=""><br>

    文件上传: <input type="file" name=""><br>

    隐藏域: <input type="hidden" name=""><br>

    取值范围: <input type="range" name=""><br>

    取色按钮: <input type="color" name=""><br>

    <hr>

    表单提交按钮: <input type="submit" name=""><br>

    普通按钮: <input type="button" name="" value="普通"><br>

    重置按钮: <input type="reset" name=""><br>

    图片提交按钮: <input type="image" src="./picture/002.png" name=""><br>

</form>

5.3 select元素(下拉列表)

单选下拉列表: < select>< /select>
默认选中属性: selected

<form action="success.html" method="get">

    学历:

    <select name="edu">

        <option value="1">小学</option>

        <option value="2">初中</option>

        <option value="3">高中</option>

        <option value="4">专科</option>

        <option value="5" selected>本科</option>

        <option value="6">硕士</option>

    </select>

</form>

多选下拉列表属性: < select>< /select>
多选列表: multiple="multiple"

<form>

	<select name="hobby" multiple="multiple" size="2">

        <option value="1">编程</option>

        <option value="2">音乐</option>

        <option value="3">运动</option>

        <option value="4">美食</option>

        <option value="5">游戏</option>

        <option value="6">电影</option>

    </select>

</form>

5.4 textarea元素(文本域)

多行文本框: < textarea cols="列" rows="行">< /textarea>

<textarea name="ta" cols="10" rows="2">HTML 学习</textarea>

5.5 表单初级验证

常用方式
- placeholder: 提示信息
- required: 非空判断
- pattern: 正则表达式 (网址: )

<p>用户:

    <input type="text" name="username" placeholder="请输入用户名" required>

</p>

<p>自定义邮箱:

        <input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

</p>

5.6 综合案例

<h1>注册</h1>

<!--表单form

action: 表单提交的位置, 可以是网站, 也可以是请求处理地址

method: post, get 提交方式

    get: 可以在url中看到我们提交的信息, 不安全, 高效

    post: 比较安全

-->

<form action="1.我的第一个网页.html" method="get">

<!--    1. 文本输入框: text

        value="用户名" 默认初始值

        maxlength="8" 最长写入字符个数

        size="30"     文本框长度

        readonly      只读

        disabled      禁用

        hidden        隐藏

-->

    <p>用户:

        <input type="text" name="username" placeholder="请输入用户名" required>

    </p>

<!--    2. 密码框: password-->

    <p>密码:

        <input type="password" name="pwd" placeholder="请输入密码">

    </p>

<!--    3. 单选框: radio

        value: 单选框的值

        name: 表示组

        checked: 默认选项

-->

    <p>性别:

        <input type="radio" name="sex" value="male" checked>男

        <input type="radio" name="sex" value="female">女

    </p>

<!--    4. 多选框 checkbox

        checked: 默认选项

-->

    <p>爱好:

        <input type="checkbox" name="hobby" value="study">学习

        <input type="checkbox" name="hobby" value="music">音乐

        <input type="checkbox" name="hobby" value="movie" checked>电影

        <input type="checkbox" name="hobby" value="sport">运动

    </p>

<!--    5. 普通按钮 button-->

    <p>

        <input type="button" name="btn1" value="按钮">

    </p>

<!--    6. 图片按钮 image-->

    <p>

<!--        <input type="image" src="./resource/image/001.png">-->

    </p>

<!--    7. 文件域 file-->

    <p>

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

        <input type="button" name="upload" value="上传">

    </p>

<!--    8. 下拉框 select

        multiple: 多行显示

        size: 显示几行

        selected: 默认选项

-->

    <p>国家:

        <select name="country">

            <option value="US">美国</option>

            <option value="China" selected>中国</option>

            <option value="UK">英国</option>

            <option value="GM">德国</option>

        </select>

    </p>

<!--    9. 文本域 textarea

        cols: 列的数量

        rows: 行的数量

-->

        <p>

            <textarea name="textarea" cols="20" rows="5" placeholder="请输入内容"></textarea>

        </p>

<!--    10. 邮件 email-->

    <p>邮箱:

        <input type="email" name="email" placeholder="请输入邮箱">

    </p>

<!--    11. 网址 url-->

    <p>网址:

        <input type="url" name="url" placeholder="请输入网址">

    </p>

<!--    12. 数字 number-->

    <p>分数:

        <input type="number" name="number" max="100" min="0" step="1" placeholder="请输入分数">

    </p>

<!--    13. 滑块 range-->

    <p>音量:

        <input type="range" name="range" max="100" min="0" step="2">

    </p>

<!--    14. 搜索 search-->

    <p>搜索:

        <input type="search" name="search" placeholder="请输入要搜索的内容">

    </p>

<!--    15. 增强鼠标可用性-->

    <p>

        <label for="mark">点我输入留言: </label>

        <input type="text" id="mark" placeholder="请输入您的留言">

    </p>

<!--    16. 自定义邮箱

        https://c.runoob.com/front-end/854

-->

    <p>自定义邮箱:

        <input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="请输入正确格式的邮箱">

    </p>

<!--    17. 提交按钮 submit-->

    <input type="submit" >

<!--    18. 重置按钮 reset-->

    <input type="reset" value="清空表单">

</form>

六. HTML框架标签

通过使用框架, 你可以在同一个浏览器窗口中显示不止一个页面, 每份HTML文档称为一个框架, 并且每个框架都独立于其他的框架
使用框架的缺点:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面

6.1 框架结构标签frameset

框架结构标签: 用于定义如何将窗口分割为框架
每个frameset定义了一系列行或列
rows/columns的值规定了每行或每列占据屏幕的面积
- < frameset rows="">< /frameset>
- < frameset columns="">< /frameset>

6.2 框架标签frame

每个frame引入一个html页面

<frameset cols="*,*,*">

    <frame src="Demo01.html" />

    <frame src="Demo02.html" />

    <frameset rows="10%,*">

        <frame src="Demo03.html">

        <frame src="Demo04.html">

    </frameset>

</frameset>

6.3 基本的注意事项

HTML5不支持frameset标签
不能将body标签和frameset标签同时使用
假如一个框架有可见边框, 用户可以拖动边框来改变它的大小, 为了避免这种情况发生, 可以在< frame>标签中加入: noresize="noresize"

6.4 iframe(HTML5支持)

<!--iframe

src: 链接地址

name: 框架标识名

w-h: 宽度高度

-->

<iframe src="" name="baidu" frameborder="0" width="1000" height="800"></iframe>



<a href="https://www.baidu.com" target="baidu">点击跳转</a>

七. HTML的其他标签和特殊字符

7.1 其他标签

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<!--该网页的描述-->

<meta http-equiv="descripton" content="this is my page">

<!--该网页的编码-->

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--href: 引入css文件的地址-->

<link rel="stylesheet" type="text/css" href="./style.css">

<!--src: js的文件地址-->

<script type="text/javascript" src=""></script>

7.2 特殊字符

占位符: 空格 空&nbsp;格

大于号: > &gt;

小于号: < &lt;

版权: 版权信息 &copy;HTML学习

1_Html的更多相关文章

小黑小波比.coding的使用
1_Coding的演示 1_html的演示 1_先查看帮助 1.它支持的语言非常多.下面是链接地址 https://coding.net/u/bobo159357456/p/html/paas/hel ...
HTM5新手学习的一些日常总结，相互交流和相互学习。
第一天一.HTML--网页的源码(超文本标签语言) HTML标签标签式是HTML最基本单位和最重要的组成. 使<和>扩起来标签都是闭合的(规范) HTML标签属性是标签的一部分,用 ...
HTML5周记（一）
各位开发者朋友和技术大神大家好!博主刚开始学习html5 ,自本周开始会每周更新技术博客,与大家分享每周所学.鉴于博主水品有限,如发现有问题的地方欢迎大家指正,有更好的意见和建议可在评论下方发表,我会 ...
HTML5的快速使用和css3的入门知识汇总
各位开发者朋友和技术大神大家好!博主刚开始学习html5 ,自本周开始会每周更新技术博客,与大家分享每周所学.鉴于博主水品有限,如发现有问题的地方欢迎大家指正,有更好的意见和建议可在评论下方发表,我会 ...
vue中嵌套页面（iframe）
vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...
BOM的节点方法和属性
一.HTML DOM >>>>>>>>>>>>>>>>>>>>具体可以参考W3S ...

随机推荐

else语句
else的搭配与else语句配合使用有三种情况 if ...: else: if条件表达式不成立的时候执行else 注意else还可以与while循环和for循环组合在一起(这是一个全新的知识) 注 ...
20220727-Java中多态总结
目录方法的多态对象的多态多态的注意事项和细节向下转型 Java动态绑定机制多态polymorphism:方法或者对象具有多种形态方法的多态方法的重载可以体现多态代码示例 // 通过方法 ...
HMS Core Discovery第16期回顾|与虎墩一起，玩转AI新“声”态
HMS Core 在AI领域最新的技术能力有哪些?本期Discovery直播以<与虎墩一起,玩转AI新"声"态>为主题,邀请了HMS Core 机器学习服务产品经理.机 ...
java实现wordCount的map
打开IDEA,File--new --Project,新建一个项目我们已经安装好了maven,不用白不用这里不要选用骨架,Next.在写上Groupid,Next. 写上项目名称,finish.o ...
linux文件校验
最近在一次安装centos7程序中遇到了网速很卡的情况,不得已采用了百度云的离线下载功能,后来上传进入虚拟机内,结果遇到无法上传的情况,后来经过转码后才上传成功,详情http://www.cnblog ...
javascript自执行函数表达式
解析器在解析function关键字的时候,会将相应的代码解析成function表达式,而不是function声明.// 下面2个括弧()都会立即执行(function () { /* code */ ...
centos安装torch==1.4.0与相关细节
对于某些直接安装torch==1.4.0报错的情况(没错,就是我遇到了) 在网上查找了,大概的解决方法是先安装一个低版本的torch和torchvision, torchvision是pytorch中 ...
Python 懂车帝综合口碑数据
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Python 懂车帝综合口碑数据需求 ...
.NET 6应用程序适配国产银河麒麟V10系统随记
最近想在麒麟系统上运行.NET 6程序,经过一番折腾最终完成了,简单记录一下. 目标系统: CPU: aarch64架构(ARM64) 操作系统:银河麒麟V10高级服务器系统银河麒麟V10系统(以下 ...
检查一个数值是否为有限的Number.isFinite()
如果参数类型不是数值,Number.isFinite()一律返回false. Number.isFinite(15); // true Number.isFinite(0.8); // true Nu ...

1_Html

一. 引言

1.1 HTML概念

1.2 HTML5

1.3 W3C标准

二. HTML简介

2.1 什么是HTML

2.2 HTML能做什么

2.3 HTML书写规范

2.4 IDEA快捷键

三. HTML基本标签

3.1 结构标签

3.2 排版标签

3.3 块标签

3.4 基本文字标签

3.5 文本格式化标签

3.6 标题标签

3.7 列表标签(清单标签)

3.8 图形标签

3.9 链接标签

3.10 表格标签

3.11 媒体标签

3.12 页面结构分析

四. 综合案例

五. html表单标签

5.1 form元素常用属性

5.2 input元素

5.3 select元素(下拉列表)

5.4 textarea元素(文本域)

5.5 表单初级验证

5.6 综合案例

六. HTML框架标签

6.1 框架结构标签frameset

6.2 框架标签frame

6.3 基本的注意事项

6.4 iframe(HTML5支持)

七. HTML的其他标签和特殊字符

7.1 其他标签

7.2 特殊字符

1_Html的更多相关文章

随机推荐

热门专题