首页 > 其他分享> > 【HTML、-HX学习】网页前端学习笔记（一）

【HTML、-HX学习】网页前端学习笔记（一）

2022-02-04 21:02:00 作者：互联网

一、软件的下载

1，HX的特点：vue开发强化，小程序支持，markdown利器，强大的语法提示，高效极客工具，更强的json支持。

2，文件来自学长的压缩包，在众多Markdown源文件里面找到了两个应用程序，直接打开，很行。

二、视频学习--HTML概述和常用标签

》》》视频在这里！

HTML为基础，CSS、JS类似于扩展

1.超文本标记语言

2.基础语法<>单标签，双标签，有无属性

单标签无属性 <br/>换行 <hr/>分割线

单标签有属性 <hr width="800" />

双标签无属性 <title>_</title>

双标签有属性 <body bgcolor="red">_</body>

3.整体结构

标记头区 title，内容区 body，网页区 html

title---是主要提示，标签

link---用来引入css

scrip---用来引入js文件或编写js代码

4.常用标签

（1）标题和水平线

<h1></h1>///1~6

h元素---拥有确切的语义，叠层样式表定义可以有漂亮的效果，但是/h1标签可以为搜索引擎获取，便于检索，h1过多可能进入搜索引擎黑名单

块级元素，可以自动换行

（2）段落和换行

<hr />

默认屏幕等宽

color，颜色

size，粗细

width，宽度，百分比，像素px

align，对齐方式

（3）列表

无序列表<ul type="square"></ul> ---circle(实心点，默认）---disc（空心点） ---square（方块）

有序列表<ol type="1">---1.内容

（4）div和span

div（层）---是万能的标签，可替换任意，结合css，页面排版，块，默认一整行

<div style="width:100px;height:100px;"align="center"></div>---center居中

span---标签，行内元素（不会自动换行）

（5）格式化标签

font---规定文本的字样、字体尺寸、字体颜色 face，size，color

pre---定义预格式化的文本，被包含在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

&nbsp； ---空格符

b---加粗

i---倾斜

u---下划线

del---中划线

sup---上标，平方

sup---下标，h2o那种

（6）a标签

超链接---切换

锚点---定位

常用属性：

href，链接所跳转的位置，可能是其他或当前页面（必须属性）

target窗口打开的方式

_self---当前

_blank---空白窗口

作为锚点：

a标签的name属性值----<a name="top"></a>

其他的id属性值---<div id="top"><div>

锚点的使用---<a href="#top"></a>

(7)img标签

src---需要引入的图片地址（必须属性）

alt---当图片破损或不存在时，显示文本的内容

title---当鼠标悬停在图片上时显示的文本

width---突破安定宽度

height---图片的高度

border---图片边框

（8）表格标签

table---表格，设置宽度（width），高度一般默认，border边框，align对齐方式

tr---行

td---标准单元格

th---表头（字体居中，加粗效果）

三、跟随视频进行代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是一个HTML页面---常用标签</title>
	</head>
	<body>
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		hello <br>word
		<hr>
		<hr color="palevioletred" size="3" width="50%" align="left">
		<ul type="square">
			<li>概述</li>
			<li>常用标签1</li>
			<li>常用标签2</li>
		</ul>
		<ol type="1">
			<li>概述</li>
			<li>常用标签1</li>
			<li>常用标签2</li>
		</ol>
		<div style="width:500px;height:100px" align="center">这是一个div</div>
		1111<br>
		<span>这是一个span</span>
		1111
		<hr>
		<font color="aqua" size="5">你好</font>
		<font color="aqua" size="5" face="楷体">你好</font>
		<pre>
			hello
			world!
			!     !!
		</pre>
		<p><b>欲买</b><strong>桂花</strong><i>同载酒</i>，<u>只可惜</u><del>故人</del></p>
	</body>
</html>
未完，有继续

四、提交作业

标签：---,HX,标签,常用,学习,HTML,文本,属性
来源： https://blog.csdn.net/Mo_none/article/details/122777851