HTML和CSS精简知识

叶里随风

已于 2023-06-30 14:18:18 修改

阅读量108

点赞数

文章标签： html5 css

于 2023-06-30 14:18:07 首次发布

本文链接：https://blog.csdn.net/qq_21313581/article/details/131470861

版权

HTML和CSS精简知识

HTML

 <!DOCTYPE html>:文档类型声明，该声明表示该文件为 HTML5文件。且该声明一点是位于 HTML 文档内容的第一行。

<html></html>:根标签
<head></head>:头部标签
<title></title>:页面标题标签——标签之间的内容是网页的标题信息
<meta charset="utf-8">: 设置当前文件字符编码格式
<body>:正文/体标签     正文才是重点
<style></style>:设置当前文件的样式
h1--h6:字体标题标签
<p></p>:段落标签
<br/>:实现换行效果 相当于使用了回车
<hr>:实现一条水平线效果
<b>:加粗效果
<i>:斜体
<font>:字体标签
<footer>:底部标签
<aside>:侧边栏标签
<img src="资源路径">:图片标签
<ul><li>可实现无序列表
<ol><li>可实现有序列表
<table></table>：表格
<tr></tr>:行
<td></td>:列
<th></th>:表头
<form>:创建表单 所有的表单控件 包括文本框、文本域、单选框、复选框、按钮等 都需要在此表单中
<input type=""> 文本框
type类型：text  文本输入框；password：密码输入框； radio：单选框； checkbox：复选框; button:按钮
<textarea>:创建文本域
<select><option>内容选择</option></select>:创建下拉菜单
type:submit  提交按钮  ;  reset 重置按钮    value：按钮值

CSS

CSS和HTML结合方式

1.内联

<p style="color:red;font-size:12px">这是内联方式</p>

2.内部

<style>
    p{
       color: red;
        font-size: 12px;
    }
</style>

一般写在head内部

3.外部
使用link标签将外部css样式引入到HTML文件

选择器

语法结构
选择器{
样式;
}

类选择器

.类选择器名{
	css样式
}

标签选择器

标签名{   //如div、p、h1诸如此类
	css样式
}

id选择器

#id选择器名称{   
	css样式
}

通用选择器

*{   
	css样式
}

选择器的优先级
内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

元素分类：块状元素、内联元素(又叫行内元素)和内联块状元素
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>