HTML和CSS 菜鸡入门笔记

最新推荐文章于 2024-01-23 17:35:14 发布

原创最新推荐文章于 2024-01-23 17:35:14 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web

编程语言专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML和CSS的基础知识，包括HTML的基本语法、元素与属性、常用标签等；同时讲解了CSS的基本语法、选择器及样式表的应用。适合初学者快速掌握网页制作的基本技能。

HTML的介绍

超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言. HTML 运行在浏览器上，由浏览器来解析

css的介绍

CSS 指层叠样式表 (Cascading Style Sheets) 定义如何显示 HTML 元素

HTML与其他语言的对比

语言	区别
XML (Extensible Markup Language) 可扩展标记语	xml多用于存储数据,而且xml比html语法严格并且xml标签可以自定义 xml用于 roslaunch 启动文件和 android layout 布局文件
Json (JavaScript Object Notation) 数据交换格式语言
QML (Qt Markup Language) qt专用标记语言	QMLl用于 qt quick
markdown 普通文本编辑器编写的标记语言	markdown是会被浏览器解析成html然后展示 markdown便于编辑，像笔记本

HTML 环境配置

任意一个浏览器这里推荐星愿浏览器
notepad++ 和其插件preview html

HTML 语法结构

基本语法

元素与属性

<a href="https://www.runoob.com"/> 	 <!-- 其中a是元素(<a></a>或<a/>) 而href是属性后面"值"(name="value")-->

CSS 语法结构

基本语法

基本组成

选择器 {属性1:值;属性2:值;}

id与class选择器

1.id选择器 #para1{text-align:center;color:red;} 	/* id相当于人的身份证，不可以重复 以#开头 */ 
			<p id="para1">Hello World!</p> 
2.class选择器 .center{text-align:center;} 		/* class相当于人的名称可以重复 以.开头 */
			<h1 class="center">标题居中</h1>

内部和外部样式表

1.内部样式表 <style> hr {color:sienna;} </style> /* 使用 <style> 标签在文档头部定义 */
2.外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

HTML 常用标签

预处理标签

HTML版本声明

 <!-- 一定要位于文档最前面得到位置，让浏览器知道用哪个版本的html -->
<!DOCTYPE html>

头部预处理

 <!-- 头部标签 -->
 <!-- 包含 <title>, <style>, <meta>, <script> -->
<head>
	<meta charset="utf-8"> 
	<title>文档标题</title>
</head>

文本编辑标签

标题和段落

<!-- 标题标签 -->
<!-- 1是标题等级 还有2 3 4.. -->
<h1>这是一个标题</h1>
<!-- 段落标签 -->
<p>这是一个段落。</p>

超链接

<!-- 超链接标签 -->
<a href="https://www.runoob.com"/>这是一个链接</a> 
  
<!-- 按键超链接 -->
<a href="超链接地址"><input type=button value="按钮" ></a>

媒体

图片

<!-- 图片标签 -->
<!-- 属性 1.比例缩放 style="zoom:33%;"  2. 自定义长宽 width="258" height="39" -->
<img src="/images/logo.png"/>

视频

<!-- 视频标签 -->
<!-- src: 要播放视频的url -->
<!-- autoplay: 准备就绪就马上播放 -->
<!-- controls: 需要点击播放按钮才进行播放 -->
<video src="movie.ogg" controls="controls"></video>

画布

<!-- 画布标签：一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制 -->
<!-- 在js创建对象: var context = canvas.getContext("2d"); -->
<canvas id="myCanvas" width="200" height="100"></canvas>


[canvas标签](https://www.runoob.com/html/html5-canvas.html) [更多处理画布的方法](https://www.webhek.com/post/save-canvas-to-image.html)



- ### 事件标签

##### 按钮标签

```html
<!-- 按钮标签 -->
<button id="xxx">点我!</button>

<!-- 按下属性,触发JavaScript脚本的函数: -->
<button onclick="script()">复制文本</button> 

<!-- 按下属性,触发链接 -->
<a href="超链接地址"><input type=button value="按钮" ></a>

其他标签

表单标签

<!-- 与服务器php交互的表单标签 -->
<!-- action: 填url 指定发送给的php -->
<!-- enctype: 编编码格式  -->
<!-- method: 指定的$_POST变量  -->
<form action="form_action.php" method="get">
	xxxx
</form>