HTML的基本结构和常用标签以及CSS

曹喜洋

于 2023-12-31 20:08:11 发布

阅读量871

点赞数 19

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/cxy94188/article/details/135318886

版权

HTML的基本结构

一个网页的基本结构由以下几个部分组成：

1.文档类型声明：告诉浏览器文档遵守哪个HTML版本的规范。

2.HTML标签：用于定义整个文档的根元素。

3.头部（HEAD）：包含元数据信息，如文档标题、样式表等。

4.主体（BODY）：包含实际的页面内容，如文本、图像、链接等。

示例：

<html>
    <head>
       <meta name="xx" value="xxx"/>
       <title>标题</title>
    </head>
    <body>
         <!--注释-->
         <h1>页面内容</h1>
    </body>
</html>

除了上述的基本元素外，html还可以包含其它标签，例如：

1.<title> ：定义浏览器标签上显示的网页标题。

2.<meta> ：提供有关HTML文档的元信息。这些信息不会直接显示给用户，但可以被浏览器或搜索引擎使用。

3.<link> ：用于链接外部资源，如样式表、图标等。

4.<script> ：用于嵌入或引用JavaScript代码。

以下是包含上述所有标签的示例：

<!DOCTYPE html>  
<html>  
<head>  
    <title>我的网页标题</title>  
    <meta charset="UTF-8">  
    <meta name="description" content="这是一个简单的HTML示例">  
    <link rel="stylesheet" href="styles.css">  
    <link rel="icon" href="favicon.ico" type="image/x-icon">  
    <script src="script.js"></script>  
</head>  
<body>  
    <h1>欢迎来到我的网页！</h1>  
    <p>这是一个简单的HTML示例。</p>  
    <script>  
        alert("Hello, world!");  
    </script>  
</body>  
</html>

HTML常用标签

标题标签: hx(1-6)

<h1>这是一个一级标题</h1>
<h3>这是一个三级标题</h3>

段落标签: p

<p>这是一个段落。</p>

加粗： strong

<strong>这是加粗的文本</strong>

斜体: em

<em>这是斜体的文本</em>

删除线:del

<del>这是带有删除线的文本</del>

上下标: sup ,sub

<sup>上标内容</sup> 和 <sub>下标内容</sub>

分割线: hr
换行标签: br
超链接标签: a（通过点击实现网页的跳转）
-href: 打开的链接
-target: _self(本) _black(新)

<a href="https://www.example.com">这是一个链接</a>

内联框架: iframe（在网页内打开另外一个网页）

<iframe src="https://www.example.com"></iframe>

图片标签:img

     -src:图片路径
     -width:宽度
     -height：高度
     -title:标题
     -alt:图片无法加载时文字内容

<img src="image.jpg" alt="图片描述">

视频: video

<video src="video.mp4"></video>

音频：audio

<audio src="audio.mp3"></audio>

列表标签

1.无序 ul->li

<ul>
<li>列表项一</li>
<li>列表项二</li>
</ul>

2.有序 ol->li

<ol>
<li>列表项一</li>
<li>列表项二</li>
</ol>

3.自定义 dl->dt->dd

表格标签：
1. table : 表格标签
2. tr: 行标签
3. td: 单元格
4. th: 表头
5. caption: 表格标题

属性：
border:边框
cellspacing:单元格外边距
cellpadding:单元格内边距
bgcolor:表格背景
rowspan：行合并
colspan: 列合并

<table border="1" cellspacing="10" cellpadding="10" bgcolor="#FFCC99">  
  <tr>  
    <th rowspan="2" style="background-color:#FF6347;">标题1</th>  
    <th colspan="2" style="background-color:#98FB98;">标题2</th>  
  </tr>  
  <tr>  
    <td style="background-color:#C7CDD8;">数据1</td>  
    <td style="background-color:#ADD8E6;">数据2</td>  
  </tr>  
</table>

-表单

1.表单标签
<form action="" method="">
</form>
注意
-action: 指定数据提交的服务器
-method: GET|POST
*GET: 不安全 , 效率高 , 数据长度不能超过3KB.
*POST: 安全 , 效率低 , 数据长度理论上无限制
作用：把数据以指定的方式提交给指定的服务器。

