HTMLCSS简介

最新推荐文章于 2023-12-26 22:56:06 发布

漉漓gg

最新推荐文章于 2023-12-26 22:56:06 发布

阅读量290

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/luli007x/article/details/129765892

版权

本文介绍了HTML的基本概念，包括网页、浏览器和Web标准的构成。详细讲解了HTML标签的使用，如标题、文本格式化、图像、超链接以及表格等。同时，提到了CSS在美化HTML和布局中的作用，包括选择器类型和一些基本样式属性。

摘要由CSDN通过智能技术生成

HTML简介

1.网页

网站中的一个页面，通常是HTML格式的文件（后缀名一般为.htm或.html），要通过浏览器来阅读。
重要元素：图片，文字，声音，视频，链接等等。
HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。

2.常用浏览器

IE,Edge,firefox,chrome,Safar,Opera等。

3.Web标准构成

结构：对网页元素进行整理分类。
表现：设置网页元素的版式，颜色，大小等外观样式，主要指CSS。
行为：网页模型的定义及交互的编写，主要Javascript。

                                                  # 							<u> HTML标签</u>

1.标签关系

包含关系

<head>
    <title> </title>
</head>

并列关系

<head> </head>
<body> </body>

2.基本结构标签

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8"><!--否则乱码-->
    	<>
    	<title> 第一个页面</title>
    </head>
    <body>
    <p> 加入Join,摆烂人生</p>
    </body>
</html>

3.常用标签

1.标题标签h1-h6 换行标签br

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
..................
<h6>我是六级标题</h6>

2.文本格式化标签

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8"><!--否则乱码-->
    	<title> 第一个页面</title>
    </head>
    <body>
        <strong>此处内容粗体</strong>
        <em>此处内容斜体</em>
        <del>此处内容删除</del>
        <mark>此处内容有荧光笔标记</mark>
        <pre>此处内容我可以写诗,并保留我原本格式</pre>
        <p>此处内容我想些什么写什么比换行间隔大</p>
        <br />
        H<sub>2</sub>O
        2<sup>2</sup>
        <!--我是个大帅比，别找了，你看不见-->
        讲&nbsp;&nbsp;究
        &ltx小于号;&gt大于号;
        div { 
        text-align: center;
           }
          div { 
        text-decoration：underline；
     }
    </body>
</html>

粗体或
斜体或
下划线
~~删除线~~
标记(像是荧光笔)

原格式(写啥显示啥)

一个段落

H_{2(2跑小面水的化学式)}O
同理

空格大于号小于号

text-align 属性用于设置元素内文本内容的水平对齐方式

下划线

3.特殊标签div和span

没有语义，它们就是一个盒子，用来装内容。

一行只能放一个

大盒子。

span实现跨距，一行可放多个，小盒子。

4.图像标签和路径

<img src="图像URL"/>

src是img标签的必须属性，指定文件路径和文件名。

鼠标悬停在图片上所显示的文字用

图片显示不出来用来表明大致内容

设置图片的高度和宽度一般设置一个，另一个等比例自动缩放（避免失真）

还可给图片设置边框粗细(CSS内容)

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8"><!--否则乱码-->
    	<title> 第一个页面</title>
    </head>
    <body>
   <img src="天选姬静态PC“新年”.jpg" border="10" alt="天选姬"/><!--图片显示不出来就用alt-->
        <img src="天选姬静态PC“新年”.jpg" title="天选姬" height="500"/><!--鼠标悬停在图片上所显示的文字-->
    </body>
</html>

5.路径问题

1.相对路径可分为：相对于目前html文件的(用符号’/‘)

同一级

<img src="image.jpg"/>

上一级

<img src="../wenjian.gif"/>

下一级

<img src="images/baidu.gif" />

2.绝对路径：可分为（用符号’\‘）

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title> 第一个页面</title>
    </head>
    <body>
	<image src="网址（从盘符到文件）" />
    </body>
</html>

6.超链接标签

1.外部链接< a href=“http://www.baidu.com”>百度(ctrl+左键可打开)

(换一页打开)target=“_self”(本页打开)

2.内部链接：网站内部页面之间相互链接

3.空链接：如果没有确定链接目标首页

4.下载链接：文件或者下载包（压缩包）下载文件

5.网页元素超链接：

6.锚点链接：在一个页面上进行跳转，到指定位置

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title> 第一个页面</title>
    </head>
    <body>
	< a href="http://www.baidu.com target="_blank">百度</a>
    <a href="#">首页</a>
    <a href="wenjian.zip">下载文件</a>
    <a href="http://www.baidu.com"><img src="fjia.jpg"></a>   
               <a href="#name">标题</a>  <!--点他跳转到下面那个-->    
               <h3 id="name">标题<h3>               
    </body>
</html>

