chen.c.
chen.c.

Web前端 HTML、CSS

HTML与CSS

  • HTML、CSS思维导图
  • 一、HTML
    • 1.1、HTML基础文本标签
    • 1.2、图片、音频、视频标签
    • 1.3、超链接、表格标签
    • 1.4、布局
    • 1.5、表单标签
    • 1.6、表单项标签综合使用
    • 1.7、HTML小结
  • 二、CSS（简介）
    • 2.1、引入方式
    • 2.2、选择器
    • 2.3、CSS属性

Web前端开发总览

Html：负责结构。
CSS：优化界面。
JavaScript：行为逻辑。
Vue：简化JavaScript的开发框架。
Element： 基于Vue的前端组件库，快速构建网页。

HTML、CSS思维导图

Web前端 HTML、CSS_第1张图片

一、HTML

HTML（HyperText Markup Language）：超文本标记语言。

● HTML结构

<html>  根标签
	<head> 头部标签
			<title>内容title> 内容不显示在网页内(标题标签)
	head>
	<body>  
		网页内容(写网页内容,所有的网页内容都写在body标签内)
	body>
html>

1.1、HTML基础文本标签

标签 描述

~

 定义标签,h1最大，h6最小
定义文本的字体、字体大小、字体颜色
定义粗体文本
定义斜体文本
定义文本下划线
定义文本居中

定义段落

定义拆行
定义水平线

注意点：

HTML标签对大小写不敏感，前面的所有标签即使换成大写也能完成相应功能。

代码实现

<html>
<body>
 
	<h1>H1标签h1>
	<h2>H2标签h2>
	<h3>H3标签h3>
	<h4>H4标签h4>
	<h5>H5标签h5>
	<h6>H6标签h6>


	<font color = "#0000ff" size = "8"> HTML font标签font><br> 

	
<hr>
	
	<center>HTML居中标签center>
<hr>
	
	<i>斜体i><br>
	
	<b>加粗b><br>
	
	<u>下划线u><br>
	
	
	<i><b> 斜体加粗 b>i><br>
<hr>
		
	<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。p>
	<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。p>
body>
html>

运行效果

Web前端 HTML、CSS_第2张图片

1.2、图片、音频、视频标签

： 定义图片

  • src ： 规定显示图像的url
  • height ： 定义图像的高度
  • width： 定义图像的宽度

<img src = "img/01.jpg" alt = "一张图片" height = "200" width = "300">

： 定义音频（支持MP3、MAV、OGG）

  • src ： 规定音频的url
  • controls ：显示播放控件

注意：

标签中的属性和属性值相同，可以省略属性值


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

可以省略为：


<audio src = "audio/01.mp3" controls height="200" width="300"> audio>

： 定义视频（支持MP4、WebM、OGG）

  • src ： 规定视频的url
  • controls ： 显示播放控件

<video src = "video/01.mp4" controls height = "200" width = "300">video>

1.3、超链接、表格标签

： 定义超链接，用于链接到另一个资源。

  • 常见属性：
    • href：指定访问资源额URL。
    • target：_self，默认值，在当前页面打开：_black，在空白页面打开
<a>www.csdn.coma>

：定义表格。

  • border：规定表格边框的宽度。
  • width：规定表格的宽度。
  • cellspacing：规定单元格之间的空白。

：定义行。

  • align ：定义表格行的内容对齐方式。

：定义单元格。
：定义表头单元格。

1.4、布局

： 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面。（会换行）
：用来组合行内元素。（不会换行）

代码演示


<div>div1的标签div>
<div>div2的标签div>


<span>span1的标签span>
<span>span2的标签span>

运行效果

Web前端 HTML、CSS_第3张图片

1.5、表单标签

表单 ： 在网页中主要负责数据采集功能，使用

标签定义表单。

表单项 ：不同类型的 input 元素、下拉列表、文本域等。

  • ： 定义表单项，通过type属性控制输入形式。