html&css

颜色红绿蓝 0~255 十六进制

HTML

HTML 是一门标记语言，大部分的网页都是用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中有定义，所以我们需要用转义字符来代表它们

图片音频视频标签

px像素

50%占父元素百分之五十

标签	作用	属性
<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>

表格标签

标签分类 column列 row行

标签	作用	属性
<table>	表格标签	border-边框 width-宽度 cellspacing-单元格间距
<tr>	行标签	align-对齐方式
<th>	表头标签(加粗、居中)
<td>	单元格标签	←colspan-合并列 rowspan-合并行

布局标签

标签分类

标签	作用	属性
<div>	块级标签(自己独占一行、配合css控制布局)
<span>	行级标签(不换行、配合css控制布局)

表单标签

标签分类 get方式 url中数据最大为4kb post http请求体中，大小无限制

标签	作用	属性
<form>	表单标签(如果数据想要被提交，表单项需要有name属性)	action-提交路径（URL）#代表把表单的数据提交到当前html页面中 method-提交方式(get或post) autocomplete-是否提示

标签

作用

属性

<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简介

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;
}

CSS选择器

选择器的作用：可以选中想要控制样式的标签
选择器分类

选择器	示例
元素选择器	标签名{}
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>

CSS属性

对于样式控制、属于了解内容。详细可查阅文档。

<!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>