HTML、CSS

一、HTML

1.概念：是最基础的网页开发语言，

* 标记语言:

由标签构成的语言。<标签名称> 如 html，xml；
标记语言不是编程语言；

2.基本标签

1）文件标签：构成html最基本的标签

* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* <!DOCTYPE html>：html5中定义该文档是html文档

2）文本标签：和文本有关的标签

* 注释：

* <h1> to <h6>：标题标签

* h1~h6:字体大小逐渐递减

* <p>：段落标签

* <br>：换行标签

* <hr>：展示一条水平线

* <b>：字体加粗

* <i>：字体斜体

* <font>:字体标签

* <center>:文本居中

* 属性定义：
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例

3.图片标签

相对路径： ./：代表当前目录

../:代表上一级目录

4.列表标签：

* 有序列表：1. ol 、2.li:

* 无序列表： 1. ul 、 2. li

5.链接标签

属性：

href：指定访问资源的URL(统一资源定位符)

target：指定打开资源的方式：

1） _self:默认值，在当前页面打开

2）_blank：在空白页面打开

6.HTML的表单标签

6.1.表单：

* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

属性：* action：指定提交数据的URL

* method:指定提交方式：

get :1. 请求参数会在地址栏中显示。会封装到请求行中.

2.请求参数大小是有限制的。

3.不太安全

post: 1.请求参数不会再地址栏中显示。会封装在请求体中

2.请求参数的大小没有限制。

3.较为安全

表单项标签：

input：可以通过type属性值，改变元素展示的样式

tyep属性：

text：文本输入框，默认值，placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息；

password：密码输入框；

radio:单选框；注意：1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样；2.一般会给每一个单选框提供value属性，指定其被选中后提交的值；3.checked属性，可以指定默认值

checkbox：复选框； 注意：1.一般会给每一个单选框提供value属性，指定其被选中后提交的值；2.checked属性，可以指定默认值

file：文件选择框；

hidden：隐藏域，用于提交一些信息。但不在页面显示

按钮：

* submit：提交按钮。可以提交表单

* button：普通按钮

　　　　　　　　　　　　　　　 * image：图片提交按钮

　　　　　　　　　　　　　　　 * src属性指定图片的路径

label：指定输入项的文字描述信息 ;作用：label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

用法：

<label for="username"> <input type="text" id="username">

select：下拉列表

子元素：option，指定列表项

textarea：文本域； cols: 指定列数，每一行有多少个字符 ; rows: 默认多少行。

二、CSS

1.css的使用：

1.1.内联样式：

<!--在标签内使用style属性指定css代码-->
<div style="color:red;">hello css</div>

1.2.外联样式

<!--在head标签内，定义style标签，style标签的标签体内容就是css代码-->
            <style>
                div{
                    color:blue;
                }
        
            </style>
            <div>hello css</div>

1.3.外部样式

<!--定义css资源文件。a.css-->

                div{
                    color:green;
                }

<!--在head标签内，定义link标签，引入外部的资源文件-->
<link rel="stylesheet" href="css/a.css">
            <div>hello css</div>
            <div>hello css</div>

2.css的语法：

2.1.格式：

选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}

2.2.选择器：

1）基础选择器：

id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一；语法：#id属性值{}

              <style>
            #div5{
                font-size: 20px;
                color: red;
            }
        </style>
<div id="div5">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>

元素选择器：选择具有相同标签名称的元素；语法：标签名称{}；注意：id选择器优先级高于元素选择器

 <style>
            div{
                font-size: 20px;
                color: pink;
                
            }
        </style> 
                <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>

类选择器：选择具有相同的class属性值的元素； * 语法：.class属性值{}； * 注意：类选择器选择器优先级高于元素选择器

.div2{
                font-size: 20px;
                color: pink;
            }
<div class="div2">
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>

2.3.其他选择器：

选择所有元素：语法： *{}；

并集选择器：语法： * 选择器1,选择器2{}；div,p{}

子选择器：筛选选择器1元素下的选择器2元素；语法：选择器1 选择器2{} div p{}

父选择器：筛选选择器2的父元素选择器1；语法：选择器1 > 选择器2{} div > p{}

属性选择器：选择元素名称，属性名=属性值的元素 ; 语法：元素名称[属性名="属性值"]{}

<style>
            input[type='text']{
                background: #FF0000;
            }            
            input[type='password']{
                background: #FFC0CB;
            }
</style>
用户名；<input type="text" name="username"/><br />
密码：<input type="password" name="password"/>

伪类选择器：选择一些元素具有的状态; 语法：元素:状态{}

* link：初始化的状态;

* visited：被访问过的状态

* active：正在访问状态

* hover：鼠标悬浮状态

3. 属性
1. 字体、文本
* font-size：字体大小
* color：文本颜色
* text-align：对其方式
* line-height：行高
2. 背景
* background：
3. 边框
* border：设置边框，符合属性
4. 尺寸
* width：宽度
* height：高度
5. 盒子模型：控制布局
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

* float：浮动
* left
* right

posted @ 2020-03-07 15:37 撑起一片阳光阅读(182) 评论(0) 编辑收藏举报

刷新页面返回顶部

撑起一片阳光

HTML、CSS

一、HTML

二、CSS

公告