前端三剑客-HTML5

前端三剑客

总述

初识Html
网页基本标签
图像，超链接，网页布局
列表，表格，媒体元素
表单及表单应用
表单初级认证

初识Html

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

HTML5-CSS3，主流

世界知名浏览器都对HTML5支持（天然跨平台）

w3c标准：w3c（万维网联盟）中立性技术标准机构

w3c标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

常见IDE：记事本、Dreamweaver（Dw）、IDEA、WebStorm

基本结构：

<html>
<head>
    <title>我的第一个网页</title>//网页头部
</head>
<body>
 我的第一个网页//主体部分
</body>
</html>

<body>、</body>等成对的标签，分别叫做开放标签和闭合标签

单独呈现的标签（空元素），如

;意为用/来关闭空元素

注释：结束

SEO：搜索引擎优化

<!--DOCTYPE：告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang ="en">
    <head>
        <!--meta描述性标签，它用来描述我们网站的一些信息-->
        <!--meta一般用来做SEO-->
        <meta charset="UTF-8">
        <meta name="keywords"content="狂神说Java，西部开源">
        <meta name="description"content="来这个地方可以学Java">
        <!--title网页标题-->
        <title>我的第一个网页</title>
    </head>
    <!--body标签代表网页主体-->
    <body>
        Hello,World!
    </body>
</html>

网页基本标题

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号标签

标题标签：

一级标签

>二级标签

>三级标签

段落标签：快捷键P+tab键

就是所见即所得

换行标签：
单标签，非常紧凑，没有段落标签舒展

水平线标签：快捷键hr+Tab，一般写成闭合标签，不闭合也可以

字体样式标签：

粗体：中间的字都是粗体+strong的闭合标签

斜体：中间的字都是斜体+em的闭合标签

注释：

空格：&.nbsp;&+nbsp

转义主要是&+ +;来查找

常用的有>(大于号)：&gt；

&lt；

图像标签

常见图片格式：JPG，GIF，PNG，BMP

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

链接标签

<.a href=”path” target=”目标窗口位置”>链接文本或图像



超链接：页面间链接（从一个页面链接到另一个页面）

锚链接：

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



功能性链接：<.a href=”mailto:1981360716@qq.com”>点击联系我的邮箱



行内元素和块元素

块元素：无论内容多少，该元素独占一行（p、h1-h6）

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong，em…）

列表

列表：列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息

列表的分类

无序列表ul

有序列表ol

定义列表dl

 <ol> <li>Java</li><li>Python</li><li>运维</li> <li>前端</li><li>C/C++</li> </ol> <hr/>  <ul> <li>Java</li><li>Python</li><li>运维</li> <li>前端</li><li>C/C++</li> </ul>  <dl> <dt>学科</dt><dd>Java</dd><dd>Python</dd> <dd>Linux</dd><dd>C</dd><dt>位置</dt> <dd>河北</dd><dd>邯郸</dd><dd>哈哈哈</dd> <dd>哭哭哭</dd> </dl>

表格

<.table>



 <table border="lpx"> <tr>  <td colspan="4"style="text-align:center">学生成绩</td> </tr> <tr>  <td rowspan="2">小明</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">小红</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table>

媒体元素

视频元素：video

音频元素：audio

 <video src=""controls autoplay></video> <hr/> <audio muted src=""controls autoplay></audio>

页面结构分析

header:标题头部区域的内容（用于页面或页面中的一块区域）

footer:标记脚步区域的内容（用于整个页面或页面的一块区域）

section:Web页面中的一块独立区域

article:独立的文章内容

aside:相关内容或应用（常用于侧边栏）

nav:导航类辅助内容

iframe内联框架

<.iframe src=”path”name=”mainFrame”>

path:引用页面地址

mainFrame=框架标识名

 <iframe src=""name="hello" frameborder="0"width="1500"height="730"></iframe> <a href="https://daohang.qq.com"target="hello">点击跳转</a>    

表单语法

表单：就是登录页面，账号密码那边，跟后端的联系最大

post:规定如何发送表单数据，常用值：get|post

result.html：表示向何处发送表单

<.form method=”post”action=”result.html”>

<.p>名字：<input name=”name”type=”text”>

<.p>密码：<input name=”pass”type=”password”>

<.p>
<input type=”submit”name=”Button”value=”提交”/>

<input type=”reset”name=”Reset”value=”重填”/>

表单元素格式

type：指定元素的类型。text、passworld、checkbox、radio、submit、reset、file、hidden、image和button，默认为text

name：指定表单元素的名称

value:元素的初始值。type为radio时必须指定一个值

size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

maxlength：type为text或password时，输入的最大字符数

checked：type为radio或checkbox时，指定按钮是否被选中

readonly:只读

hidden：隐藏

checked：默认

disable：禁用

初级表单验证：

placeholder：提示信息

required：非空判断

pattern：正则表达式（一种规则，定义的规则所要遵守的规范）

本文链接：https://www.cnblogs.com/study-xiaoning/p/16047127.html

前端三剑客-HTML5