Html1 - 技术栈

一，HTML概述

网页开发需要学习的知识：

html

css

javaScript

两个框架

VUE.js

ElementUI UI user interface 用户界面

HTML xml 可扩展标记语言-->存储数据

Markup Language标签语言都会提供各种标签

html （HyperText Markup Language）超文本标记语言

文本：文字字符

超文本：指的是网页内容

标记：标签标识 eg：买商品，商品上有标签，介绍了商品信息

超文本标记语言中会提供许多不同功能的标签，使用这些标签来修饰我们这些网页的内容，通过浏览器运行解释网页，最终运行出我们想要的效果

html语言就是一种标记语言，提供了许多的标签，不同的标签功能不同

网页就是通过这些标签描述出来的

最终有浏览器解释运行成我们看到的网页

eg： <a href="地址">百度</a> 定义一个超链接

二，HTML基本语法

1. html注释样式

2.HTML基本样式

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

（1）<!DOCTYPE html>

声明html语言的版本信息，告诉浏览器以html5标准解释运行

（2）<html> </html>

骨架标签，根标签

所有标记语言都必须有一个根标签

html是网页中的根标签，所有内容都应该写在此标签中

（3）<head> </head>

头标签主要对网页做设置：字符编码，标题，css样式，js脚本

包含了所有头部标签标签

头部区域的标签都有：<title>，<style>,<meta>,<link>,<script>

<title>：定义网页标题

（4）<body></body>

身体标签，用来写网页内容

3.标签

HTML中的标记指的就是标签

HTML使用标记标签来描述网页

（1）标签结构和写法

1.闭合标签（双标签）

2.自闭合标签：只有标签名，没有开始结束，完成一个特定的功能即可

<标签名>

<开始标签>标签体</结束标签> 闭合标签(双标签) 只对标签体内的内容进行修饰

（2）标签属性

<标签名属性="" />完成一个特定的设置功能,没有标签体自闭和标签(单标签)

标签中可以有属性:可以标签属性改变变迁愿挨的显示风格

属性写在标签的开始标签中

一个标签可以有多个属性

属性名 = "值"

三，基本常用标签

1，标题标签

共六种区别为从大到小，一个标签占一行

2，换行标签

<br/>

在前端代码中按enter键只能对代码进行换行，但向浏览器渲染时无法换行

所以使用<br/>换行（可被扫描识别）

3，段落标签

<p></p>p

一个<p>标签，代表一个独立段落，段落与段落之间有间隔

4，列表标签

（1）无序列表

html 复制代码

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

（2）有序列表

html 复制代码

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

通过给标签<ol>加属性type将其改为不同序列的有序标签

样式：<ol type=" ">

5，超链接

<a></a>

HTML使用超链接与网络上另一个文档相连，通俗的说就是使用超链接来访问其他网页资源

href 链接所要超链接地址

taeget 选择打开位置，_self在超链页面打开覆盖原本页面，_blank另起新窗口打开

6，图片链接

<img/>

注：图片的宽高一般不建议使用

7，转义字符

在HTML中预留了一些字符，这些字符不能再网页中直接使用

&lt；小于号

&gt；大于号

&nbsp；空格

&copy；版权（C）

&reg；注册商标（R）

&trade；商标（TM）

8，表格

（1）构成表格的标签

table标签：表格标签

tr标签：表格中的行

th标签:表格的表头（作为表头，其中数据会加粗，居中）

td标签：表格单元格

（2）表格的基本结构

html 复制代码

<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>

（3）表格属性

width：定义宽

height：定义高

cellpadding 只能写在table中定义表格数据距表格边框距离内边距

cellspacing 只能写在table中定义不同单元格之间距离外边距

align="内容水平方向对齐方式" left（默认） center right

valign="内容垂直方向对齐方式" top middle（默认） bottom

colspan="4" 合并列从哪里额开始合并，在那列添加colspan="合并的数量" 记得删除多余的单元格

rowspan="4" 跨行合并单元格

例子：

eg1

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 table 表示一个表格  可以设置宽和高
		 cellpadding 只能写在table中 定义表格数据距表格边框距离   内边距
		 cellspacing 只能写在table中 定义不同单元格之间距离      外边距
		 tr    表示一行      设置行高
		 th    表示一个单元格，还是表头，内容会加粗，并且居中
		 td    表示一个单元格，
		 
			align="内容水平方向对齐方式" left（默认） center right
			valign="内容垂直方向对齐方式" top middle（默认） bottom
		 表格中的数据都只能写在单元格中
		 -->
		<table border="1" width="400" >
			<tr height="80" width="600">
				<th>姓名</th>
				<th>java</th>
				<th width="800">c</th>
				<th>python</th>
			</tr>
			
			<tr>
				<td>张三</td>
				<td>50</td>
				<td>80</td>
				<td>90</td>
			</tr>
			
			<tr height="100" >
					<td align="center">张三</td>
					<td valign="bottom">50</td>
					<td align="center" valign="top">80</td>
					<td>90</td>
				</tr>
			
			
			<tr>
					<td>张三</td>
					<td>50</td>
					<td>80</td>
					<td>90</td>
				</tr>
			
		</table>
		
	</body>
</html>

eg2

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 快捷键  table>tr*4>td*4 创建一个4行4列的表格 -->
		<!-- colspan="4" 合并列 从哪里额开始合并，在那列添加colspan="合并的数量" 记得删除多余的单元格  -->
		<!-- rowspan="4" 跨行合并单元格  -->
		<table border="1" width="400" height="300" >
			<tr>
				<td colspan="4"></td>
			
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td rowspan="4"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				
			</tr>
		</table>
		
	</body>
</html>