【HTML&CSS】常用标签以及编写格式

最新推荐文章于 2022-05-31 09:14:25 发布

置顶 Mr-赵

最新推荐文章于 2022-05-31 09:14:25 发布

阅读量684

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45985372/article/details/105127521

版权

一、学习内容回顾

HTML
Hyper Text Markup Language:超文本标记语言
超文本:不仅仅是纯文本,还包括字体效果和多媒体(图片/音频/视频)
ML标记语言: <开始属性=“xxx”>标签体
学习HTML主要学习的就是有哪些HTML标签以及标签的使用方式
创建HTML页面

页面结构介绍:

文档声明:告诉浏览器使用html的哪个版本解析,当前写法是告诉浏览器使用html5的标准去解析页面

<html>页面根标签
    <head> 头标签:里面的内容是给浏览器看的
        <meta charset="UTF-8">字符集
        <title>Insert title here</title> 页面标题
    </head>
    <body>体标签:里面的内容是给用户看的

    </body>
</html>

☆常用标签列举

内容标题h1-h6 字体加粗,独占一行,自带上下行间距, 数值越大字体越小
段落标签p 独占一行,自带上下行间距
水平分割线hr
加粗b
斜体i
小字small

列表标签

无序列表

<ul type="square"><!-- unordered list 无序列表 -->
  <li>刘备</li><!-- list item 列表项 -->
  <li>貂蝉</li>
  <li>诸葛亮</li>
  <li>孙悟空</li>
  <li>刘禅</li>
</ul>

有序列表

<!-- type序号类型 start起始值  reversed降序 -->
<ol type="1" start="10" reversed="reversed"> <!-- ordered list -->
  <li>打开冰箱门</li>
  <li>把大象装进去</li>
  <li>关上冰箱门</li> 
  <li>关上冰箱门</li> 
</ol>

定义列表

<!-- 自带层级效果 -->
<dl><!-- 定义列表 -->
  <dt>凉菜</dt> <!-- 定义标题 -->
  <dd>拍黄瓜</dd><!-- 定义描述 -->
  <dd>老醋花生</dd>
  <dd>花毛一体</dd>
  <dt>热菜</dt>
  <dd>宫保鸡丁</dd>
  <dd>水煮肉</dd>
  <dd>红烧肉</dd>
</dl>

列表嵌套

:有序和无序可以任意无限嵌套
图片标签img

<img alt="这是个美女图片" src="111.jpg">
<img width="100" height="100" title="这车怎么样?" src="../2.jpg">
<img width="50%" src="abc/3.jpg">
<img src="../imgs/4.jpg">

src路径

相对路径:访问站内资源时使用
图片和页面在同一目录: 直接写图片名
图片在页面的上级目录: …/图片名
图片在页面的下级目录: 文件夹名/图片名
绝对路径:访问站外资源时使用(图片盗链) 好处:节省本站资源坏处:有可能找不到图片
alt:图片不能显示时显示的文本
title: 鼠标悬停时显示的文本
width/height:宽高两种赋值方式:1. 像素 2. 上级元素的百分比
如果只赋值宽度高度会自动等比例缩放
支持的图片格式: jpg/jpeg png gif动图

超链接a

<a>超链接1</a>
<a href="04图片标签.html">超链接2</a>
<a href="http://www.baidu.com">超链接3</a>
<a href="1.jpg">超链接4</a>
<!-- 图片超链接 -->
<a href="http://www.taobao.com"><img width="100" src="1.jpg"></a>
<!-- #代表当前页面 不想跳转到其他页面时使用 -->
<a href="#">超链接5</a>

href属性类似于src 表示路径
图片超链接: 用a标签包裹一个图片就是图片超链接
如果不写href属性则就是一个纯文本
锚点实现页面内部跳转回到顶部

<!-- 页面内部跳转 -->
<a id="top"></a>
------中间内容-------
<a href="#top">回到顶部</a>

☆锚链接

1、锚点在其他页面

<a href="mao1.html#target">找衣服</a>
<a name="target">衣服</a>        	  <!--这行代码在mao1.html页面-->

2、与锚点在同一页面

<a name="targetC">衣服</a>
<a href="#targetC">找衣服</a>

表格标签table

标签: table表格 tr行 td列 th表头 caption表格标题
属性: table:border边框粗细 cellspacing单元格间距 td:colspan跨列 rowspan跨行

