首页 > 其他分享> > 前端之HTML

前端之HTML

2022-01-19 22:03:02 作者：互联网

今日内容

HTML简介
HTML基本标签
- head 内基本标签
- body 内基本标签
HTML常用符号
HTML重要标签
- div 标签与 a 超链标签与 img 图片标签
- 列表标签
- 表格标签

内容详细

一、HTML简介

HTML: 超文本标记语言（Hyper Text Markup Language）

是构造网页的骨架，几乎所有的网站都是由HTML构建而成

不是一门编程语言没有任何的逻辑只有固定的标记功能

1、HTML标签的分类

	1.双标签(有头有尾)
		<a></a>
	2.自闭合标签(单标签)
		<img/>

2、HTML文档结构

<html>
    <head>
        编写给浏览器查看的内容
    </head>
    
    <body>
        编写展示给用户查看的内容
    </body>
    
</html>

3、HTML语法注释

单行注释： <!--注释语法-->
多行注释： 
          <!--
          多行注释
          多行注释
          -->

4、创建HTML文件

存档网页骨架的文件后缀名一般都是.html，该类型文件主要的打开方式为浏览器形式

以pycharm为例
右键new点击HTML FILE创建即可
如何打开展示
右上方会提供多种浏览器(注意需要提前下载)

编写HTML标签的时候不需要自己写大括号小括号只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)

二、HTML基本标签

1、head内常见标签

title		定义网页标题
style		内部支持css代码
script	内部支持编写js代码 还可以通过src属性导入外部js文件
link		通过href属性引入外部的css文件
meta		定义网页源信息
					keywords关键字搜索
  				description网页描述信息
<!--
在html文件中 可以编写html和css以及js
	但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展
-->

2、body内基本标签

h1~h6	标题标签
p			段落标签
b			加粗
i			斜体
u			下划线
s			删除线
br		换行
hr		水平分割线
"""有时候相同的样式 可能有多种标签可以实现!!!"""

标签分类

分类1:单双标签

分类2:

块儿级标签 h1~h6 p --> 独占一行(后期可以通过css实现不占一行)

行内标签 u i s b --> 自身文本多大就占多大,不会换行

三、HTML常用符号

&nbsp;		空格
&gt;			大于号
&lt;			小于号
&amp;			&符号
&yen;			羊角符
&copy;		版权符
&reg;			注册

四、HTML重要标签

标签的两大重要属性

1.id属性		个体查找
	类似于标签的身份证号 在同一个html页面上id不能重复
2.class属性	群体查找
	类似于python面向对象中的类的继承
  	可以将多个标签划为一类
		<h1 class='c1'></h1>
		<p class='c1'></p>
    并且一个标签可以有很多类
		<h1 class='c1 c2 c3'></h1>
		<p class='c1 c8 c9'></p>

1、div 标签与 a 超链标签与 img 图片标签

div 标签

网页在制作之前需要提前布局好
布局标签
	div			块儿级标签
	span		行内标签

a 超链标签

a标签>>>:链接标签
  	用法1:通过href属性指定网址(URL)点击跳转
      	跳转过程中有两种方式
			1.当前页面跳转	target="_self"  默认	
			2.新建页面跳转	target="_blank"
    用法2:锚点功能
			通过href属性指定标签的id值点击即可跳转到对应位置

img 图片标签

img标签>>>:图片标签
  src属性指定图片地址
  	可以是本地的地址也可以是网络上的地址
 	alt属性编写文本
  	用于在图片无法加载出来的情况下的提示信息
  title属性写文本
  	用于鼠标悬浮在图片上之后提示的文本信息
  height、width属性写像素
  	用于调整图片的尺寸
      需要注意调整的时候 修改一个另外一个自动等比例缩放
      如果同事调整两个 那么可能会造成图片的失真

注意

标签是可以嵌套的 但是需要遵循以下规律
	块儿级标签 可以无限制的嵌套块儿级标签和行内标签
		特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签
	行内标签不能嵌套块儿级标签 可以嵌套行内标签

<!-- 网址其实并不是一个非常专业的名词
	URL:统一资源定位符
-->

2、列表标签

无序列表（重要）

前面没有用于标识数字顺序的提示
	<ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
	</ul>

<!--
网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表
要想实现需要css相关知识
-->

有序列表

	<ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
	</ol>

标题列表

	<dl>
        <dt>标题1</dt>
          <dd>内容1</dd>
        <dt>标题2</dt>
          <dd>内容1</dd>
          <dd>内容2</dd>
	</dl>

3、表格标签

# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)

# 表格标签的格式
	<table>
    <thead></thead>     表头
    <tbody></tbody>     表单
	</table>
# tr标签
	tr就表示一行
# th标签
	在表头的字段名称
# td标签
	普通的单元格数据
 
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>密码</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jason</td>
            <td>123</td>
            <td>18</td>
        </tr>
    </tbody>
</table>
"""我们只需要掌握最基本的html标签即可 至于花里胡哨的样式后面学习完前端框架之后  直接cv拷贝即可 都是别人提前写好的"""
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

标签：标签,前端,HTML,跳转,块儿,图片,属性
来源： https://www.cnblogs.com/elijah-li/p/15824290.html