Html 标签学习与使用+Css选择器与简单美化

最新推荐文章于 2024-08-23 17:35:50 发布

借_口

最新推荐文章于 2024-08-23 17:35:50 发布

阅读量568

点赞数

文章标签： html css 学习

本文链接：https://blog.csdn.net/ENDlesslove0/article/details/125879739

版权

本文介绍了HTML的基本标签，包括标题、段落、链接、图片等，并探讨了CSS的选择器类型如基本选择器、层次选择器、结构伪类选择器和属性选择器。同时，讲解了CSS的样式美化技巧，如字体样式、文本美化、超链接伪类和阴影效果。此外，还涉及了盒子模型和优先级规则，帮助理解CSS在网页布局中的应用。

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

文章目录

Html

标签

标题标签
<h1></h1>
段落标签
<p></p><!--分段-->
换行标签
<br/>
水平线标签
<hr/>
粗体
<strong></strong>
斜体
<em></em>
空格
&nbsp;
大于号
&gt;
小于号
&lt;
版权符号
&copy;

图片标签：

<img src="path"alt="text"title="text"width="x"height="y"/>
src：图片地址()
相对地址（推荐使用），绝对地址
··/--上一级目录
alt：图片名字（必填)

连接标签

<a href="path"target"目标窗口位置">链接文本或图像</a>

锚链接

<a name ="1">锚链接</a>
<!--需要写一个与之对应-->
<a href ="#1"></a>

功能性连接

块元素
- 无论内容多少，该元素独占一行
- （p、Ih1-h6…)
行内元素
- 内容撑开宽度，左右都是行内元素的可以在排在一行
- （a.strong.em…)

列表标签

<ol><!--order list-->
    <li></li>
    <li></li>
    <li></li>
</ol>
<ul><!--unorder list-->
    <li></li>
    <li></li>
    <li></li>
</ul>
<dl><!--define list-->
    <dt></dt><!--列表名称-->
    
    <dd></dd><!--列表内容-->
    <dd></dd>
</dl>

表格

<!--table
行 tr
列 td

-->
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>一行两列的表格
跨行<td colspan=" "></td>
跨列 <td rowspan=" "></td>

页面结构

<header></header>
标题头部区域的内容（用于页面或页面中的一块区域）
<footer></footer>
标记脚部区域的内容（用于整个页面或页面的一块区域）
<ection></ection>
Web页面中的一块独立区域
<article></article>
独立的文章内容
<aside></aside>
相关内容或应用（常用于侧边栏）
<nav></nav>
导航类辅助内容

header footer nav相对重要

iframe内联框架

<iframe src="path"name="mainFrame"></iframe>

post表单
- 规定如何发送表单数据
  表示向何处发送表单数据
  常用值：get post
  
  名字:
  
  密码:

在这里插入图片描述

文本框和单选框

<!--文本输入框：input type="text"
value="狂神好咖
默认初始值
maxlength="8"
最长能写几个字符
size="30"
文本框的长度>

<!--单选框标签
input type="radio"
value:单选框的值
name:表示组
-->
<!--单选框标签
checkbox多选框
-->
<!--
bottom 按钮
image 图片按钮
submit 提交按钮
reset 重置按钮	
file 文件提交
-->

下拉框
- ```

```

初级验证：

<!--
placeholder 提示信息
required 非空判断—>必须填入
pattern 正则表达式->去搜一些正则咯
-->

`Css`

优先级

内嵌样式优先级是最高的，后面外联和行内看定义时候的就近原则

补充：

块级元素：要分段的

行内元素：不要分段的

选择器（重点）

1.基本选择器

标签选择器
- 选了之后，所有这个标签就是统一的样式，太死了
- ```
<style>
    标签{
        ;
        ;
    }
</style>
```

类选择器

可跨，方便

<style>
    .类名{
        ;
        ;
        ;
    }
</style>

id选择器

id只能有一个，有点局限

<style>
    #id名{
        ;
        ;
        ;
    }
</style>

优先级
- id标签>class标签>标签选择
- 不遵循就近原则

2.层次选择器

后代选择器：在某个元素的后面这一代的后面所有
- ```
/*后代选择器*/
body 标签名{
  	;
    ;
}
```
子选择器：在这个元素的后面但是只有后面一代
- ```
/* 子代选择器 */
body>标签名{
  ;
}
```
相邻兄弟选择器（我自己叫向下兄弟选择器）选择这一代的下一个，不能隔着东西
- ```
.类名 +下面的一个标签{
          ;
		  ;
}
```
通用选择器：这个类的下面的所有这个标签(和相邻兄弟选择器一样对下不对上，但是是对多个，但也不能隔着)
- ```
.类名~下面的标签{
	;
	;
}
```

3.结构伪类选择器

标签： 的形式，用来过滤一些条件。简单就是带冒号的啦

ul li:first-child {
    /* 选择ul标签下的li标签中第一给元素 */
    background-color: blue;
}
ul li:last-child{
    /* 选择ul标签下的li标签中最后一个元素 */
    color: red;
}
body p:first-child {
    /*body 下p标签的第一个元素*/
    color: red;
}
p:nth-of-type(x){
    /*p的上级标签下面选择p标签的第x个*/
    background-color: red;
}

4.属性选择器

=绝对等于
*= 包含
^= 以这个符号开头
$= 以这个符号结尾

a[herf^=http]/*选择a标签中的herf属性开头是http*/
/*标签[属性/id/class 表达式]*/

样式美化

1.字体样式

/*
font-fami1y:字体
font-size:字体大小
font-weight:字体粗细
co1or:字体颜色 
*/
body{
font-family:"Aria1 Black",楷体;
color:#a13d30;
}
h1{
    font-size: 50px;
}
.p1{
font-weight:bolder;
}

2.文本样式

/* 颜色 color rgb rgba
文本对齐的方式 text-align=center
首行缩进 text-indent:2em;
行高 line-height
装饰 text-decoration->删除a标签的下划线
文本图片水平对齐 vertical-align:middle */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--/* 颜色 color rgb rgba
        文本对齐的方式 text-align=center
        首行缩进 text-indent:2em;
        行高 line-height
        装饰 text-decoration->删除a标签的下划线
        文本图片水平对齐 vertical-align:middle */ -->
    <style>
      p {
        color: brown;
        text-align: center;
        text-indent: 2em;
        line-height: 2em;
      }
      a {
        text-decoration: none;
      }
      .p1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>
      我本来是个atom忠实粉丝,
      但是atom使用window10自带输入法在书写汉字时总是会出现首字母缺失的情况,
      查了好久没法解决, 直接放弃了atom, 转而使用Vs code书写markdown, 但是使用Vs
      code时发现在左侧导航栏配置新建文件和文件夹没有快捷方式, 于是就想配置一个,
      但是在百度上搜了好长时间, 却总是解决不了KeyBoard Shortcuts上面的when 属性,
      最终访问的 Vs code 官方文档 解决的.
    </p>
    <a href="7.html">123</a>
    <p class="p1">1223</p>
  </body>
</html>

3.超链接伪类

/*超连接伪类，还有阴影*/
a {
    text-decoration: none;
    color: black;
}
/* 鼠标悬浮颜色,也只要记住这个 */
a:hover {
    color: orange;
    font-size: 30px;
}

4.阴影效果

/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
p {
    text-shadow: #3cc7f5 10px -10px 2px;
}

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

margin:外边距
padding:内边距
border:边框

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  background-color: blue;
}
<div class="box">盒子模型</div>
/*这时候，就可以发现盒子的所占据的宽度为200px*/