<table border="1" cellspacing="0">
    <!-- table row 表示行 -->
    <tr>
      <!-- colspan 跨列 -->
      <td align="center" colspan="2">1-1</td>
      <!-- table data 表示列 -->
      <td>1-3</td>
    </tr>
    <tr>
      <!-- rowspan 跨行-- -->
      <td rowspan="2">2-1</td>
      <td align="center" colspan="2">2-2</td>
    </tr>
    <tr>

      <td>3-2</td>
      <td>3-3</td>
    </tr>
  </table>
  <hr>
  <table border="1" cellspacing="0";>
  <!-- caption表格标题 -->
  <caption>订单列表</caption>
    <!-- th table header 表头 加粗并且居中 -->
    <tr>
      <th>编号</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>1</td>
      <td>双飞燕鼠标</td>
      <td>50元</td>
    </tr>
    <tr>
      <td>2</td>
      <td>罗技键盘</td>
      <td>150元</td>
    </tr>
    <tr>
    <td>总价:</td><td colspan="2">200元</td>
    </tr>
  </table>

表单

作用:获取用户输入的信息提交给服务器
学习表单主要学习的就是有哪些控件以及控件的使用方式,控件包括:文本框/密码框/单选/多选/下拉选/日期/文件等
各种控件:

 *<form action="http://www.tmooc.cn">
   <!-- 所有的控件必须写name属性 不然不会传递参数  
    placeholder占位文本  value值  readonly只读-->
    用户名:<input type="text" name="username" 
       placeholder="请输入用户名" value="小明" readonly="readonly"><br>
  密码:<input type="password" name="pw" placeholder="请输入密码"><br>
   <!-- 单选框中必须写value否则提交的值为on checked设置默认选中  -->
   性别:<input type="radio"name="gender" value="m" id="m">
   <label for="m">男</label>
    <input type="radio" name="gender" checked="checked" 
    value="w" id="w"><label for="w">女</label><br>
    <input type="submit" value="注册">
  </form>*

<form action="http://www.tmooc.cn">
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" checked="checked" value="hj">喝酒
<input type="checkbox" name="hobby" value="hj">烫头<br>
生日:<input type="date" name="birthday"><br>
<!-- 文件选择器 -->
靓照:<input type="file" name="pic"><br>
所在城市:<select name="city">
<!-- 如果不加value提交的是标签体内的文本 如果加了value -->
<option value="bj">北京</option>
<option>上海</option>
<!-- 默认选中selected -->
<option selected="selected">广州</option>
</select>
<!-- 重置按钮 -->
<input type="reset">
<!-- 自定义按钮 -->
<input type="button" value="按钮">
<input type="submit" value="注册">

特殊字符

空格:空格折叠现象(如果连续出现多个空格只能识别一个)
&nbsp实现多个空格
小于号 &lt表示：<
大于号&gt表示： >

<!-- 空格折叠现象,通过&nbsp; &lt;小于号  &gt;大于号 -->
<h3>今天是&nbsp;&nbsp;第二天&lt;abc&gt;</h3>

分区标签

分区标签作用: 将多个有相关性的标签放到一起,便于统一管理

分区标签包括:

<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>s1</span>
<span>s2</span>
<span>s3</span>

div:独占一行
span: 共占一行

在html5版本中新增了几个分区标签作用和div一样也是独占一行 header头 footer脚 section区域 nav导航 article文章
一个页面通常至少分为三大区

 1. <header>头</header>
 2. <section>体</section>
 3. <footer>脚</footer>

使用h5新增标签可以提高代码的可读性

CSS

什么是CSS:Cascading Style Sheet层叠样式表,作用: 负责美化页面
如何在html页面中添加css样式代码:

内联

:在标签内部添加style属性,不能复用.

<!-- 内联样式:在标签内部添加style属性 -->
<h3 style="color:red">内联测试1</h3>

内部

:在head标签里面添加style标签标签内部写样式代码,不能多页面复用

<head>
<style type="text/css">
h2{
      color:blue;
}
</style>
</head>

外部

:在单独的css文件中添加样式代码,在html页面中通过link标签引入css文件

<head>
<!-- 引入外部css文件 rel表示引入文件的关系 href路径 -->
<link rel="stylesheet" href="first.css">
</head>

☆元素选择器：匹配元素

基本选择器：

标签名选择器

作用: 选择页面中所有指定名称的标签
格式: 标签名{}

TagName{	
}

id选择器

