HTML&CSS学习总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_52848637/article/details/125491685

HTML了解

HTML了解

HTML的全称为超文本标记语言，是—种标记语言。它包括—系列标签．通过这些标签可以将网络上的文档格式统—，使分散的Internet资源连接为一个逻辑整体。HTML命令可以说明文字，图片，动画，连接等。我们所看到的浏览器的网页都有相对应的HTML文件。

HTML产生于1990年，经过多年来的拓展和技术结合，已经发展到了HTML5，且在2012年形成稳定版本。

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

注意：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）

元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空元素（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML标签

HTML 标签对大小写不敏感：<P> 等同于 <p>，但是万维网联盟（W3C）在 HTML 4 中推荐使用小写

标题标签

标题是通过 <h1> - <h6> 等标签进行定义的，从<h1>到<h6>大小依次变小。

属性： align: 设置对其方式

<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<h5>这是标题</h5>
<h6>这是标题</h6>

段落标签

段落是通过 <p> 标签进行定义的

<p>这是第一段</p>
<p>这是第二段</p>

链接标签

链接是通过 <a> 标签进行定义的

属性：

href ：指定访问资源的URL

target ：_self：默认值，在当前页面打开

_blank：在空白页面打开

<a href="https://v.qq.com/" target="_blank">这是一个连接</a>

代码内容为在空白页面打开此链接

图像标签

图像是通过 <img> 标签进行定义

属性：

        src：用于指定图像文件的路径和文件名，是必须属性

alt:在图像无法显示时的替换文本

width：设置图像的宽度

height：设置图像的高度

换行符

<br/>标签在 HTML 页面中作为换行符

水平线

<hr> 标签在 HTML 页面中创建水平线，可用于分隔内容

HTML样式

style 属性

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法

样式—背景颜色

background-color 属性为元素定义了背景颜色

<body style="background-color:yellow">
</body>

样式 - 文本对齐

text-align 属性规定了元素中文本的对齐方式。

文本格式化

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。

“计算机输出”标签

标签	描述
<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。

引用、引用和术语定义

标签	描述
<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。

引用（Quotation）

<q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

HTML颜色

颜色由红色、绿色、蓝色三原色混合而成。

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），<th>是表头的单元，每行被分割为若干单元格，由 <td> 标签定义。字母 td 指表格数据（table data）。

<table >
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>46</td>
        </tr>
    </table>

HTML列表

在HTML中，提供有序、无序和定义列表

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。

<p>这是无序列表</p>
<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>
<p>这是有序列表</p>
<ol>
    <li>苹果</li>
    <li>香蕉</li>
</ol>

HTML表单

概念：用于采集用户输入的信息。用于和服务器交互

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

属性：

*action ：指定提交数据的URL

*method ：指定提交方法

*分类：一共七种方法

get:

1.请求的参数会在地址栏中显示。

2.请求参数长度是有限制的。

3.不太安全

post:

2。请求的参数不会在地址栏中显示，会封装在请求体中（HTTP协议）

2.请求参数长度没有限制，

3.较为安全

\* 表单项中的数据要想被提交必须指定其name属性

表单项标签：

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

*type 属性：

*text：文本输入框默认值

\* placeholder：指定输入框的提示信息

*password：密码输入框

*radio：单选框

\* 要想多个单选框实现单选的效果，则多个单选框的name属性值必须一样

\* 一般会给每个单选框提供value属性，指定其被选中

*checked：可以指定默认值

*cheakbox：复选框

\* 一般会给每个单选框提供value属性，指定其被选中

*checked：可以指定默认值

*file：文件选择框

*hidden：隐藏域，用于提交一些信息

*按钮：

*submit

*button 普通按钮

*image 图片提交按钮

*src：属性指定图片的路径

*label：指定输入项的文字描述信息

*注意 label的for属性一般会和input的id属性对应，如果对应，则点击label区域会让input输入框获取焦点

*select：下拉列表

*子元素 option，指定列表的项

*textarea：文本域

*cols：指定列数

*rows：指定行数

到此，关于HTML的简单学习就到此为止了。

关于css的简单学习

1.概念

CSS 指的是层叠样式表* (Cascading Style Sheets)

层叠：多个样式可以作用在同一个HTML的元素上同时生效

2.好处

（1）功能强大

（2）将内容的展示和样式控制分离

*降低耦合度。解耦

*让分工协作更容易

*提高开发效率

css的使用：css与HTML结合方式

1. 内联样式

* 在标签内使用style属性指定css代码

如：

<div style="color: darkorange;">hello CSS</div><br>

2.内部样式

在head标签内，定义style标签，style标签的标签体内容就是CSS代码

如：

<style>
    div{
        color: cornflowerblue;
    }
</style>
<div> hello css</div>

3.外部标签

1.定义css资源文件。

2.在head标签内，定义link标签，引入外部的资源标签

如：a.css文件：

div{

color: aquamarine;

}

<div> hello css</div><br>

注意：1.2.3. 三种方法，css作用范围越来越大

1方式不常用，后期多用2，方法

3方法还可以写成

<style>

@import "a.css";

</style>

css的语法

*格式

选择器{

属性名1：属性值1

属性名2：属性值2

}

选择器：筛选具有相似特征的元素

*注意：每一对属性需要使用“；”隔开，最后一对属性可以不加“；”

选择器

1.基础选择器

1.id选择器

选择器具体的id属性值的元素，建议在一个html页面中id值唯一

*语法：#id属性值（）

2.元素选择器：选择带有相同标签名称的元素

*语法：标签名称（）

*注意：id选择器优先级高于元素选择器

3.类选择器：选择具有相同的class属性值的元素

*语法：class属性值（）

*注意：类选择器优先级高于元素选择器

id>类>元素

2.拓展选择器

1.选择所有选择器：语法：*{}

2.并集选择器：语法：*选择器1，选择器2{}

3.子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2{}

4.父选择器：筛选选择器2的父元素选择器1

语法：选择器1>选择器2{}

5.属性选择器：选择元素名称，属性名=属性值的名称

语法：元素名称[属性名=''属性值'']{}

6.伪类选择器

语法：元素：状态{}

如：<a>

*状态：

*link：初始化的状态

*hover：鼠标悬浮状态

*active：正在访问状态

*visited：被访问后的状态

属性

1.字体，文本

*font-size：字体大小

*color：文本颜色

*text-align：对齐方式

*line-height：行高

2.背景

background

3.边框

*border：设置边框，符合

4.尺寸

1.wight 宽度

2.height 高度

5.盒子模型:控制布局

*margin ：外边距

*padding：内边距

*默认情况下，内边距影响盒子大小

*box-sizing: border-box; 设置盒子属性，让width和height就是最终盒子的大小

小结

关于HTML和CSS的简单学习就到此为止了，虽然书写的内容相当草率，但是嘛，起码事自己写了，也学到的有用的东西，还是很欣慰，哈哈哈！！！！！