（本篇博文为博主观看教学视频时整理笔记所得，视频链接为：https://ke.qq.com/course/238423）
【html简介】
- html指的是超文本标记语言（Hyper Text Makeup Language）
- html是专门写给浏览器看的一门语言
- 它不是编程语言
- html的作用，是负责网页的结构和排版，对网页中的信息进行控制。
【html标签的语法】
1.html标签要求所有的html语言在标签里面<尖括号>
2.html标签是成对出现的，并且区分首尾，在尾标签添加：/
【网页的基本结构】
网页的基本结构由4对标签组成：
html——表示网页的整体
head——表示网页的头部，它里面的内容都是设置给浏览器看的；
body——表示网页的主题，是网页的显示区域，要展示给用户看的内容；
title——表示网页的标题，需要写在head里面。
【html标签】（写在body里面的）
- h——标题标签，有1-6级，h1最大，h6最小。
- p——段落标签，它会将内部的信息编译成为一个段落
【文字控制标签】
简介：在文字控制中，对文字的控制最常用的是修改文字颜色，文字字号，文字的字体；这些需要都是通过一个标签来控制：font，使用方式是：修改哪部分文字就用font选中，然后修改它的标签属性。
- 标签属性采用键值对的基本格式，多个属性之间通过空格隔开；
- 标签属性的基本结构：K="v" ， 例如：color="red"
- 键值对翻译过来就是：什么是什么的意思；
- 标签属性的作用是设置标签的相关信息：
font标签的文字控制三属性：
size——字号大小，有限制，最大是7，最小是1.
color——颜色，值可以是颜色值，也可以是英文名称。
face——字体
【水平分割线】
<hr />
hr表示水平分割线，它是一个单标签，因为不需要选中其中的任何信息；
标签属性：
width——宽度
size——粗细大小；没有限制
color——颜色
align——水平对其方式，值有三个：left, center, right
注意事项：标签中有哪些属性都是规定不能乱加的；段落和标题（<p></p>,<h1></h1>）标签接受align属性；
【body的属性】
- bgcolor——背景颜色；
- background——背景图；
注意事项：在web前端标准中，背景图永远是在背景颜色的上面。
【bui标签和空格换行】
- b ——加粗
- u ——下滑
- i ——倾斜
- 空格的特殊字符： ；（在dw中的快捷键：ctrl+shift+space）
- 换行标签：<br/> dw中的快捷键：shift+enter
【图片控制标签】
简介：图片控制都是通过img标签控制
img标签属性：
src——表示图片的路径；必备属性；
width——图片的宽度；
height——图片的高度；
border——边框；
title——鼠标移上去显示的提示文本，也就是图片的标题
alt——当图片不能正常显示时的替换文本
注意事项：img标签实现等比例缩放的方法是只设置宽高其中一个值，另外一个值由计算机自动计算。
（插入图片的快捷键：ctrl+alt+I)
【列表】
【无序列表】
- 基本结构：ul > li（嵌套关系）
- ul：表示列表的整体
- li：表示列表项
- 标签属性：type
type ——作用是控制列表样式：
circle——小圆圈
disc——小圆点
square——小方块
【有序列表】
- 基本结构：ol > li
- 列表样式：1，a，A,i,I
如：
<h3><font color="#F0090D" size="5" face="宋体">数据库的基本特征</font></h3>
<ol type="i">
<li>数据按一定的数据模型组织、描述和存储。</li>
<li>可为各种用户共享、冗余度较小、易扩展。</li>
<li>数据独立性较高。</li>
</ol>效果：
【项目列表（自定义列表）】
- 基本结构：dl > dt+dd （+ 表并列）
- dl——表示项目列表的整体
- dt——表示项目/标题
- dd——表示详情/描述
注意事项：项目列表中可以有多个dt和dd，也可以一个dt多个dd修饰。
例如：
<dl>
<dt>今天吃什么？</dt>
<dd>胡萝卜</dd>
<dd>马铃薯</dd>
<dd>洋葱</dd>
<dd>牛肉</dd>
<dt>早餐</dt>
<dd>牛奶</dd>
<dd>面包</dd>
<dt>午餐</dt>
<dd>米饭</dd>
<dd>鱼</dd>
</dl>效果图：
【相对路径】
- 简介：相对路径指的是查找文件的一种关系，它的原理是从文件自身出发去查找目标文件。
相对路径的三种查找方式：
- 同级查找：直接写文件名即可找到，例如：<img src="pic.jpg" />
- 向下查找：写文件夹名称、文件名称；例如：<img src="img/pic.jpg" /> /
- 向上查找：通过../表示向上一级，例如：<img src="../pic.jpg" /> ../
总结：无论是那种查找方式都需要写全文件名称，注意后缀；要求以后的网页书写路径都采取相对路径。
相对路径的要求：
1.相对路径不能跨盘符查找；
2.相对路径的过程不能有中文。
【超链接标签】
- 超链接标签通过a表示，它有一个必备的属性是href，作用是用来设置跳转的路径；
<a href="https://blog.youkuaiyun.com/routing666">芥末的博客</a> <br /> <br /> <a href="相对路径.html">打开本地的文件</a> - 假链接的设置方式：1、# 2、javascript:;
<a href="#">假链接</a> <br /> <br /> <a href="javascript:;">假链接</a>"#"和"javascript:;"的区别：点击由"#"生成的假链接时会回到网页顶部，"javascript:;"不会。
- 新建窗口打开超链接：target="_blank"
<a href="https://blog.youkuaiyun.com/routing666" target="_blank">芥末的博客</a>
【表格】 - 基本结构：table > tr > td
table——表示表格的整体；
tr——决定行数,成行管理
td——决定列数，表示一个单元格；<h3>四行三列</h3> <table border="1"> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> </table>
-
table的属性：
border——设置表格边框
width——表格宽度
height——表格高度
cellspacing——表格各单元格之间的距离
cellpadding——单元格边界与内容之间的距离。与文本之间的间距（最好在不制定宽度的时候去测试）
align——表格在网页中的对齐方式
bgcolor——背景颜色
background——背景图片
<h3>四行三列</h3> <table border="1" cellpadding="10"> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> </table>
<table border="1" cellspacing="10">
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
</table>
<table border="1" width="500" height="500" align="center">
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
</table>
总结：表格的尺寸有另种类型：一种是自然尺寸，也就是跟内容有关，另一种是认为的属性。
tr的属性：
- bgcolor——设置行的背景颜色
- valign——设置一行中单元格垂直对齐方式
- height——高度（注意无宽度，因为宽度由table决定)
- align——对齐
- background——背景图；注意次属性不支持，兼容性问题严重。
tr主要注意，多了一个valign属性。background有兼容性问题，不能设置背景图；
td的属性：bgcolor, background, align, valign, width, height
<table border="1" width="500" height="500">
<tr align="center">
<td>单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr>
<td align="center">单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr valign="top">
<td align="right">单元格</td><td>单元格</td><td>单元格</td>
</tr>
<tr height="300">
<td bgcolor="yellow">单元格</td><td>单元格</td><td>单元格</td>
</tr>
</table>
【细线表格】
- 细线表格的原理在于设置两次背景颜色。它的边框并不是border设置出来的，而是单元格之间调出来的背景颜色。
制作步骤：
- 设置table的背景颜色（边框颜色）
- 设置td的背景颜色，设置tr则调整整行变色；
- 设置cellspacing="1",作用是设置边框的粗细。
如：
<table bgcolor="red" width="500">
<tr bgcolor="#FFF"><td>1,1</td><td>1,2</td><td>1,3</td></tr>
<tr bgcolor="#fff"><td>2,1</td><td>2,2</td><td>2,3</td></tr>
<tr bgcolor="#fff"><td>3,1</td><td>3,2</td><td>3,3</td></tr>
</table>效果：
注意：如果只是设置cellsapcing="0"，只是两个边框重合，如：
<table border="1" cellspacing="0" width="500">
<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
<tr><td>3,1</td><td>3,2</td><td>3,3</td></tr>
</table>效果：
【表格的其它标签】
- caption标签：作用是设置表格的标签；注意事项：caption标签必须要写在table标签内部；
- th标签：作用是表示每一列的标题，带有居中和加粗效果。
注意事项：在表格中有两种单元格，一种是td存放普通的数据，一种是th存放列标题数据。
如：
<table align="center" bgcolor="#E4E4E4" width="500" cellspacing="1" height="150">
<caption><h3>电脑配件排名</h3></caption>
<tr bgcolor="#f1f1f1"><th>排名</th><th>产品名称</th><th>季度对比</th><th>同比增长</th><th>相关链接</th></tr>
<tr bgcolor="white"><td></td><td></td><td></td><td></td><td></td></tr>
<tr bgcolor="white"><td></td><td></td><td></td><td></td><td></td></tr>
<tr bgcolor="white"><td></td><td></td><td></td><td></td><td></td></tr>
<tr bgcolor="white"><td></td><td></td><td></td><td></td><td></td></tr>
</table>
【表格数据分组】
简介：表格主要作用就是用来处理数据，它可以将内部的数据进行分组，分成三大部分：表格头部，表格主体，表格底部。
- 表格头部：thead > tr > th
- 表格主体：tbody > tr > td
- 表格底部：tfoot >tr > td
如：
<table width="200" bgcolor="#BBBBBB">
<thead bgcolor="#c1c1c1">
<tr>
<th>星期</th>
<th>费用</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr align="center" bgcolor="#fff">
<td>一</td>
<td>100</td>
<td>零食</td>
</tr>
<tr align="center" bgcolor="#fff">
<td>二</td>
<td>200</td>
<td>衣服</td>
</tr>
<tr align="center" bgcolor="#fff">
<td>三</td>
<td>300</td>
<td>化妆品</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white" align="center">
<td>总计</td>
<td>600</td>
<td> </td>
</tr>
</tfoot>
</table>
【单元格的合并】
在table中单元格的合并是通过设计视图的属性面板进行快速合并，属性面板的快捷键是：ctrl+f3
【表单元素】
- 简介：在html中标签、标记、元素、节点——指的都是标签。
- 什么是表单？表单是一类特殊的标签，它是由用户来操作的一类标签；跟用户发生交互这类标签都可以称之为表单元素，例如：按钮，下拉菜单，输入框等。
【下拉菜单标签】
基本结构：select > option:
- select：表示整体；
- option：表示下拉项；
默认被选中的设置方式：<option selected="selected">
(没有设置时默认选第一项）
<select>
<option>-请选择-</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>宁夏</option>
</select>
【form标签】
- form标签表示表单整体，它具有发送功能，作用是将其内部表单元素收集到的数据发送到后台服务器；它有一个必备的属性：action，作用是设置后台发送地址。（一般留空给后台人员设置）
【表单分组标签】
fieldset > legend
fieldset 作用是将表单元素进行分组，并且产生一个边框效果；跟它配合使用的一个标签是legend，作用是设置组的标题。
【lable标签】
lable标签是一个提高用户体验的标签，将说明文字和表单选中，可以实现点击文字选中表单元素的作用。
【文本域标签】
textarea标签 表示文本域标签，作用是输入大段文本。
【input标签】
input标签是表单元素的核心，它有9个不同的类型，通过type属性进行设置，
它的值有：
- text——文本输入框；
- password——密码输入框；
- submit——提交表单按钮；
- reset——重置表单按钮；
- radio——单选框按钮
- checkbox——复选框按钮
- file——上传文件组件；
- botton——普通按钮
- image——图片按钮，必须设置src属性，作用是引入图片。
注意事项：
默认带有文字的按钮可以通过value属性进行修改；
单选框按钮成为真正单选的设置方法是：将单选按钮都设置为同一个name属性值；
设置单选框复选默认被选中状态的属性是：checked="checked".
<form action="">
<fieldset>
<legend>注册页面</legend>
<label>账号：<input type="text" /></label>
<br /><br />
<label>密码：<input type="password" /></label>
<br /><br />
<input type="submit" value="确定" />
<input type="reset" value="重填" />
</fieldset>
</form>
<form action="">
<fieldset>
<legend>注册页面</legend>
性别：男 <input type="radio" name="sex" checked="checked" > 女<input type="radio" name="sex" /> 保密<input type="radio" name="sex" />
<br />
<br />
上传头像：<input type="file" />
<br />
<br />
我的爱好： 篮球<input type="checkbox" /> 唱歌<input type="checkbox" /> 跳舞<input type="checkbox" />
<br />
<br />
自我介绍<br />
<br />
<textarea></textarea>
<br />
<br />
<input type="submit" value="注册" />
<input type="reset" value="重填" />
<input type="button" value="普通按钮" />
<input type="image" src="01.png" />
</fieldset>
</form>
扫一扫
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