格式: #id{}
作用: 当需要选取页面中的某一个元素时使用
注意:需要给元素添加id属性, id属性的值不能重复

#id{

}

class类选择器

格式: .class{}
作用: 选取页面中相同class属性值得元素需要给元素添加class属性

.ClassName{	
}

分组选择器

格式: div,#id,.class{}
作用: 将多个选择器合并成一个选择器

/* 分组选择器 将多个选择器合并在一起 */
#h3-2,.c1{
  background-color:orange; 
}

<h3 id="h3-2">分组选择器2</h3>
  <h3 class="c1">分组选择器3</h3>

属性选择器

格式: 标签名[属性名=‘值’]{}
作用: 选择页面中所有相同属性名和值得元素

/* 属性选择器 */
input[type='password']{
  background-color:red;
}

<input type="password">
  <h3>属性选择器测试1</h3>

子孙后代选择器

格式: body div span{}
作用:选取body里面的div里面的所有span

子元素选择器

格式: body>div>span{}
作用:选取body里面的div里面的子元素span

任意元素选择器

格式:*{}
作用:选取页面中的所有元素

/* 子孙后代选择器 */
div div div span {
	color: red;
}
/* 子元素选择器 */
body>div>span {
	background-color: blue;
}
/* 任意元素选择器 */
* {
	/* border边框:粗细 样式 颜色 */
	border: 1px solid red;
}

<body>
  <span>s1</span>
  <div>
    <span>s2</span>
    <div>
      <span>s3</span>
    </div>
    <div>
      <span>s4</span>
      <div>
        <span>s5</span>
      </div>
    </div>
  </div>
</body>

伪类选择器

注意：

hover必须在link 和visited之后，active必须在hover之后。
伪类的名称不区分大小写。

☆多级菜单注意

鼠标悬停出来的子菜单，必须是当前悬停元素的子集

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

/* 访问过 */
  a:visited {
	color:red;
}
/* 未访问过伪类 */
  a:link {
	color:yellow
}
/* 鼠标悬停伪类 */
  a:hover {
	color:blue;
}
/* 鼠标激活伪类 */
  a:active {
	color:green;
}

</style>
</head>
<body>
<a href="../imgs/1.jpg">超链接1</a>
<a href="../imgs/2.jpg">超链接2</a>
<a href="../imgs/3.jpg">超链接3</a>
<a href="../imgs/4.jpg">超链接4</a>
</body>
</html>

☆meta标签的作用

meta 标签是一个特殊的 html标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等，许多搜索引擎都使用 meta 标签信息。例如，要将 John 指定为作者，则使用以下 meta 标签：

<meta name = “作者" content = "John">

meta的http-equiv属性用于向浏览器提供一些说明信息，从而可以根据这些说明做出相应。 http-equiv 属性可用来代替 meta 标签中的 name 属性 :

<meta  http-equiv = "expires" content = "Wed, 26 Feb 1997 GMT">

表示每隔2秒，自动刷新网页：

<meta  http-equiv="refresh"  content=“2">

meta标签指定了当前文档所使用的字符编码为gb2312，也就是中文简体字符:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

盒子模型之边框

赋值方式:
border:粗细样式颜色; 给四个方向添加边框
border-left/right/top/bottom:粗细样式颜色; 单独给某个方向添加边框
圆角: border-radius: 20px; 值越大越圆当值大于等于宽高一半时为正圆


#d1 {
/*margin-left:50px;左
  margin-top: 100px; 上
  margin-bottom: 50px; */ 下
  
	/* 四个方向符值50 */
	/*  margin: 50px; */
	
	
	/* 上下50 左右100 */
	/* margin: 50px 100px; */
	
	
    /* 0 auto代表居中 */
    /*   margin: 0 auto; */
    
    
    /* 上右下左 */
    margin: 10px 20px 30px 40px;
}

#d2 {
	/* 上下相邻元素添加外边距取最大值 */
	/* margin-top: 60px; */
}
#s1{
  background-color: blue; 
  /* 行内元素上下外边距无效 */
  margin-left: 50px;
  margin-right: 30px; 
}

盒子模型之内边距

什么是内边距: 元素内容距元素边框的距离称为内边距
赋值方式: 和外边距赋值类似
padding-left/right/top/bottom:10px; 单独某个方向赋值
padding:10px; 四个方向
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px; 上右下左顺时针

盒子模型总结:

