HTML，CSS实训笔记

来源：互联网发布：该怎样正确使用网络编辑：程序博客网时间：2024/06/17 12:11

HTML笔记

1、HTML -- 超文本标记语言

2、html 结构
<!doctype html>(代表H5)
<html>
<head>
<title></title>
</head>

<body>
</body>
</html>

3、常用标签
3.1、块级标签
特点：独占一行，前后会主动换行
标题标签(h1--h6)
段落标签(p)
水平线(<hr/>)
有序列表
<ol>
<li></li>(多个)
</ol>
无序列表
<ul>
<li></li>(多个)
</ul>
div -- 主要用于分区
3.2、行级标签
特点：按行逐一显示，不会自动换行
文本类的
加粗(b)
斜体(i)
强调(em)
粗体(strong)
小号字体(small)
下标(sub)
上标(sup)
文本显示方向(bdo 属性：dir)
超链接
<a href="链接地址" target="_self/_blank">文本/图片</a>

图片
<img src="图片的地址" alt="提示文字"/>

span标签--包裹特殊文字
换行 <br/>
空格：能够识别一个空格，如果多个，使用 
版权：©
4、form表单
<form action="表单提交的地址" method="提交方式：get/post">
表单元素
<input type="???" />
type = "text" 文本框
type = "password" 密码框
type = "radio" 单选框 -- 同一组的单选框，name要一样
type = "checkbox" 多选框-- 同一组的多选框，name要一样
type = "submit" 提交按钮可以通过value属性修改显示的内容
type = "reset" 重置按钮可以通过value属性修改显示的内容

</form>

CSS笔记

一、HTML和CSS的区分
HTML---负责的是页面的内容
CSS----负责的是页面的样式(颜色、字体、位置、动画)
二、
那么html跟css如何建立关联
引入CSS样式，提供了3中方式
1、行内样式(知道即可，不推荐使用)
格式：写在标签里边，通过style属性
eg:<p style="...."></p>
2、内部样式(近两天会使用到，以后就不建议使用了)
格式：写在head里，通过style标签
eg:<style>
a{
color:red;
}
</style>
3、外部样式(推荐使用这种方式，以后就用这种方式)
格式：html和css分离，是不同的文件，使用的时候要引入进来
eg:① <link href="css文件的地址">(较常使用)
②<style>
@import "css文件地址"
</style>

三、修改样式
首先你要明确对谁进行修改，找到它，然后修改就可以
怎么找到你要修改的元素啊？
同样提供了3种方式
第一种：元素选择器(HTML中的标签名)
p{
属性名：值;
}
特点：适用于所有的p元素,范围比较广

第二种：类选择器
.类名{
属性名：值;
}
特点：比元素选择器精准
eg: <p class="one"></p>

第三种：id选择器
#id名{
属性名：值;
}
特点：更为精准，能够找到唯一的那个元素
eg:<span id="one"></span>

第四种：通配符(适用于所有的元素，慎用)
*{
padding:0;
margin:0;
取消标签默认的一些内边距和外边距
}

4、修改样式
字体类修改
color
font-family
font-style
font-size
font-weight
text-decoration
text-indent
text-align
text-transform
line-height
letter-spacing
word-spacing
边框
border-style
border-color
border-width
以上三条都可以简写：border：solid 1px red;

border-top、bottom、left、right

border-radius 边框弧度
border-radius:10px
border-radius:100% 圆形

可以使用border画一个三角形

背景：
background-color
background-image:url("图片地址");
background-repeat:repeat、repeat-x、repeat-y、no-repeat
backgroung-position: 10px 20px 第一个值距离左边的像素值，第二个距离上边的像素值
以上三条可以简写
background:url("图片地址") no-repeat center;

列表：
list-style-image:url("图片地址"); 使用图片替换原有的黑点
list-style-position:inside、outside;黑点的位置，默认在外边
以上可以简写：
list-style:none;取消默认的黑点

盒子模型：
元素的组成部分：内容(content)+填充物(padding)+边框(border)+外边距(margin)
其中：padding ：指的是内容和边框之间的距离
margin：指的是元素跟元素之间的距离
padding-left、right、top、bottom
以上可简写 padding:10px;
padding:10px 20px;
padding:10px 20px 30px 40px;

margin：同上。

阅读全文

0 0