前端开发【第1篇：HTML】
HTML初识
1、什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
- 你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。
- 浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户
2、网页的组成
我们平时看到的网页一般由3个部分组成：
- HTML（Hypertext Markup Language）
- CSS（Cascade Style Sheets）
- JavaScript
上面3个分别可以理解为：视图、表现、行为(HTML可以理解为一个动画小人，CSS为它穿上美丽的衣服，JavaScript让它变的可以跳舞）
HTML页面
head
1、页面编码
<meta charset="UTF-8">
2、设置刷新时间和页面跳转
<!-- 设置页面每5秒刷新一次 -->
<meta http-equiv="refresh" content="5">
<!-- 设置进入到当前页面1秒后,跳转到指定的Url-->
<meta http-equiv="refresh" Content="1;Url=https://www.cnblogs.com/zhouxiaoming123/" />
3、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如搜狗：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。
<!-- 关键字设定 --> <meta name="keywords" content="博客,HTML博客">
4、描述
<!-- 描述网站或页面 --> <meta name="description" content="描述性内容:这是一个测试页面">
5、title
<!-- 网页头部标题 --> <title>Title</title>
6、style
一般建议css放在head中不管是引用还是直接在当前页面定义css,因为页面加载自上而下
<!-- 引入CSS样式文件 --> <link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <!-- 在当前页面写入CSS样式 --> <style> .class-shuaige{ color:red; } </style>
7、JavaScript
一般建议放到body里面,当然这也不是绝对的,根据实际需要来吧
<!-- 引入外部JavaScript文件 --> <script src="/statics/assets/scripts/flatpickr.min.js"></script> <!-- 在当前页面定义JavaScript --> <script type="application/javascript"> console.log("Hello World") </script>
body
body是内容的存放地
HTML常用标签
标签分类
HTML中的标签分为两类：块级标签和内联标签
块级标签：
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行
- 元素的高度、宽度、行高以及顶和底边距都可设置
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
内联标签：根据实际使用的大小展示
- 和其他元素都在一行上
- 元素的高度、宽度、行高及顶部和底部边距不可设置；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。
如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。
例子：
<!--在这里写内容,且这是html中的注释--> <div style="color:green; " >这是块级标签</div> <!-- 定义内联标签,这里定义内联标签的高度属性样式无效 --> <span style="height: 100px;color:blueviolet">这是内联标签</span>
常用标签
1、p标签和br标签
每一个P标签是独立的一行它是块级标签,<br/>的作用是换行
<p>每一个P标签包含的内容是独立的一行</p>
<p>每一个P标签包含的内容是独立的一行</p>
<p>每一个P标签包含的内容<br>是独立的一行</p>
2、a标签
它有两个作用：跳转和锚点[跳转或者设定锚点]
<div> <!-- a标签跳转,在当前页打开a标签内的Url --> <a href="https://www.cnblogs.com/zhouxiaoming123/">我的博客</a> <!-- a标签跳转,在新的页打开a标签内的Url.默认target=_self --> <a target="_blank" href="https://www.cnblogs.com/zhouxiaoming123/">我的博客</a> </div> <!-- 跳转至锚点标签 --> <a href="#anchor">destination</a> <div style="height: 1000px"> 为了达到跳转效果在跳转点和锚点之间加了1个1000px的块级标签</div> <!-- 定义锚点标签/这个锚点也可以是id="anchor"--> <a name="anchor">destination is here!!!</a>
3、H标签
即标题标签,代码如下
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
4、select标签
select标签:title属性和默认选中
<!-- 这里默认是成都因为selected="selected" 这里设置了默认的！ select标签中title属性的作用就是当鼠标移动到select标签上后的提示 并且一般我们的select/input/file/textarea 等标签都会在使用的时候放到form标签中 --> <select title="地名选择"> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">成都</option> </select>
select标签：size属性-展示几个元
select标签：multiple属性-多选
在不同操作系统中，选择多个选项的差异：
-
- 对于 windows：按住 Ctrl 按钮来选择多个选项
- 对于 Mac：按住 command 按钮来选择多个选项
由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。
提示：可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。
<select title="地名选择" multiple="multiple" > <option value="1">上海</option> <option value="2">北京</option> <option value="2">广东</option> <option value="4">江苏</option> <option value="5">成都</option> </select>
select标签：label属性-分组
<select title="地名选择"> <optgroup label="四川省"> <option>成都</option> <option>宜宾</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遥</option> </optgroup> </select>
5、input标签
input:checkbox标签-复选框
<p> 用户爱好：吃 <input type="checkbox" name="chkhobby" value="吃" checked> 喝 <input type="checkbox" name="chkhobby" value="喝"> 玩 <input type="checkbox" name="chkhobox" value="玩"> 乐 <input type="checkbox" name="chkhobox" value="乐" checked> </p> <!--这里加一个标识checked="checked，为默认选择"-->
input:radio标签-单选框
<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥一般用在给用户几个选项用户单选--> <p> 用户性别： <input type="radio" name="sexrdo" value="男">男 <input type="radio" name="sexrdo" value="女" checked=''>女 </p>
input:text普通文本框 & password 密码输入框
<!--标准的输入框--> <input title="普通文本框" type="text"/> <!--密码的输入框（输入的内容是保密的）--> <input title="密码输入框" type="password"/>
input:button 普通按钮& submit 表单提交按钮
<!-- 普通的按钮 disabled属性有值就禁用该按钮--> <input type="button" value="普通按钮"/> <!-- 用来提交表单的按钮,一般放在form表单里面 --> <input type="submit" value="表单提交按钮"/>
从表现形式上来看他们很像，但是从功能上来区分他们功能不同
file标签-用来提交文件时使用
<input type="file"/>
效果图如下:
6、多行文本框
<textarea style="height: 100px;width: 100px;"></textarea>
效果图如下：
7、form表单
<form action="http://www.baidu.com" method="get"> <!-- input --> <!--文本框--> <p> 用户名称： <input type="text" name="txtUsename" value="请输入用户名称" readonly> </p> <p> 用户密码： <input type="password" name="txtUsepwd"> </p> <p> 确认密码： <input type="password" name="txtcfmpwd" disabled> </p> <!-- 按钮 --> <p> <input type="submit" name="btnsbt" value="提交"> <input type="reset" name="btnrst" value="重置"> <input type="button" name="btnbtn" value="普通按钮"> </p> </form>
效果图如下：
8、label标签
有一种情况，看下图，在不使用label标签的时候，我们只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好：
代码如下：
<div>
<h1>Label标签</h1>
姓名:<input type="text"/>
婚否:<input type="checkbox"/>
</div>
使用label标签，代码如下：
<div> <label for="name_1"> 姓名: <input id="name_1" type="text"/> </label> <label for="name_2"> 婚否:<input id="name_2" type="checkbox"/> </label> </div>
显示效果，这里我选择文字的时候也会进入到相应的框体，他类似一个跳转：
9、列表 ul/ol/dl
ul列表在前面自动加“点”，代码如下：
<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>
效果如下：
ol列表在前面自动加“数字”，代码如下：
<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>
效果如下：
dl列表自动分组，代码如下：
<dl> <dt>河北省</dt> <!--dt是标签，dd是标签里的内容--> <dd>石家庄</dd> <dd>衡水市</dd> <dt>山东省</dt> <!--dt是标签，dd是标签里的内容--> <dd>济南市</dd> <dd>烟台市</dd> </dl>
效果如下图：
10、表格
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)<div class="table"> <table border="1" cellspacing="0"> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主体--> <tbody> <!--表格行--> <tr> <td rowspan="3">上午</td> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <td rowspan ="2">下午</td> <!--表格列，【注意】这里使用的是td--> <td >语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="6">课程表</td> </tr> </tfoot> </table> </div>
标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input>
块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
注意
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。
标签嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌
块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
