前端学习笔记

最新推荐文章于 2024-11-03 12:43:50 发布

原创最新推荐文章于 2024-11-03 12:43:50 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html和css

学习资料专栏收录该内容

3 篇文章

订阅专栏

HTML和CSS基础

&&&HTML
1，html标签
*标题标签<h1></h1>~<h6></h6>
*段落标签<p></p>
*换行标签<br/>
*水平线标签<hr/>
*斜体标签<i></i>
*加粗标签<b></b>
*下标<sub></sub>
*上标<sup></sup>
*下划线<u></u>
*删除线<del></del>
*列表标签

        &无序列表：              <ul>
										<li></li>
								</ul>
		&有序列表：               <ol>
										<li></li>
								</ol>
		&定义列表：               <dl>
										<dt>定义列表项</dt>
										<dd>列表项内容</dd>
								</dl>

*图像标签

<img src="地址路径" />
		  &相对路径：图片与index.html在同一目录下，<img src="1.jpg"/>
						 图片在上一级目录中，<img src="../1.jpg"/>
						 图片在下一级目录中，<img src="文件夹名/1.jpg"/>
		  &绝对路径：<img src="E:/html/image/1.jpg"/>

*超链接标签

<a href="链接地址" terget="目标窗口" title="提示文字" ></a>

2,html表格

标题
列	表头内容居中加粗

&属性：border="1px"; width\align\background-color\cellpadding\cellspacing等。 &表格的头，主体和脚：不影响布局，但可分开加载出来。

表头
主体
注脚

&跨列属性colspan和跨行属性rowspan：

第一行前两列合并，相应删掉一列

第二列前两行合并，相应删掉一行

&表格嵌套：*嵌入的表格必须有完整的表格结构。*必须嵌入在中。

3,html表单

<form>表单元素</form>


 &表单元素添加标签：<input>表单输入 <select>下拉菜单和列表 <option>下拉菜单和列表项目
									<textare>文本域 <optgroup>下拉菜单和列表项目分组

&&&CSS
1, 三种样式：&行内样式：<p style="color:red;"></p>
&嵌入样式：<style>样式</style>
&外部样式：<link href="地址" rel="stylesheet" />
2,选择器：&标签选择器p{color:red;}
&类选择器.red{color:red}
&id选择器#red{color:red;}
&群组选择器：h1,p,h2{color:red;}
&全局选择器:*{coor:red;}
&后代选择器：p a em{color；red;}
3,优先级：ID选择器>类选择器>标签选择器（同类样式多次引用，后定义的优先级高。!important调整样式的优先级为最高）
4，盒子模型
在这里插入图片描述
&display属性：inline\block\inline-block\none;
&float属性：left\right\none
父元素可能会无法检测到子元素的高度，导致塌陷，解决方法：
*手动给父元素添加高度
*通过clear清除内部和外部浮动
5，CSS定位
position属性： relative相对定位 absolute绝对定位