- html知识点总结
- html(hyper text markup language)
超文本标记语言- 组成网页最基本的语言
- html文档又称为web页面
- 由浏览器解释
- html标签
- 单标记标签
<标签名>
- 双标记标签
<标签名>内容</标签名>
- 单标记标签
- html文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>- <!DOCTYPE html>声明文档类型 html5文档
- <meta charset="utf-8">设置字符编码
charset 字符设置
utf-8 万国码 gb2312 gbk 国标
- 标题标签
- <h1>一级标题</h1>
- <h2>二级标题</h2>
- <h3>三级标题</h3>
- <h4>四级标题</h4>
- <h5>五级标题</h5>
- <h6>六级标题</h6>
- 段落标签
- <p>段落内容</p>
- 列表
- 无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
- 有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
- 定义列表
<dl>
<dt>标题/术语/关键字</dt>
<dd>对术语的解释说明</dd>
</dl>
- 无序列表
- 图片标签
- <img src="" alt="">
- 属性
- src 用来引入图片的路径
相对路径 相当于当前文件所在的路径- 1.当html文件与图片在同一个目录下，src的值是./图片名称
./ 当前目录 可省略
<img src="1.jpg"> 或<img src="1.jpg">
- 2.当html文件与图片所在文件夹在同一个目录下，src的值是./图片文件名称/图片名称
<img src="./img/2/jpg">或<img src="img/2.jpg">
- 3.当html文件所在文件夹与图片所在文件夹在同一个目录下，src的值是先通过../跳出当前目录，再写图片文件夹名称，最后写图片名称
../跳出当前目录
<img src="../img/3.jpg">
- 1.当html文件与图片在同一个目录下，src的值是./图片名称
- alt 当图片加载失败时的替代文本
- width 宽度
- height 高度
- title 光标悬停时的替代文本
- src 用来引入图片的路径
- 布局常用元素
- <div></div>
- <span></span>
- 超级链接
- <a href=""></a>
- 属性
- href 链接前往的地址
- 网址
<a href="http://baidu.com">去百度</a>
- 相对路径
<a href="./1.html">超链接</a>
- 锚链接
<div id="top>我是顶部</div>
<a href="#top">去顶部</a>
- 邮箱
<a href=",mailto:电子邮箱地址">给某某发邮件</a>
- 网址
- target 链接打开方式
- _top默认
- _blank在新窗口打开链接
- href 链接前往的地址
- 行内框架
- <iframe src="" frameborder=""></iframe>
- 属性
- src 资源路径
- frameborder 框架边框
- 1.有边框
- 0.无边框
- scrolling 滚动条
- auto 默认
- yes 有滚动条
- no 无滚动条
- 加粗
- <b></b>
- <strong></strong>
有强调意味
- 倾斜
- <i></i>
- <em></em>
有强调意味
- 小号字
- <small></small>
- 特殊符号
- <；小于号
- >；大于号
- 空格
-   ；小空格
- &ensp；半个汉字
- &emsp；一个汉字
- ×；乘号
- ©；版权符号
- 表单
- 表单标签
<form action="" method="get">
</form>- form标签功能（采集数据范围）
用来采集用户数据，并提交给服务器
- action 数据提交的路径
- method 数据提交的方式
- get
- post
- form标签功能（采集数据范围）
- <input type="" placeholder="" value="" name="">
- type类型
- <input type="text">文本框
- <input type="password">密码框
- <input type="submit"> 提交按钮
- <input type="checkbox">复选框
- 默认被选中 checked或checked="checked"
- 点击文字切换复选框状态
- <label><input type="checkbox">水果</label>
- <input type="checkbox" id="fruit">
<label for "fruit">水果</label>
- <input type="radio">单选
- name必须一致
- 默认被选中 checked 或 checked="checked"
- <input type="file"> 文件上传框
- accept 可接受的文件类型
- <input type="file" accept="image/*">
可以接受所有类型的图片
- <input type="file" accept="image/jpeg">
可以接受所有jpeg或jpg类型的图片
- <input type="file" accept="video/*">
可以接受所有类型的视频
- <input type="file" accept="audio/*">
可以接受所有类型的音频
- <input type="file" accept=".pdf">
可以接受后缀名为pdf的类型文件
- <input type="file" accept=".doc.docx.txt.pdf*">
可以接受后缀名为doc,docx,txt,pdf的文件类型
- <input type="file" accept="image/*">
- capture 捕获系统默认设备的媒体信息
- <input type="file" capture="user">
开启手机的前置摄像头
- <input type="file" capture="environment">
开启手机的后置摄像头
- <input type="file" capture="camera">
开启相机
- <input type="file" capture="camcoder">
开启录像机
- <input type="file" capyure="microphone">
开启麦克风
- <input type="file" capture="user">
- accept 可接受的文件类型
- <input type="reset">重置按钮
- <input type="button">普通按钮
- <input type="image" src="图片路径" alt="">图片按钮
- placeholder 输入域的提示文本
- value初始值
- name名字
- maxlength 最大长度（最多输入的字符数）
- required必填项
- type类型
- <textarea></textarea>文本域
- <button type="submit/reset/button">按钮</button>
- 下拉选择框
<select>
<option value="值">选项</option>
<option value="值" selected>选项</option>
</select>
- 表单标签
- 上下标
- <sup>上标</sup>
- <sub>下标<sub>
- 换行<br>
- 水平线
- <hr width="" align="">
- 属性
- width宽度
- color颜色
- align对齐方式
- center居中对齐
- left居左对齐
- right居右对齐
- 表格
- 表格基本结构
<table>
<tr>
<th>表格标题<th>
<td>单元格<td>
</tr>
</table>- table表格框架
- tr 表格的行
- th 表格标题
文本会被加粗，垂直水平居中
- td 表格单元格
- 属性
- border边框
- valign 垂直对齐方式
tr/td/th- top居顶对齐
- middle或center垂直居中对齐
- bottom居下对齐
- align 水平对齐方式
table/tr/td/th- left左对齐
- center居中对齐
- right居右对齐
- cellspacing 单元格与单元格之间的距离
- cellpadding 内容与单元格四周的距离
- width 宽度
- height高度
- bordercolor 边框颜色
- bgcolor 背景色
table/tr/td/th
- rules规定内侧边框哪部分可见
- none内侧边框均不可见
- all内侧边框均可见
- rows 位于行上的边框可见
- cols 位于列上的边框可见
- 单元格
- 水平合并单元格 colspan=“合并单元格数”
- 垂直合并单元格 rowspan="合并单元格数"
- 表格基本结构
- 属性
- border 边框
- cellspacing 单元格与单元格之间的距离
- cellpadding 内容与单元格四周的距离
- width 宽度
- height 高度
- align 水平对齐方式
table/tr/td/th- left 左对齐
- center 居中对齐
- right 居右对齐
- bordercolor 边框颜色
- bgcolor 背景色
table/tr/td/th
- rules规定内侧边框哪部分可见
- valign 垂直对齐方式
- 元素分类
- 块级元素
- 有哪些？
- h1~h6 6个标题标签
- <p></p>段落
- <ul></ul>无序列表
- <ol></ol>有序列表
- <dl></dl>定义列表
- <dt></dt>
- <dd></dd>
- <hr>
- <div></div>
- <form></form>
- 特点
- 1.总是在新行上开始，独占一行
- 2.宽度默认100%1，与内容无关
- 3.宽度，高度，行高，外边距以及内边距等均可以控制
- 4.块元素（p元素除外）里可以嵌套其他元素（块，内联元素）
- 有哪些？
- 内联元素
- 行内元素
display:inline- 特点
- 1.与其他元素在一行上显示
- 2.宽度只于内容有关
- 3.行高，外边距以及内边距等只有部分可以控制
- 4.行内元素里可以容纳文本与内联元素
- 有哪些
- <b></b>
- <strong></strong>
- <i></i>
- <em></em>
- <sup></sup>
- <sub></sub>
- <span></span>
- <small></small>
- 特点
- 行内块元素
display : inline-block- 特点
- 1.与其他元素在一行上显示
- 2.宽度，高度，行高，外边距以及内边距等均可以控制
- 有哪些？
- <img src="图片路径">
- <iframe src=""></iframe>
- <input>
- 特点
- 行内元素
- 块级元素
- html(hyper text markup language)
本文详细介绍了HTML的基本构成，包括文档类型声明、字符编码、标题标签、段落、列表、图片插入、链接、布局元素如<div>和<span>，以及表单元素如<input>和<form>，涵盖了网页制作的核心概念和技术。
扫一扫
2144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
