目录
HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
运行HTML代码不需要编译，有浏览器就可以直接运行
把一个HTML文件视为文档
文档内有很多“标签”（tag）每个标签也可以称为是一个“元素”
同时每个元素也对应到一个对象
对象里有属性，方法，这些操作可以在JS中进行操作
HTML大部分是成对出现的，少部分是单标签
HTML需要有head和body
head标签主要存放一些属性信息（元信息）
body存放界面/网页上要显示的内容
！快速生成html
<!DOCTYPE html>
<!-- 描述了文件内容是啥类型 html5的版本 -->
<html lang="en">
<!-- lang->language（语言） en （english） -->
<!-- 会触发网页是否要翻译 -->
<head>
<!-- mate是单标签 -->
<meta charset="UTF-8">
<!-- mate表示元 属性数据 字符集 utf8编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>HTML标签
注释标签
<!--注释内容-->标题标签
数字越小 字体越大
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem deserunt omnis ad non molestiae nisi atque earum quas voluptatibus id eaque, at velit minus, nulla repudiandae sint, facere reiciendis veniam!</p>lorem自动生成一段长文本
<br>换行 空格格式化标签
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线<br></u>
HTML标签分为块级元素和行内元素
块级元素独占一行 如h1-h6
行内元素不独占一行 如strong b em
图片标签
img是单标签
src是必填属性 路径
alt如果图片正常加载不起作用，如果加载失败，内容就会显示在图片位置上
width宽度height高度 单位像素px
如果只给一其中width或者height，那么图片会等比例缩放
img可以支持gif动图
<img src="1.jpg" alt="图片加载失败"title="腿"
width="450px"><br>超链接标签
<a href="1.html">这是跳转到内部网页</a><br>
<a href="https://www.bilibili.com/">这是跳转到哔哩哔哩</a><br>
<a href="2.zip">这是触发网页下载文件</a><br><!--这是浏览器的识别行为-->
<a href="1.html" target="_blank">这是打开一个新页面，而不是替换当前页面</a><br>
<a href="1.html"><img src="腿.jpg" alt="图片加载失败"width="450px">
a标签显示图片</a><br>
css代码
<!-- css -->
<style>
td{
text-align: center;
/* 设置td都是居中对齐 */
}
th{
text-align: left;
/* 设置th都是左对齐 */
}
p{
text-indent: 2em;
/* p首行缩进2em */
}
</style>表格标签
table 表示整个表格
tr 表示表格中的一行
td 表示表格中的一个单元格
th 也是单元格，用来表示表头单元格（字体更粗，居中)
<!-- 表格 -->
<table border="1pxs" width="500px" height="300px" cellspacing="0"><!--整个表格-->
<!-- border添加边框线 表格宽度和长度 cellspacing="0"设置间距-->
<tr><!--一行-->
<th>姓名</th><!--列标题-->
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td><!--列数据-->
<td>男</td>
<td>110</td>
</tr>
<tr>
<td>李四</td><!--列数据-->
<td>女</td>
<td>130</td>
</tr>
</table>
列表标签
ol有序标签
li表示一个列表项
<ol>
<!-- 有序列表 -->
<li>一</li>
<!-- li就是一个列表项 -->
<li>二</li>
<li>三</li>
<li>四</li>
</ol>
ul无序列表
<ul>
<!-- 有序列表 -->
<li>一</li>
<!-- li就是一个列表项 -->
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
表单标签
form功能是进行前后端交互的
input标签 有很多形态，对应不同的输入方式
<input type="text"><br>
<!-- 单行输入 -->
<input type="password"><br>
<!-- 密码框 -->
单选框
<input type="radio" name="gender"> 男<br>
<input type="radio" name="gender"> 女<br>
<!-- name=gender是排他属性 只要把name值设为相同值就是排他属性 只允许选一个 -->
<!-- 单选框 -->
选择文字即可选择 范围更大
<input type="radio" name="ce" id="cd" checked="checked"><label for="cd">男</label>
<!-- checked=checked默认选择男 -->
<input type="radio" name="ce" id="ca"><label for="ca">女</label><br>
<!-- 选中文字即可选择 范围更大 -->
复选框
<!-- 复选框 -->
<input type="checkbox" checked="checked"> 一
<input type="checkbox"> 二
<input type="checkbox"> 三<br>
按钮
<!-- 按钮 -->
<input type="button" value="这是一个按钮">
选择文件上传
<input type="file">
下拉菜单
<!-- 下拉菜单 -->
<select>
<option>徐州</option>
<option selected="selected">苏州</option>
<!-- selected="selected"默认选中 -->
<option>西塘</option>
</select>
多行编辑框
<textarea cols="30" rows="10"></textarea>
div&span
<div>111</div>
<div>111</div>
<div>111</div>
<span>222</span>
<span>222</span>
<span>222</span>
事件用户在页面上的操作
点击鼠标、移动鼠标、拖拽浏览器窗口、按下键盘、切换焦点
监听器
用户动作产生了事件、有了事件之后，需要在代码中，根据用户的动作做出处理，就可以适用监听器，查看用户什么时候触发事件
无语义标签
div&span
没有特定的应用场景 可以适用大部分场景
有语义标签
h1-h6,img,ul,ol,input
有特定功能和场景
除了input无法代替，其他标签大多数都可以适用div/span来代替
div是一个大盒子 块级元素 独占一行
span是一个小盒子 行内元素 不独占一行
4136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
