HTML学习笔记

最新推荐文章于 2025-05-03 11:16:03 发布

樱花斩落樱

最新推荐文章于 2025-05-03 11:16:03 发布

阅读量186

点赞数

分类专栏：知识点文章标签： html 定位列表 css

本文链接：https://blog.youkuaiyun.com/m031027/article/details/114315578

版权

知识点专栏收录该内容

6 篇文章

订阅专栏

注释：Ctrl+/ 提示作用
保存：Ctrl+s 保存文件
查看文件： Ctrl+r
<title></title> 我是窗口标题
<body></body> 网页的主题部分
<meta charset='utf-8'/> 使用规范
utf国际化使用标准 gb312中文字符
<h1></h1>（最大）------<h6></h6>（最小）文本标题
<p></p>段落标签
<br/>换行标签
<hr/> 水平线
<b></b><strong></strong>加粗字体
<em></em> 倾斜
  空格
© 版权
" 双引号
< 小于号
&gt 大于号
<img/> 图片标签
img标签的属性:
src 图片的链接地址
width 宽
height 高
title鼠标悬浮在图片上显示字体
alt图片无法显示的时候显示字体
<a></a >超链接标签
a标签的属性:
href 超链接地址
targe窗口跳转打开的方式
_blank在新建窗口中打开
_self在本窗口打开
超链接伪类:
a:link 鼠标未访问时
a:visited 鼠标点击后
a:hover 鼠标悬浮时
a:active 鼠标点击未释放时

设置超链接伪类的顺序:link>visited>hover>active

无序列表
<ul>
         <li></li>
          <li></li>
          <li></li>
 </ul>

li 列表项
type是改变列表符号
circle空心原点
disc实心原点
square实心正方形

有序列表
<ol>
           <li></li>
           <li></li>
            <li></li>
</ol>

i是小写的罗马数字
I是大写的罗马数字

定义列表
<dl>
        <dt></dt>标题
         <dd></dd>内容
</dl>声明定义列表

表格

<table>表格的框架
		<tr>表格的行
						<td>表格的列</td>
		</tr>
<table>

border 边框
cellspacing 边框到格子的距离
cellpadding 字到边框的距离
text-align 水平方向:
cente 居中对齐
left 左对齐(默认值)
right 右对齐
valign垂直方向：
top向上对齐
bottom向下对齐
middle居中对挤
bgcolor背景颜色
colspan 跨列 rowspan跨行
<form> </form>表单的框架
method规定如何发送表单数据常用值( get / post )常用post(隐藏密码)
action表示向何处发送表单数据
input 表单的基本元素
type指定表单类型
text 文本框表单
name 表单姓名
password密码框
size 表单的长度
maxlength表单的书写最多字符
radio 单选按钮
checked复选框

vertical align:middle 图文的居中对齐
font-size 字体大小
font-style 字体风格
font-weight 字体粗细
font-family 字体类型
color 字体颜色
text-indent 首行文本缩进
text-shadow 文本阴影

text-decoration 文本装饰
undelrine 下划线 overline 上划线 line-through 中线

<select></select>列表框
<option></option>列表框项 selected="selected"默认选择

<select>
	<option></option>`
	<option></option>
</select>

button 普通按钮
reset 重置按钮
submit 提交按钮
image 图片按钮
<textarea></textarea>多行文本域 cols宽度 rows高度

email 邮箱

<input type="email"/>

url网址

<input type="url"/>

<input type="number" min="0" max="5" step="3"/>数字 step间隙
<input type="range" min="0" max="5" step="3"/>数字域
<input type="search"/>search搜索框

CSS样式(内部样式)
`<style type="text/css">`    CSS样式(内部样式)

行内样式
<p style="color:red";>

外部样式
<link href='' 文件路径.css'' ref="stylesheet" type="text/css"/>

background-color 背景颜色
background-imge 背景图像
background-position 背景定位
background-repeat 背景重复方式
background-size 背景图片尺寸大小

linear-gradient 线性渐变
border：1px solid：red 边框的设置方法
CSS的最后一条声明后的“;"可写可不写，但是，基于W3C标准CSS的最后一条声明后的“;"可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束都要写上

基本选择器的优先级，ID选择器>类选择器>标签选择器

优先级:行内样式>内部样式>外部样式

position:absolute 绝对定位
position:relative 相对定位
position:fixed 固定定位
position:static 默认值,没有定位

相对定位的特性
相对于自己的初始位置来定位元素位置发生偏移后，它原来的位置会被保留下来层级提高，可以把标准文档流中的元素及浮动元素盖在下边相对定位的使用场景.相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设
置偏移量