1> HTML概念
HTML是Hyper Text Markup Language 超文本标记语言 的缩写
HTML是由一套标记标签 （markup tag）组成，通常就叫标签
标签由开始标签和结束标签组成
<p> 这是一个开始标签
</p> 这是一个结束标签
<p> Hello World </p> 标签之间的文本叫做内容
2> 中文乱码问题可以在浏览器上设置编码方式为utf-8
<head>
<meta charset="utf-8" />
</head>
3> HTML元素概念
元素指的是从开始标签到结束标签之间所有的代码
比如
<p>HelloWord</p>
4> HTML属性概念
属性用来修饰标签的
比如要设置一个标题居中
<h1 align="center">居中标题</h1>
5> HTML注释
<!-- -->
6> 常见标签
标题标签
一般会使用<h1> 到 <h6> 分别表示不同大小的标题
标题会自动粗体，大写其中的内容，并且带有换行效果
段落标签
<p>标签即表示段落 是paragraph的缩写
自带换行效果
粗体标签
<b> <strong> 都可以用来实现粗体的效果
预格式标签
有时候，需要在网页上显示代码，比如java代码
就需要用到pre
删除标签
<del>即删除标签
delete的缩写
下划线标签
<ins>即下划线标签
图像标签
<img> 即图像标签
需要设置其属性 src指定图像的路径
注意： 同级目录图像
如果是本地文件，只需把图片放在同一个目录下即可
src直接使用文件名，不需要/
上级目录图像
图片在上级目录，则在src上加上 ../，即可访问上级目录的图片
如果是在上级目录的上级目录，则使用 ../../
其他目录图像
src使用图片所在的绝对路径，并在前面加上file://c://路径
width，height设置图片宽度高度
align 对齐方式
如果图片不存在，默认会显示一个缺失图片，这是不友好的
所以可以加上alt属性。
当图片存在的时候，alt是不会显示的
当图片不存在的时候，alt就会出现
<img src="./img/1.jpg" width="180px" height="250px" border="5px" title="美女1">
超链标签
<a>标签即用来显示超链
完整元素是 <a href="跳转到的页面地址">超链显示文本</a>
① 属性target _self _blank _top _parent frame的名称
② 属性title 当鼠标放在超链上的时候，就会弹出提示文字
使用图片作为超链
<a href="xxx">
<img src="图片地址"/>
</a>
功能：点击某个链接回到顶部
<a id="x" name="x">顶部</a>
中间有很多内容,超过1页面的内容
<a href="#x">回到顶部</a>
表格标签
<table>标签用于显示一个表格
<caption> 表格标题
<tr> 表示行
<th> 单元格， 和td一样也是在tr里面，一般用作第1行的td
<td> 表示列又叫单元格
① table属性 border="1" 边框
② table属性 width="600px" 宽度
table属性 cellspacing cellpadding
③ 设置td的属性width
④ 横跨两列, 合并列 设置td的属性colspan
横跨两行, 合并行 设置td的属性rowspan
列表标签
列表分无序列表和有序列表
分别用<ul>标签和<ol>标签表示
<li> 列表项，是<ul>和<ol>的子标签
div和span标签
<div>
<span>
这两种标签都是布局用的
这种标签本身没有任何显示效果
通常是用来结合css进行页面布局
字体标签
<font color="#ff0000" size="+2" face="宋体">
内联框架标签
<iframe> 即内联框架
通过内联框架 可以实现在网页中“插入”网页
<iframe name="my" src="https://www.baidu.com" width="600px" height="400px">
</iframe>
常见的实体
<ol>
<li>"</li>
<li>'</li>
<li>&</li>
<li><</li>
<li>></li>
<li>≤</li>
<li>≥</li>
<li>® 注册商标</li>
<li>© 版权</li>
<li>¥ 人民币符号</li>
<li> 空格</li>
<li>™ 商标</li>
</ol>
音频和视频
<!-- autoplay -->
<audio src="./mp4/m1.mp3" controls loop>
当前浏览器不支持audio
</audio>
<video width="800px" height="400px" src="./mp4/Pixels.mp4"
controls>
当前浏览器不支持 video直接播放
</video>
map地图标签
<img src="./img/img2.jpg" width="300px" usemap="myMap1" />
<map name="myMap1" id="myMap1">
<!-- 按下alt+/ 当你不知道属性的值可以设置什么的时候 -->
<area shape="circle" coords="65,120,20"
href="https://www.baidu.com" alt="提示信息" target="_self" />
</map>
7> 表单标签
表单
<form>用于向服务器提交数据，比如账号密码
① action
action="请求地址" 填写的数据提交给谁？
② method
使用method="get" 提交数据 是常用的提交数据的方式
如果form元素没有提供method属性，默认就是get方式提交数据
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到
使用method="post" 也可以提交数据
post不会在地址栏显示提交的参数
如果要提交二进制数据，比如上传文件，必须采用post方式
get和post的区别
get
是form默认的提交方式
如果通过一个超链访问某个地址，是get方式
如果在地址栏直接输入某个地址，是get方式
提交数据会在浏览器显示出来
不可以用于提交二进制数据，比如上传文件
post
必须在form上通过 method="post" 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据，比如上传文件
文本框
<input type="text"> 即表示文本框
并且只能够输入一行
如果要输入多行
使用文本域<textarea>
注： <input> 标签很特别，一般是不需要写成<input />
并且<input> 这样的写法也是满足标准的
① 设置文本框的长度 使用属性size
② 初始值 value
③ 有背景文字的文本框 使用属性placeholder
④ 若只看不能输入 readonly
<input type="text" size="10" value="有初始值的文本框" placeholder="请输入账号">
密码框
<input type="password"> 即表示密码框
输入的数据会自动显示为星号
单选框
<input type="radio" > 表示单选框
两个单选，都可以同时选中。 为了达到，同一时间，只能选中其一的效果，需要使用分组
分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框
设置name属性相同即可
默认选中 设置checked属性
复选框
<input type="checkbox"> 即表示复选框
一组复选框设置name属性相同即可
默认选中 设置checked属性
下拉框
<select> 即下拉列表
需要配合<option>使用
<select >
<option value="hb">湖北</option>
<option value="hn">湖南</option>
<option value="gz">广州</option>
</select>
① 设置高度 size="值"
② multiple 设置可以多选，使用ctrl或者shift进行多选
③ 默认选中 对option元素设置selected属性
文本域
<textarea> 即文本域
与文本框不同的是，文本域可以有多行，并且可以有滚动条
设置宽度和行数，使用属性cols和rows
<textarea cols="30" rows="8">
123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>
按钮
<input type="button"> 即普通按钮
<input type="submit"> 即为提交按钮
用于提交form，把数据提交到服务端
<input type="reset"> 重置按钮 可以把输入框的改动复原
<input type="image" > 即使用图像作为按钮进行form的提交
<button></button>即按钮标签
与<input type="button">不同的是，<button>标签功能更为丰富
按钮标签里的内容可以是文字也可以是图像
如果button的type="submit" ，那么它就具备提交form的功能
文件上传控件
<input type="file" name="uphoto" id="photo" />
标题的图标
添加到head标签
<link rel="shortcut icon" href="./img/logo.png" type="image/png">
7153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
