学习网站
百度 w3c https://developer.moz illa.org/zh-CN/
html
基本结构标签
html标签 :页面中最大的标签,我们称之为根标签
head :文档的头部,注意head标签中,我们必须设置的标签是title
title :文档的标题,让页面拥有一个属于自己的网页标题
body :文档的主体,元素包含文档的所有内容,页面内容,基本都是放到body里面的
常用标签
段落标签:<p>...</p>
换行标签:<br/>
文本格式化,推荐第一组
加粗:<strong>...</strong> 或 <b></b>
倾斜:<em>...</em> 或 <i></i>
删除线:<del></del> 或 <s></s>
下划线:<ins>...</ins> 或 <u></u>
<div></div>:大盒子
<span></span>:小盒子
<img src="url图片" />
属性:src:图片路径 (必须属性)
alt:文本 (替换文本,图片不能显示的文字)
title:文本 (提示文字,鼠标放到图片上显示的文字)
width:像素 (设置图像的宽度)
height:像素 (设置图像的高度)
border:像素 (设置图像的边框粗细)
超链接:<a> <a herf="跳转目标" targer="目标窗口的弹出方式">文本或图像</a> rarget="_self"或"_blank":当前窗口/新窗口打开
特殊字符
空格符:
小于号:<
大于号:>
&号:&
人民币:¥
版权:©
注册商标:®
摄氏度:°
正负号:±
乘号:×
除号:÷
平方:²
立方:³
表格-展示显示数据
<table>
<tr> //行
<td>单元格内的文字</td> //单元格 表头单元格用<th></th>
</tr>
</table>
<table>
<thead>表头部分</thead>
<tbody>主体部分</tbody>
</table>
属性 属性值 描述 属性要写在table里面去
align left,center,right 规定表格相对周围元素的对对齐方式
border 1或"" 规定表格单元是否拥有边框,默认为"",表示没有边框
cellpadding 像素值 规定单元边缘与其内容之间的空白,默认1像素
cellspacing 像素值 规定单元格之间的空白,默认2像素
width 像素值或百分比 规定表格的宽度
合并单元格
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan = "合并单元格的个数"
步骤:
1.判断跨行还是跨列
2.左上原则,找到目标单元格,写代码
3.多余的单元格删除
列表标签
无序列表 ul/ol里面只能放li标签 li里面可以放任何标签
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
自定义列表
<dl>
<dt></dt> dd是对dt进行解释说明的
<dd></dd>
</dl>
表单标签
组成:表单域,表单控件,提示信息
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
属性 属性值 作用
acction url地址 用于指定接收并处理表单数据地服务器程序地url地址
method get/post 用于设置表单数据地提交方式
name 名称 用于指定表单名称,以区分同一个页面中地多个表单域
input表单元素
type属性必须写 name属性 value属性 单选框和复选框必须是相同的name值 checked属性:checked="checked"默认被选中 maxlength属性:最大字符数
<form>
用户名:<input type="text" name="username" value="请输入用户名">
密码:<input type="password">
性别:男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 人妖<input type="radio" name="sex"> 单选框
爱好:吃饭<input type="checkbox"> 复选框
</form>
type属性的属性值:
button :定义可点击按钮(多数情况下,用于通过javascript启动脚本)
checkbox :定义复选框
file :定义输入字段和"浏览"按钮,供文件上传
hidden :定义隐藏的输入字段
image :定义图像形式的提交按钮
password :定义密码字段
radio :定义当选按钮
reset :定义重置按钮.重置按钮会清除表单中所有的数据
submit :定义提交按钮.提交按钮会把表单数据发送到服务器
text :定义单行的输入字段
<lable>标签
lable标签用于绑定一个表单元素,当点击lable标签内的文本时,浏览器会自动将光标转到或者选择对应的表单元素上,用来增加用户体验
<lable for="sex">男</lable>
<input type="radio" name="sex" id="sex" />
lable标签的for属性应当与相关元素的id属性相同
<lable for="sex">用户名:<lable><input type="radio" id="sex" />
select 表单元素 定义selected="selected"属性,默认选中
<select>
<option>表单1</option>
</select>
<textarea>标签 文本域 属性:cols="50" 一行多少字,rows是能写多少行
css
选择器{样式}
选择器分类
选择器分为基础选择器和复合选择器两大类
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器,类选择器,id选择器,通配符选择器
类命名规范
类选择器
多类名选择器
<div class="box red">红色</div> 减少冗余,多用性
通配符选择器
* {
属性1: 属性值1;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dadp5UcS-1601989853405)(C:\Users\15188\AppData\Roaming\Typora\typora-user-images\image-20201006115750812.png)]
css字体属性
字体
p {
font-family: ‘Times New Roman’, Times, aerif; 这是三种字体,如果电脑没有下载字体会遍历对应这三种字体
font-size: 20px; 字体大小
font-weight: 700 700变粗,400正常
}
p {
font-style: normal; 字体正常 italic 斜体
}
<em></em> 或 <i></i> 字体倾斜的标签
复合属性:
div {
#font: font-style font-weight font-size/line-height font-family; 顺序不能变
font: italic 700 16px 'Microsoft yahei';
}
字体颜色
div {
color: deeppink; 或 color: #ccooff; 或 color: rgb(255,0,0); 预定义 十六进制 rgb
}
文本属性
text-align:水平对齐
h1 {
text-align: center; 居中 right右
}
行间距
line-height
上边距 + 下边距 + 字体高度
装饰文本
text-decoration
div {
text-decoration: underline;
}
属性值:
none:默认,没有装饰线
underline:下划线
overline:上划线
line-through:删除线
文本缩进
文本的第一行缩进xx像素
p {
text-indent: 20px; 或 2em 两个文字的大小距离
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CBUD4obk-1601989853407)(C:\Users\15188\AppData\Roaming\Typora\typora-user-images\image-20201006154609964.png)]
嵌入 内部 外部样式表
index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>来快活吧</div>
</body>
style.css
div {
color: pink;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLsgYGJj-1601989853408)(C:\Users\15188\AppData\Roaming\Typora\typora-user-images\image-20201006160017433.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t6RgoswU-1601989853410)(C:\Users\15188\AppData\Roaming\Typora\typora-user-images\image-20201006162608566.png)]
shift + alt + f 格式化代码
后代选择器
ol li {
color: red;
}
子选择器
div > p {
color: pink;
}
并集选择器
元素1， 元素2 {样式声明}
ul,
div{样式声明}
r: pink; }
[外链图片转存中...(img-uLsgYGJj-1601989853408)]
[外链图片转存中...(img-t6RgoswU-1601989853410)]
shift + alt + f 格式化代码
#### 后代选择器
ol li { color: red; }
#### 子选择器
div > p { color: pink; }
#### 并集选择器
元素1， 元素2 {样式声明}
ul,
div{样式声明}