2.输入标签
<input type="" name="" value=""/>
type: 输入控件类型
-text(文本框) -password(密码框) -submit(提交) -reset(重置) -button(普通) -image(图片按钮)
-radio(单选) -checkbox（多选框）
name: 控件名称(key)
value: 控件的值
checked: 是否被选中

<!DOCTYPE html>  
<html>  
<head>  
  <title>输入标签示例</title>  
</head>  
<body>  
  <h1>输入标签示例</h1>  
    
  <form action="/submit" method="post">  
    <label for="username">用户名:</label>  
    <input type="text" id="username" name="username" value="默认值"><br><br>  
      
    <label for="password">密码:</label>  
    <input type="password" id="password" name="password" value="默认密码"><br><br>  
      
    <input type="submit" name="submit" value="提交">  
    <input type="reset" name="reset" value="重置"><br><br>  
      
    <label for="gender">性别:</label>  
    <input type="radio" id="male" name="gender" value="male" checked>男<br>  
    <input type="radio" id="female" name="gender" value="female">女<br><br>  
      
    <label for="hobby">爱好:</label><br>  
    <input type="checkbox" id="reading" name="hobby[]" value="reading">阅读<br>  
    <input type="checkbox" id="music" name="hobby[]" value="music">音乐<br>  
    <input type="checkbox" id="sports" name="hobby[]" value="sports">运动<br><br>  
  </form>  
</body>  
</html>

3.其他表单标签
<select name="">
<option value="" selected> 内容 </option>
....
</select>

<textarea rows="行" cols="列" name="key">
value
</textarea>

CSS: 级联样式表

使用方式

   行内样式
   <h3 style="color:blue;font-size: 16px">怀化学院</h3>
   内部样式
   <style type="text/css">
        h3{
          /*文本颜色*/
          color : blue;
          /*字体大小*/
          font-size: 16px;
        }
    </style>
   外部样式
    导入式：(部分浏览器不兼容)
    <style type="text/css">
        @import url("css/value.css");
    </style>
    链接式(推荐)：
    <link type="text/css" rel="stylesheet" href="css/value.css">

优先级：就近原则

选择器

基本选择器
   -标签选择器
   -类选择器
   .name{...}
   -ID选择器
   #name{...}
   -通配选择器(*)
   -群组选择器

选择器之间存在样式冲突: ID选择器 > 类选择器 > 标签选择器 > 通配选择器

层次选择器
   E F : 选择E元素的后代F元素设定样式   【后代选择器】
   E>F : 选择E元素的子F元素设定样式     【子类选择器】
   E+F : 选择E元素的相邻兄弟元素F设定样式   【相邻兄弟选择器】
   E~F : 选择E元素的所有兄弟元素F设定样式   【通用兄弟选择器】

结构伪类选择器
   先选择第N个儿子，再看此元素是否为要设定的元素。
   E: first-child
   E: nth-child
   E: last-child
   先筛选元素，再选择元素当中的第N个元素。
   E: first-of-type
   E: nth-of-type
   E: last-of-type

超链接伪类选择器
   a:link 点击之前
   a:visited 点击后
   a:hover 悬浮时
   a:active 点击时

注意: a:link > a:visited > a:hover > a:active

选择器示例：

/* 基本选择器 */  
body {  
  background-color: lightblue;  
}  
  
/* 类选择器 */  
.name {  
  color: red;  
}  
  
/* ID选择器 */  
#name {  
  font-size: 20px;  
}  
  
/* 通配选择器 */  
* {  
  margin: 0;  
  padding: 0;  
}  
  
/* 群组选择器 */  
h1, h2, p {  
  line-height: 1.5;  
}  
  
/* 层次选择器 */  
div p {  
  color: blue; /* 选择div元素的后代p元素 */  
}  
  
div > p {  
  font-weight: bold; /* 选择div元素的直接子元素p */  
}  
  
div + p {  
  text-decoration: underline; /* 选择紧接在div元素后的兄弟元素p */  
}  
  
div ~ p {  
  color: green; /* 选择div元素的所有兄弟元素p */  
}  
  