宽高: width/height 像素和百分比赋值行内元素不能修改宽高
外边距: 控制元素的显示位置, margin, 粘连问题overflow:hidden
边框: border , 圆角:border-radius
内边距:控制元素内容的位置, padding, 添加内边距会影响元素的宽高
盒子模型

文本和字体相关样式

font-size:10px; 字体大小
font-weight:bold/normal; 加粗或去掉加粗效果
font-style:italic; 斜体
text-align:left/right/center; 水平对齐方式
text-decoration:overline/underline/line-through/none; 文本修饰
text-shadow:颜色 x偏移值 y偏移值浓度; 浓度值越大越模糊
line-height:20px; 行高可以实现垂直居中
font-family: xxxx,xxx,xxx; 字体设置,可以设置多个

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
  width: 150px;
  height:50px;
  border:1px solid red;
  /* 字体大小 */
  font-size: 12px;
  /* 字体加粗 */
  font-weight:bold;
  /* 对齐方式 */
  text-align: center;
  /* 文本修饰 */
  text-decoration: line-through;
  /* 行高 可以实现文本垂直居中 */
  line-height: 50px;
}
h1{
  font-weight: normal/* 去掉加粗效果 */;
  /* 斜体 */
  /* font-style:italic; */
  /* 阴影 :颜色  x偏移值  y偏移值 浓度 值越大越模糊 */
  text-shadow: red -5px 5px 3px;
  /* 字体设置 */
  font-family: cursive;
}
a{
 text-decoration: none;/* 去掉自带下划线 */
}


</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<h1>测试加粗</h1>
<div>文本字体样式</div>
</body>
</html>

效果图
在这里插入图片描述

CSS的三大特性

继承性:元素可以继承上级元素的文本和字体相关样式,个别标签自带效果不受继承影响,比如:超链接字体颜色, h1-h6自带的字体大小也不受继承影响
层叠性:多个选择器有可能选择到同一个元素,如果多个选择器作用的样式不同则全部层叠生效,如果作用的样式相同则由优先级决定.
优先级:作用范围越小优先级越高, id>class>标签名>继承(属于间接选中) ,直接选中优先级高于间接选中

☆样式

样式的写法：属性：值；
样式可以分为：行内样式内嵌样式外部样式.
使用外部样式时，head标签中应用link标签导入样式文件.
若网页样式比较多或者复杂时，采用内嵌样式会大大降低网页的加载速度.
如果样式冲突：（优先级）行内样式>内嵌样式>外部样式.
如果样式不冲突：混合使用.
内嵌和外部样式有优先级之分：从上到下 id>class>元素.
如果要提高样式优先级：属性值后面加!important.

☆定位方式position

position定位

静态定位(文档流定位)

格式: position:static(默认);
特点: 块级元素从上到下排列,行内元素从左向右排列
如何移动元素: 通过外边距
元素不能实现层叠效果

相对定位

格式: position:relative;
特点: 元素不脱离文档流(不管元素移动到什么位置,原来的位置仍然占着)
如何移动元素:通过left/right/top/bottom相对于元素的初始位置做偏移

绝对定位

格式: position:absolute;
特点: 元素脱离文档流(不占原来的位置)
如何移动元素:通过left/right/top/bottom相对于窗口或某一个上级元素做位置偏移

固定定位

当需要将某一个元素固定在窗口的某个位置的时候使用固定定位
格式: position:fixed;
特点: 元素脱离文档流
如何移动元素:通过left/right/top/bottom相对于窗口做位置偏移

浮动定位

格式: float:left/right;
特点: 元素脱离文档流,元素在当前所在行向左或向右浮动,当遇到上级元素边缘或其它浮动元素的时候停止.
如果一行装不下会自动换行,换行的时候有可能被卡住.
如果不设置高度则自动识别内容高度,如果同时所有子元素全部浮动则自动识别的高度为0 通过给元素添加overflow:hidden解决
应用场景:当需要将纵向排列的元素改成横向排列时使用浮动定位

二、需要掌握的知识点
☆iframe标签的使用

<a href="https://www.taobao.com/" target="tarlist">淘宝首页</a>
<iframe name="tarlist" src="http://www.baidu.com"></iframe>

效果图
在这里插入图片描述
————————————————

Mr-赵

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML&CSS】常用标签以及编写格式

一、学习内容回顾☆常用标签列举<p></p>  <b></b>  &l...
复制链接

扫一扫