当前位置：首页 > news >正文

Html1

news 2025/4/30 7:29:30

一，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基本样式

<!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）标签属性

<标签名属性="" />完成一个特定的设置功能,没有标签体自闭和标签(单标签)
       标签中可以有属性:可以标签属性改变变迁愿挨的显示风格
       <body text="red" bgcolor="green">
       属性写在标签的开始标签中
       一个标签可以有多个属性
       属性名 = "值"

三，基本常用标签

1，标题标签

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

2，换行标签

<br/>

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

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

3，段落标签

<p></p>p

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

4，列表标签

（1）无序列表

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

（2）有序列表

<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）表格的基本结构

<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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- table 表示一个表格  可以设置宽和高cellpadding 只能写在table中 定义表格数据距表格边框距离   内边距cellspacing 只能写在table中 定义不同单元格之间距离      外边距tr    表示一行      设置行高th    表示一个单元格，还是表头，内容会加粗，并且居中td    表示一个单元格，align="内容水平方向对齐方式" left（默认） center rightvalign="内容垂直方向对齐方式" 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

<!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>

查看全文

http://www.xdnf.cn/news/215281.html