颜色红绿蓝 0~255 十六进制
HTML
-
-
HTML(HyperText Markup Language)：超文本标记语言
-
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
-
标记语言：由标签构成的语言
-
-
HTML 运行在浏览器上，HTML 标签由浏览器来解析
-
HTML 标签都是预定义好的。例如：使用 <img>展示图片
-
W3C 标准：网页主要由三部分组成
-
结构：HTML (编写基本的网页)
-
表现：CSS (美化页面效果)
-
行为：JavaScript (页面有动态效果)
-
HTML文件以 htm 或 html 为后缀
-
标签不区分大小写、建议小写
-
标签中的属性值单引双引都可、建议双引
-
结构标签
标签分类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>THTMl快速入门</title> </head> <body> <!--标题标签--> <h1>1标签 h</h1> <h2>2</h2> <h3>3</h3> <h4>4</h4> <h5>5</h5> <h6>6</h6> <!--水平分割线标签 <hr> --> <hr size="10px" color="######"> <!--<font></font> 字体标签--> <font face="楷体" size="5" color="lime">font 文本标签 青青草原绿油油</font> <hr> <!--<br> 换行标签--> <br> <!--<b> bold 加粗标签--> <b>blod 我变粗了</b> <br> <!-- 倾斜 --> <i>我倾斜了</i> <br> <!--<u></u> underLine 下划线标签--> <u>underline 下划线标签</u> <!--<p></p> 段落标签--> <p>paragraph 段落 首都华盛顿峰会上的开发和对方考虑后果是</p> <center><font color="#ff4500"><b>我怕在中间</b></font></center> </body> </html>
转义标签
有些符号在xml中有定义，所以我们需要用转义字符来代表它们
| 标签 | 作用 | 属性 |
|---|---|---|
| <img> | 图片标签 | src-图片路径 width-宽度 height-高度 title-悬浮显示 alt-图片找不到提示 |
| <audio> | 音频标签 | src-音频路径 controls-音频控件 |
| <video> | 视频标签 | src-视频路径 controls-视频控件 |
路径
绝对路径 完整路径
相对路径 .表示 父目录的全目录（我是这样理解容易记住）./当前目录下
| 标签 | 作用 | 属性 |
|---|---|---|
| <a> | 超链接标签 | href-跳转路径url target-打开方式(_self本页面[默认] _blank新标签页) |
<a href="www.baidu.com" target="_blank"></a>
| 标签 | 作用 | 属性 |
|---|---|---|
| <ol> | 有序列表标签 | type-编号类型(1数字、Aa字母、Ii罗马字符) start-起始位置 |
| <ul> | 无序列表标签 | type-列表样式(disc实心圆、circle空心圆、square实心方块) |
| <li> | 标签项 |
itemLabel unordered listing
<ol type="1" start="100"> <li>网易</li> <li>百度</li> <li>腾讯</li> </ol> <ul> <li>w网易</li> <li>w百度</li> <li>w艾莉</li> </ul>
| 标签 | 作用 | 属性 |
|---|---|---|
| <table> | 表格标签 | border-边框 width-宽度 cellspacing-单元格间距 |
| <tr> | 行标签 | align-对齐方式 |
| <th> | 表头标签(加粗、居中) | |
| <td> | 单元格标签 | ←colspan-合并列 rowspan-合并行 |
| 标签 | 作用 | 属性 |
|---|---|---|
| <div> | 块级标签(自己独占一行、配合css控制布局) | |
| <span> | 行级标签(不换行、配合css控制布局) |
| 标签 | 作用 | 属性 |
|---|---|---|
| <form> | 表单标签(如果数据想要被提交，表单项需要有name属性) |
action-提交路径（URL）#代表把表单的数据提交到当前html页面中 method-提交方式(get或post) autocomplete-是否提示 |
- input 标签
-
<input type="text"/> 普通文本输入框
-
<input type="password"/> 密码输入框
-
<input type="email"/> 邮箱输入框
-
<input type="radio"/> 单选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中
-
<input type="checkbox"/> 多选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中 选中无value on
-
<input type="date"/> 日期框
-
<input type="time"/> 时间框
-
<input type="datetime-local"/> 本地日期时间框
-
<input type="number"/> 数字框
-
<input type="range"/> 滚动条数值框 min-最小值 max-最大值 step-步进值
-
<input type="search"/> 可清除文本框
-
<input type="tel"/> 电话框
-
<input type="url"/> 网址框
-
<input type="file"/> 文件上传框
-
<input type="hidden"/> 隐藏域 value属性设置实际提交的值
-
select 标签
-
列表项标签：<option>
-
列表项分组标签：<optgroup> 属性：label设置分组名称
-
-
textarea文本域
-
rows-行数
-
cols-列数
-
<lable for="username">用户名：</lable> <input type="text"name="username" id="username"/><br>
-
CSS(Cascading Style Sheet)：层叠样式表。用于控制网页表现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css导入方式</title> <!--2. 内部样式，可以影响本文件的标签--> <style> span{ color: blue; } </style> <!--3. 外部样式，可以影响多个文件 href css文件路径 ref文件类型--> <link rel="stylesheet" href="./a.css"> </head> <body> <!--1. 内联样式，只能影响当前标签--> <div style="color: red;font-size: 30px">我是div1</div> <div>我是div2</div> <span>我是span1</span> <span>我是span2</span> <br> <p>我是段落1</p> <p>我是段落2</p> </body> </html>
p{ color: #ff2e51; }
-
选择器的作用：可以选中想要控制样式的标签
-
选择器分类
| 选择器 | 示例 |
|---|---|
| 元素选择器 | 标签名{} |
| id选择器(需要给标签加id属性) | #id属性值{} |
| 类选择器(需要给标签加class属性) | .class属性值{} |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style> /*元素选择器*/ p{ color: red; } /*id选择器*/ #div2{ color: blue; } /*类选择器*/ .sp{ color: pink; } </style> </head> <body> <p>我是一段文字</p> <div>div1</div> <div id="div2">div2</div> <div>div3</div> <span class="sp">span1</span> <br> <span class="sp">span2</span> <br> <span class="sp">span3</span> <br> <span>span3</span> </body> </html>
-
对于样式控制、属于了解内容。详细可查阅文档。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性</title> <style> div{ border: 1px solid red; /*边框*/ background: blue; /*背景色*/ color: white; /*颜色*/ width: 50%; /*宽度*/ height: 30px; /*高度*/ } </style> </head> <body> <div>我是div</div> </body> </html>