前端

最新推荐文章于 2024-10-04 22:04:56 发布

͝͝͝͝͝͝͝͝͝͝L Y H

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量206

点赞数

分类专栏：前端笔记文章标签： html css

本文链接：https://blog.csdn.net/Bankofli/article/details/108943873

版权

前端笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习网站

百度 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":当前窗口/新窗口打开

特殊字符

空格符:&nbsp;
小于号:&lt;
大于号:&gt
&号:&amp
人民币:&yen
版权:&copy;
注册商标:&reg;
摄氏度:&deg;
正负号:&plusmn;
乘号:&times
除号:&divide;
平方:&sup2;
立方:&sup3;

表格-展示显示数据

<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{样式声明}