7.表格

    1.<table> </table> 是用于定义表格的标签。
    2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
    3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
    4.字母 td 指表格数据（table data），即数据单元格的内容。
    5.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
      <th> 标签表示 HTML 表格的表头部分(table head 的缩写)

         <table>
            <tr>
                <th>姓名</th>
                ...
            </tr>
            ...
        </table>

      <table>
            <tr>
                <td>单元格内的文字</td>
                ...
            </tr>
            ...
        </table>

跨行合并：rowspan=“合并单元格的个数”

最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan=“合并单元格的个数”

最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如：。删除多余的单元格。

8.列表

1.列表可以分为三大类：无序列表ul、有序列表ol和自定义列表。

li 与 /li之间相当于一个容器，可以容纳所有元素。

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，ol 标签用于定义有序列表，列表排序以数字来显示，并且使用 li 标签来定义列表项。有序列表的基本语法格式如下：

<ol>
    <li>列表项1</li>  
    <li>列表项2</li> 
    <li>列表项3</li> 
    ... 
</ol>

9.表单

1.使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

提交数据

3.在表单元素中标签用于收集用户信息。在标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

4. 表单元素下拉框
使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。

<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   ...
 </select>
 <form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

5.textarea> 表单元素

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 textarea 标签。
在表单元素中，textarea 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
行数rows,列数也就是每行的字符数cols

	<textarea rows="3" cols="20"> 
    文本内容
</textarea>

6.下拉框，文本域，都应该在里面并且有name属性。

	<form>

		<input type=“text " name=“username”>

		<select name="jiguan">  

		 <option>北京</option>

		</select> 

		<textarea name= "message">

		</textarea>

	</form>

CSS简介

1.功能

CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

2.语法规范

1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式

(css选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。)

2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”分开
5.多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在

    <head>
        <style>
            h4 {
                color: blue;
                font-size: 100px;
            }
        </style>
    </head>

3.选择器

选择器分为基础选择器和复杂选择器

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器。

1.标签选择器：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

  <head>
        <style>
           div {
                color: blue;
                font-size: 100px;
            }
        </style>
    </head>
<body>
    <div>我想变成蓝色</div>
      <div>我想变成蓝色</div>
      <div>我想变成蓝色</div>   <!--都变成蓝色-->
      <div>我想变成蓝色</div>
      <div>我想变成蓝色</div>
</body>

作用：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

2.类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.

  <head>
        <style>
           .div {
                color: blue;
                font-size: 100px;
            }
            
            .red{
                color:red;
}
            .font35{
                font-size:35px;
            }
        </style>
    </head>
<body>
    <div>我想变成蓝色</div>
      <div>我想变成蓝色</div>
      <div>我想变成蓝色</div>  
    <ol><li class="red font35">我想变成蓝色</li></ol>(变成红色字号35)
    <span class="red font35">我想变成蓝色</span>(变成红色字号35)
</body>

结构需要用class属性来调用 class 类的意思

1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
4.可以理解为给这个标签起了一个名字，来表示。
5.长名称或词组可以使用中横线来为选择器命名。
6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。

3.ID选择器跟class差不多，在JS中用的多，在CSS中一般用CLASS

4.通配符选择器

通配符选择器不需要调用，自动就给所有的元素使用样式，特殊情况才使用

*{
margin: 0;
padding: 0;
}

4.文本属性

可定义文本的颜色，对齐文本，装饰文本，文本缩进，行间距

1.颜色三种格式

<style>
div {   
      color ：red;
      RGB (100%,50%,63%)
      color: #FF0000, #FF6600;
}
</style>

对齐方式三种

<style>
    h1
    {
        text-align:center;
        text-align:right;
        text-align:left;
    }
</style>

3.装饰文本

属性值	描述
none	默认，没有装饰线
underline	下划线
overline	上划线（几乎不用）
line-through	删除线（不常用）

div {
text-decoration:underline;
}

4.段落缩进

<style>
    p{
        text-indent:20px;//2em
    }
</style>

5.行高

<style>
    <div>
    {
        line-height:16px;
    }
    p{
        line-height:20px;
    }
</style>

5.引入方式

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便	结构样式混写	较少	一个标签
内部样式表	部分实现结构样式分离	结构样式没有彻底分离	较多	一个页面
外部样式表	完全实现结构样式分离	需要引入	最多	多个页面

1.行内

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8"><!--否则乱码-->
    	<title> 第一个页面</title>
    </head>
    <body>
    <p style="color:red; font-size:16px;"> 加入Join,摆烂人生</p>
    </body>
</html>

2.内部

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8"><!--否则乱码-->
    	<title> 第一个页面</title>
        p{
        color:red;
        }
    </head>
    <body>
    <p> 加入Join,摆烂人生</p>
        <p> nenu</p>
    </body>
</html>

3.外部

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8"><!--否则乱码-->
    	<title> 第一个页面</title>
        <link rel="stylesheet" href="css路径">//另一个文件夹
    </head>
    <body>
    <p> 加入Join,摆烂人生</p>
    </body>
</html>