本文详细介绍了HTML的基础知识，包括HTML的定义、用途、标签结构以及常见样式设置。讲解了如<br>何创建基本的网页结构，如标题、段落、链接、表格、表单等元素，并涉及到样式控制、图片和多媒体的插入。此外，还提到了页面布局元素如div和span，以及HTML5的新特性，如<section>、<article>等。内容涵盖了HTML的语法、样式和交互，是初学者入门HTML的实用教程。
HTML
HTML
HTML超文本标记语言，它是用来描述网页的一种语言
HTML不是一种，编程语言，而是一种标记语言
HTML是基本结构、
style
每一个标签都有属性 style 样式
样式的语法 样式名 样式值
宽度 width 例如 width 300px
高度 geight例如 geight300px
背景 background 例如 background：#eee
字体颜色 color 例如color ：red
文字的大小 font—size 例如 font—size12px
文字对齐 网上 text——align 例如 text—algin：center（居中对齐）
边框：border 例如 border：1px solid #eee（边框粗细，实线，灰色）
基本结构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>我的第一个网页<br/>
</body>
</html>
TAB +标签字母 秒变标签
br+bat=
块标签
自动换行 p h ul table
内联标签
b td a img
网络的基本标签
meta
标题标签
标题标签h中，等级越高字体越小加粗不变
标题标签都要在body标签；i
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>我的第一个网页<br/>
<h1>
。。。。
</h1>
</body>
</html>
换行标签
<br/>
段落标签
<P>……<P>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>我的第一个网页<br/>
<P>
我是大手笔
</P>
</body>
</html>
元素
块元素
无论内容多少，该元素独占一行 （li,dt,dd，p，h1-h6……）、
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行（a，strong，em……）
水平线标签
默认整个网页
div 标签
块标签
用于html的容器
和css一起使用 继续文档布局
span 标签
行内标签 没有特定含义 改变局部样式
于css一起使用 设置文本样式
字体样式标签
……
斜体 …… 或者……
特殊符号
| 特殊符号 | 举例 | |
|---|---|---|
| 空格 |  ； | <a hrer="#”>百度 ；| ； |
| <a hrer="#”>新浪 | ||
| 大于号 | >； | 如果时间>；晚上6点，就坐车回家 |
| 小于号 | <； | 如果时间<；早上6点，就飞着上学 |
| 引号 | "； | W3C规范中，HTML的属性值必须用成对的"；引起来 |
| 版权符号@ | ©； | "； 2003–2013 大傻逼学校 |
插入图片标签
<img 最重要src="图像地址"width="30PX"高单位px 宽height="50px"alt="图片加载不出来出现的文字"title="鼠标悬停提示文字"/>
链接标签
<a href="链接路径" target="_self或者_blank 判断新链接是否覆盖之前的窗口 "链接文本></a>
图片超链接
<a href="链接路径" target="_self覆盖或者_blank 判断新链接是否覆盖之前的窗口 "<img 最重要src="图像地址/"></a>
iframe网页嵌套网页
在一个网页嵌套一个网页
<iframe src="2.html"width="" height=""
实现页面中相互跳转
<iframe name="mainFrame" src=""></iframe>
target 为显示的框架窗口名
<a href="链接" target="mainFrame"</a>
列表分类
无序列表（重点）
声明无序列表<ui><li>文字</li>声明列表项 <li>文字</li> <li>文字</li> <li>文字</li>包含嵌套关系</ui>
没有顺序没一个li标签都独占一行
有序列表 默认 阿拉伯数字
<ol> <li>文字</li></ol>
有顺序i标签都独占一行 应用与试卷 排名
无序和有序标签下面只能包含li标签
都可以 通过 type 属性设置项目符号
type=“none”去除符号
定义列表
<di>声明定义列表 <dt>SG</dt>声明列表项 <dd>SH</dd>定义列表内容 <dd>SH</dd></di>
没有标记每个dt dd标签独占一行
默认没有标记、
一般用于一个标题有一个或者多个列表项的情况
锚链接
<a>href="#marker"甲</a>#跳转标记<a>name="marker"乙</a>
表格
表格由单元格
表格中个空单元格 一般用空格占位
跨行 =“n”(n是跨的行数)> :
跨列 rowspan
<table border="1" 边框属性align="center" cellpadding =20 cellspacing=5>定义边框位置center 中心 right左边 cellpadding控制 内容和边框距离 cellspacing控制边框和内边框的举例 width="30PX"高单位px 宽height="50px" <tr>代表一行 <td>姓名</td> <td>陈淑钰</td> </tr> <tr> <td>年龄</td> <td>年龄</td> </tr></table>
<tr><td colspan="2"所跨列数>文字 </td></tr><tr> <th> 表头<th> <td>姓名</td> <td>陈淑钰</td> </tr> <tr> <td>年龄</td> <td>年龄</td> </tr></table>
<tr><td rowspan="2"所跨列数>文字 </td> <td><th>姓名</th></td> <td>陈淑钰</td> </tr> <tr> <td>年龄</td> <td>年龄</td> </tr></table>
插入视频
<video src="视频路径" controls></video>controls 控件
插入音频
<embed src="饭思思-大雨还在下(片段).mp3 "></embed>
<audio src="C:\Users\lenovo\Desktop\Hello\html\sp\饭思思-大雨还在下(片段).mp3" controls autoplay></audio>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 当属性无效需要添加 muted属性 |
| height | pixels | 设置高度 |
| controls | controls | 展示媒介比如播放按钮 |
| width | plxels | 设置宽 |
| loop | loop | 循环播放 |
| scr | url | 要播放视频的链接 |
页面结构分析
<header><h1>网页头部</h1></header><sectino><h2> 网页主题 </h2></sectino><footer><h1> 网页脚部 </h1></footer>
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或者页面中的区域） |
| footer | 标记脚步区域的内容（用于整个页面或者页面中的区域） |
| section | Wed页面中的独立区域 |
| article | 独立文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
初始表单post和get提交
get 不安全 数据显示到地址栏
post 安全
<p><form action="01.html"method="get"></form></p><<input type="text" name="us"></p><p><input type="password" name="aw"></p><p><input type="submit"></p><p><input type="reset"></p>
action 表单提交位置 可以是网站或者是一个请求处理地址
method get post 提交方式
<input type="控件的类型"name="控件的名字"id="控件名字"/>
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text文本框、password密码框、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时，默认选中 |
<input type="text" name="us"value="陈淑钰好帅" maxlength="8"文本框长度 size="28"最大字符><textarea name="show Text" cols="x"显示的列数(单位为字符) rows="y"显示的行数>文本内容</textarea>
按钮
input type="button"普通按钮
input type="image"图像按钮
input type="submit"提交按钮
input type="reset"重置
单选框多选框
单选input type=“radio” 必须指定name和value 而且一组单选按钮name的值必须相同
多选input type=“checkbox”
文本框下拉框上传文件
<select name="列表" > size=”行数“ <option value="ZHI"selected="selecred默认选中项">帅</option> <option value="ZHI">很帅</option> <option value="ZHI">非常帅</option> </select><input type="file" name="f">上传文件
各种基础验证
减轻服务器的压力
保证数据的可行性和安全性
<p>邮箱<input type="email" name="yx"></p><p>网页<input type="url" name="url"></p><p>数字<input type="number" name="num0" max="100"最大值 min="1"最小值 step="1"></p><p>滑块<input type="range" name="hk" min="-2" max="133"> <p>搜索<input type="search" name="ss"> 日期 date 颜色 color
表单应用
只读readonly
禁用disabled
隐藏hidden
增加鼠标可用性
<label for="1">点我</label> <input type="text"id="1">
提示信息 必填
placeholder提示信息（只能用于输入框0
<p>名字<input type="text" name="us"placeholder="请输入用户名"
required 非空判断
<p>名字<input type="text" name="us"placeholder="请输入用户名"required
pattern正则表达式
<p>名字<input type="text" name="us"pattern="自己搜表达式格式"
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
