前端基础HTML --草莓味小企鹅
HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，HTML 不是一种编程语言，是用来描述网页的一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)。
标签
标签分为行级标签和块级标签，标签还可以分为标签对和单标签
- 行级标签（ 不会有自动换行的功能）
<em>斜体标签</em>
<a href=”链接地址” 页面刷新方式 target=”_blank页面弹出一个新的页面 _self 自身刷新出一个页面”>超链接标签</a>
<img src=”图片路径” alt=”链接失效时展示内容” title=”鼠标悬浮展示的说明”> 图片标签
<strong>字体加粗标签</strong>
<span>范围标签</span>- 块级标签（占用一整行，都会带有换行功能）
<div>区域标签</div>
<ul>
<li>无序列表</li>
</ul>
<h> 标题标签 分级h1-h6 h1最大 自带换行 自动加粗</h>
<br> 换行标签
<p> 段落标签 </p>
<hr>水平线标签
<address> 署名标签 -
行级块级转换
display:block; 转换成块级标签 display:inline; 转换成行级标签 display:none; 隐藏元素 -
特殊符号标签（实体）
空格 小于号 <
大于号 > 引号 "
版权符号 ©列表
1：无序列表
<ul type="##"> 声明无序列表
<li></li>
</ul>
<!--
type="square" 前标为方块
type="disc" 前标为实心圆 默认值
type="circle" 前标为空心圆
-->2：有序列表
<ol type="##"> 声明有序列表
<li></li>
<li></li>
<ol>
<!--前标定义为1，a，A,（字母大小写）i,I,（罗马数字大小写）默认为数字-->3：自定义列表
<dl> <!--声明一个自定义列表-->
<dt>标题</dt>
<dd>内容项</dd>
<dd>内容项</dd>
<dd>内容项</dd>
</dl>表格
表格 使用原因：简单通用 结构固定 三要素:行 列 单元格
标签使用形式：
<table>
<tr>
<td></td> <!--表头自动加粗将td改成th-->
</tr>
</table>表格属性:
Border=”1 ”表格边框
width=”100px/50%”表格宽度 像素 占全部的宽度的百分比
cellpadding="10" 单元格内容和单元格 边框的距离
cellspacing="10" 单元格边框和外边框的距离
bgcolor 背景颜色
colspan 跨列 得删除被跨的那一单元格东西
rowspan 跨行 得删除被跨的那一单元格东西
align (left左 center居中 right右) 居中 水平居中
valign(top上 middle中 bottom下) 垂直居中
表单
from表单
隐藏域：hidden 使用范围：需要向服务器传递数据但是不能显示
特殊的表单状态： 禁用状态：disabled="disabled" 只读状态：readonly="readonly"
<form action="数据提交地址" method="数据的提交方式get/post"><!--声明一个表单-->
<p><label for=”us”>用户:<input type="text" placeholder=”请输入用户名’ id=”us”> <!--input 文本框placeholder可以默认写字 当输入框字体发生改变就会自动消失 label可以和input连用 点击用户input框会有效果-->
<p>密码:<input type="password"><!--密码框输入变* -->
<p>重置<input type="reset" value=""><!--重置，可以在value里面设置文字 -->
<p>提交<input type="submit"></p><!-- 提交，可以在value设置文字 -->
<!---->
<p>普通按钮 <input type="button"></p>
<p>图片按钮<input type="image" src="#" width="50px" height="20px"></p>
<p>性别:
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked="checked">女
</p>
<!--单选框 (name必须一致) checked="checked" 表示为未选择时候的默认值 -->
<input type=”file”><!--文件-->
<p>爱好:
<input type="checkbox" name="ck" value="篮球">电影
<input type="checkbox" name="ck" value="打代码">打代码
<input type="checkbox" name="ck" value="美剧">美剧
<input type="checkbox" name="ck" value="小说">小说
<input type="checkbox" name="ck" value="韩剧">韩剧
<input type="checkbox" name="ck" value="吃饭">吃饭
</p> <!--多选框-->
<p>生日:
<select>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>年
</p><!--下拉列表-->
<p>
<textarea rows=”20” cols=”5”></textarea>
</p><!--多行文本域 cols是一行多少字 rows行数-->
<p>
<input type="file">
</p> <!--文件上传-->一些其他标签
- meta标签
<head>
<meta charset="UTF-8">
<!-- meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon"> description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
<!--
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
将页面重定向到另一个网站
-->
<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
-->
<title>Document</title>
</head>- 语义化标签
<!--nav自定义导航连接-->
<nav>
<a href="#">首页</a>
<a href="#">娱乐</a>
<a href="#">电影</a>
<a href="#">电视剧</a>
</nav>
<!--section区段标签，用于定义一段专题性的内容-->
<section>
<h1>文章标题</h1>
<p>文章内容</p>
<p>文章内容</p>
</section>
<!--article文章标签，用于定义一整篇完整的内容-->
<article>
<h1>文章标题</h1>
<p>文章内容</p>
<footer>
<P>页脚</P>
</footer>
</article>- 超链接标签
<!--
target属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的要么中打开超链接
-->
<a href="07.列表.html" target="_self">超链接</a>- 图片标签
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示 ，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素)
height 图片的高度 - 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图 ，一般用来显示照片
gif 支持的颜色比较少，支持简单透明，支持动图 颜色单一的图片，动图
png 支持的颜色丰富，支持复杂透明，不支持动图 颜色丰富，复杂透明图片（专为网页而生）
webp 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 它具备其他图片格式的所有优点，而且文件还特别的小 缺点：兼容性不好
base64 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的，效果不一样，用效果好的
-->- 内联框架
<body>
<!--
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe> <h1>Hello</h1>
</body>- 音视频标签
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放 如果设置了autoplay 则音乐在打开页面时会自动播放
loop 音乐是否循环播放
-->
<!-- <audio src="./source/audio.mp3" controls autoplay loop></audio> -->
<!-- <audio src="./source/audio.mp3" controls></audio> -->
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
<!--
使用video标签来向网页中引入一个视频 使用方式和audio基本上是一样的
-->
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
</body>