一. 引言
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>段落1p>
<p align="center">段落2p>
<p align="right">段落3p>
<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>
<strong>加粗strong>
<em>强调字体em>
<i>斜体i>
<small>小号字体small>
<big>大号字体big>
5<sup>2sup>(上标)
H<sub>2sub>O(下标)
<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>
<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>
<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>
<dt>语言dt>
<dd>Javadd>
<dd>pythondd>
<dd>Cdd>
<dd>Linuxdd>
<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">
前一行
前面的文字<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>
<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>
<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 媒体标签
<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 border="1">
<tr>
<th colspan="3">学生成绩th>
tr>
<tr>
<td rowspan="3">张三td>
<td>语文td>
<td>100td>
tr>
<tr>
<td>数学td>
<td>100td>
tr>
<tr>
<td>英语td>
<td>100td>
tr>
<tr>
<td rowspan="3">李四td>
<td>语文td>
<td>100td>
tr>
<tr>
<td>数学td>
<td>100td>
tr>
<tr>
<td>英语td>
<td>100td>
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="">
密码框: <input type="password" name="">
单选按钮: <input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女
多选框: <input type="checkbox" name="">
日期框: <input type="date" name="">
时间框: <input type="time" name="">
日期和时间框: <input type="datetime" name="">
电子邮件输入: <input type="email" name="">
数值输入: <input type="number" name="">
文件上传: <input type="file" name="">
隐藏域: <input type="hidden" name="">
取值范围: <input type="range" name="">
取色按钮: <input type="color" name="">
<hr>
表单提交按钮: <input type="submit" name="">
普通按钮: <input type="button" name="" value="普通">
重置按钮: <input type="reset" name="">
图片提交按钮: <input type="image" src="./picture/002.png" name="">
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="1.我的第一个网页.html" method="get">
<p>用户:
<input type="text" name="username" placeholder="请输入用户名" required>
p>
<p>密码:
<input type="password" name="pwd" placeholder="请输入密码">
p>
<p>性别:
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
p>
<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>
<p>
<input type="button" name="btn1" value="按钮">
p>
<p>
p>
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
p>
<p>国家:
<select name="country">
<option value="US">美国option>
<option value="China" selected>中国option>
<option value="UK">英国option>
<option value="GM">德国option>
select>
p>
<p>
<textarea name="textarea" cols="20" rows="5" placeholder="请输入内容">textarea>
p>
<p>邮箱:
<input type="email" name="email" placeholder="请输入邮箱">
p>
<p>网址:
<input type="url" name="url" placeholder="请输入网址">
p>
<p>分数:
<input type="number" name="number" max="100" min="0" step="1" placeholder="请输入分数">
p>
<p>音量:
<input type="range" name="range" max="100" min="0" step="2">
p>
<p>搜索:
<input type="search" name="search" placeholder="请输入要搜索的内容">
p>
<p>
<label for="mark">点我输入留言: label>
<input type="text" id="mark" placeholder="请输入您的留言">
p>
<p>自定义邮箱:
<input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="请输入正确格式的邮箱">
p>
<input type="submit" >
<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="baidu" frameborder="0" width="1000" height="800">iframe>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"<a href="https://www.baidu.com" rel="noopener">https://www.baidu.com</a>"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"baidu"</span>></span>点击跳转<span class="hljs-tag">a</span>>
七. 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">
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/javascript" src="">script>
7.2 特殊字符
占位符: 空格 空格
大于号: > >
小于号: < <
版权: 版权信息 ©HTML学习
Original: https://www.cnblogs.com/qimu666/p/16565754.html
Author: 柒木木木
Title: 1_Html
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/598742/
转载文章受原作者版权保护。转载请注明原作者出处！