web前端基础-02 HTML基础

最新推荐文章于 2021-12-26 21:08:03 发布

shandy_liunian

最新推荐文章于 2021-12-26 21:08:03 发布

阅读量315

点赞数 3

文章标签： web前端基础

本文链接：https://blog.csdn.net/shandy_liunian/article/details/101212223

版权

一、HTML 框架

HTML基本结构
文件的头部可以定义html文件的样式，JS行为等,不显示在页面
文件的主体由组成HTML的各种标签构成，<p> </p>，<div> </div>等构成，完全显示在页面

二、标签的结构

标签有尖括号<>包裹起来
标签通常成对出现，但也有一些单标签(如:换行 <br>、水平分割线 <hr>、图片标签<img>等)
每一对标签称为一个元素(如：<p> </p>)

三常用的基本标签

3.1 标题标签

标题标签包括<h1> </h1><h2> </h2><h3> </h3>…
数字越大，标题的字号越小(类似Word中的一号字体、二号字体…)

3.2 段落标签

段落标签的格式 <p aglin=“left”> </p>
aglin 为段落标签的对齐属性，其值可以为left（左对齐）、right（右对齐），justify（两端对齐）
段落标签的注意事项
a. 每一个<p> </p>包裹的为一个段落，在段落中增加换行标签<br>，仅仅只是换行，并没有将一个段落拆分为两个段落
b.两个空格符"&nbsp；"(;应为英文状态下的)不等于首行缩进两个字符
c.<pre> </pre>也是段落标签，但该标签可以保存段落的原始书写格式
```
    <!DOCTYPE html>
    <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>Document</title>
 	</head>
 	<body>
 		   <pre>我是小妖怪，逍遥又自在。
 			杀人不眨眼，吃人不放盐。
 			一口七八个，肚子要撑破。
 			茅房去拉屎，想起忘带纸。</pre>	
 	</body>
 	</html>
```

输出结果如下：
输出结果一

3.3 修饰标签

字体倾斜标签 <i> </i> 或者 <em> </em>
字体加粗标签 <b> </b> 或者 <strong> </strong>
删除线标签 <del> </del>
下划线标签 <ins> </ins>
上标 <sup> </sup>
下标 <sub> </sub>

3.4 常用的符号（；均应为英文状态）

空格符 &nbsp；
大于号 &gt；
小于号 &lt；
已注册 &reg；
版权声明 &copy；
商标 &trade；

3.5 列表标签

3.5.1. 无序列表标签

无序列表的格式

      <ul type=" ">
               <li>.....</li>
               <li>....</li>
      </ul>

无序列表的属性
type为无序列表的显示属性，其值可以是circle（小圆圈），disc（实心点），square（正方形）。但由于不同的浏览器的兼容问题，导致该图标在不同浏览器中的显示大小不同，所以一般用其他小图片代替。

3.5.2 有序列表标签

有序列表的格式

    <ol type=" ">
               <li>.....</li>
               <li>....</li>
      </ol>

有序列表的属性
type为无序列表的显示属性，其值可以是1（数字类型），a（小写数字类型），A（大写数字类型），i（小写罗马数字类型），I（大写罗马数字类型）。

3.5.3 定义列表标签

定义列表标签的格式

         <dl>
                  <dt>定义列表项</dt>
                  <dd>定义列表描述项</dd>
         </dl>

虽然页面展示中dt和dd看起来是包含关系，但实际dt和dd为同级关系

3.5.4 图片标签

图片标签的格式

<img src = "..."  alt = "..." height = "..." width = "...">

图片标签的属性
src 为图片所在的路径，一般可以分为绝对路径和相对路径
绝对路径   从盘符开始写的图片的完整路径
相对路径   图片相对于当前文件所在位置的存放路径
与当前文件同级    XXX.jpg
在当前文件的上一级 …/XXX.jpg
在当前文件的下一级 img/XXX.jpg

    <!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<!-- 在当前文件html基础。html 的下级 -->
	    <img src="img\蔚蓝cp.jpg" alt="">
	    <!--与当前文件同级  -->
	    <img src="魏无羡.jpg" alt="">
	    <!-- 在当前文件上级 -->
	    <img src="..\Amyweb\魏无羡.jpg" alt="">
	</body>
	</html>

alt 为图片的替换属性，当图片加载不出来时，用alt中的文字代替
height 为图片的高度，当其值为百分比时，所代表的图片的大小是相对于父级元素来说的
width 为图片的宽度，当其值为百分比时，所代表的图片的大小是相对于父级元素来说的

3.5.5 超链接标签

超链接标签的格式

 <a href = " ..."  target = "..." name = "..."></a>

超链接标签的属性
href 为链接地址可以分为站内链接地址和站外链接地址

       站内链接     与当前页面出自同一个系统（如：XXX.html）
       站外链接     来自于另一个系统的网站地址(如：http://www.baidu.com)

target 为链接跳转页面的地址通常包括两种同页面跳转和不同页面跳转

       当其值为“_self” 或者为空时，则表示在相同页面进行跳转
       当其值为“_blank”时，则表示在不同页面进行跳转或者跳转到新的一页

title 当鼠标放置在某一超链接时，鼠标箭头右下角出现相应的提示信息
name 可以实现超链接的定位跳转
同页面定位跳转

       <!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
		</head>
		<body>
			<a href="#魏无羡">魏无羡</a>
			<a href="" name="魏无羡"><img src="img\魏无羡.jpg" alt=""></a>
			<a href="#蔚蓝cp">蔚蓝cp</a>
			<a href="" name="蔚蓝cp"><img src="img\蔚蓝cp.jpg" alt=""></a>
		</body>
		</html>

不同页面定位跳转

        <!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
		</head>
		<body>
			<a href="../Amyweb/第一节html基础/图片标签.html#魏无羡">魏无羡</a>
			<a href="../Amyweb/第一节html基础/图片标签.html#蔚蓝cp">蔚蓝cp</a>
		</body>
		</html>

       <!-- 不同页面跳转时，锚标签需要在所跳转页定义  (定义到图标标签.html) -->
       <a href="" name="蔚蓝cp"><img src="img\蔚蓝cp.jpg" alt=""></a>
	   <a href=""  name="魏无羡"><img src="img\魏无羡.jpg" alt=""></a>

超链接的其他应用
电子邮件地址：

        <a href="mailto:邮件地址">邮件地址</a>

文件下载：

       <a href="所需下载文件的存放位置">点我下载</a>

shandy_liunian

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端基础-02 HTML基础

一、HTML 框架文件的头部可以定义html文件的样式，JS行为等,不显示在页面文件的主体由组成HTML的各种标签构成，<p> </p>，<div> </div>等构成，完全显示在页面二、标签的结构标签有尖括号<>包裹起来标签通常成对出现，但也有一些单标签(如:换行 <br>、水平分割线 <...
复制链接

扫一扫