/* 结构伪类选择器 */  
li:first-child {  
  color: purple; /* 选择每个li元素的第一子元素 */  
}  
  
li:nth-child(2) {  
  background-color: yellow; /* 选择每个li元素的第2个子元素 */  
}  
  
li:last-child {  
  font-style: italic; /* 选择每个li元素最后的一个子元素 */  
}  
  
li:first-of-type {  
  border: 1px solid black; /* 选择每个li元素的第一类型子元素（如果li中有其他元素类型） */  
}  
li:nth-of-type(3) {  
  text-decoration: overline; /* 选择每个li元素中的第3个类型子元素 */  
}  
li:last-of-type {  
  font-weight: bold; /* 选择每个li元素的最后一个类型子元素 */  
}  
  
/* 超链接伪类选择器 */  
a:link {  
  color: orange; /* 选择未被访问的链接 */  
}  
a:visited {  
  text-decoration: none; /* 选择已被访问的链接 */  
}  
a:hover {  
  background-color: pink; /* 选择鼠标指针浮动在其上的链接 */  
}  
a:active {  
  font-size: 18px; /* 选择活动链接，即用户点击链接时 */  
}

常用样式属性

背景属性
   background-color ：背景颜色
   颜色表示方式: 1.英语单词   2.十六进制例如: #00FFFF   3.rgb(0,255,255)   4.rgb(0,255,255,0.3)
   background-image: 背景图片
   background-repeat：背景平铺 [1.repeat 2.no-repeat 3.repeat-x 4.repeat-y]
   background-position: 背景定位
   background-size : 背景尺寸
   background: 背景图片背景颜色背景定位背景平铺

body {  
      background-color: #f2f2f2;  
      background-image: url("background.jpg");  
      background-repeat: no-repeat;  
      background-position: center center;  
      background-size: cover;  
    }

文本属性
   color: 文本颜色
   text-align：文本水平对齐方式
   text-decoration: 文本装饰
   text-indent: 文本缩进
   line-height：行高
   letter-spacing：字母间距
   word-spacing：字间距
   text-shadow：文本阴影   [阴影颜色 X偏移 Y偏移模糊半径]

 body {  
      color: #333; /* 文本颜色 */  
      text-align: center; /* 文本水平对齐方式 */  
      text-decoration: underline; /* 文本装饰 */  
      text-indent: 20px; /* 文本缩进 */  
      line-height: 1.5; /* 行高 */  
      letter-spacing: 2px; /* 字母间距 */  
      word-spacing: 5px; /* 字间距 */  
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文本阴影 */  
    }

字体属性
font-size: 字体大小
font-family: 字体系列
font-style : 字体风格
font-weight：字体粗细 [100-900]
font-variant ：字体变形
font: 字体 [风格粗细大小系列]

  body {  

    font-size: 16px;  
    font-family: Arial, sans-serif;  
    font-style: italic;  
    font-weight: bold;  
    font-variant: small-caps;  
  }

列表属性
list-style-type：列表风格类型
list-style-image：列表风格图片
list-style-position：列表标志定位
list-style：综合型列表风格

    ul {  
      list-style-type: square;  
      list-style-image: url('bullet.png');  
      list-style-position: outside;  
    }  

    ul.custom {  
      list-style: none;  
    }

-元素分类
1.块元素 p,hx,div,ul,li...
特点：独占一行，有宽度和高度
2.内联元素 strong,em,img.....
特点：不独占一行，没有宽度和高度

元素类型转换(display)
-block:块元素
-inline:行元素
-inlin-block:块-行元素
-none:没有

曹喜洋

关注

19
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
HTML的基本结构和常用标签以及CSS

颜色表示方式: 1.英语单词 2.十六进制例如: #00FFFF 3.rgb(0,255,255) 4.rgb(0,255,255,0.3)-text(文本框) -password(密码框) -submit(提交) -reset(重置) -button(普通) -image(图片按钮)注意: a:link > a:visited > a:hover > a:active。：提供有关HTML文档的元信息。E>F : 选择E元素的子F元素设定样式【子类选择器】
复制链接

扫一扫