html学习基础（一）

最新推荐文章于 2022-05-28 19:04:24 发布

mikw999

最新推荐文章于 2022-05-28 19:04:24 发布

阅读量324

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/mikw999/article/details/100740109

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一，HTML语法骨架格式

<!DOCTYPE html> <!--文档类型，告诉我们使用哪个版本，浏览器才能按照指定文档进行解析 -->
<html lang="en"> <!--html标签：作为所有html中标签的跟节点。-->
<head> <!-- head标签：作用存放title,mate,base,style,scrpti,link 在head标签中我们必须要设置的是title -->

	<meta charset="UTF-8"> <!--charset 字符集 utf-8是通用的 -->
	<!-- META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。详情见他的属性 -->
	<title>Document</title>
	  <!-- 网页的标题 -->
</head>
<body>
  <!-- 页面在主体的部分，用预存放所有的html标签，如p,h,a,b,u等等 -->
</body>
</html>

二，HTML标签的关系：

分为2种，1.嵌套关系，2并列关系（就是字面意思很简单）

三，HTML标签语义化：

语义化标签作用：
1，方便代码阅读维护
2，让浏览器或者是网络爬虫更好的解析，从而更好地分析内容
3，会有更好的搜索引擎优化

四，HTML标签

1，排版标签：

主要和css搭配使用，显示网页结构的标签，也是网页布局最常用的标签
~1，标题标签: h1到h6
语法格式如：<h1>文本</h1>
~2，段落标签: p 语法<p> 内容< /p>
~3，水平线标签: <hr /> 单标记
~3，换行标签: <br /> 单标记
~4，排版标签div span: <div> 盒子 </div> <span> 行 </span>
~5，文本格式化标签: 在这里插入图片描述
~6，标签属性
语法：<标签名属性1=“属性值” 属性2=“属性值” ... >内容 </标签名>
标签可以有多个属性，必须写在开始标签中，标签名和属性，属性和属性之间以空格分开
任何标签的属性都有默认值，省略不写则就是默认值
如<hr width="400" />
后面css可以更好更方便的来调整布局，所以不推荐属性标签来控制

~7，图像标签
语法<img src=“图片URL” />
在这里插入图片描述
~8，链接标签
语法
<a href=" 跳转的目标" target =“弹出的方式”>文本火图像</a>

href 用于指定链接目标的URL地址，当标签是herf属性的时候，就可以有超链接的功能
targer：指定的打开方式取值有self和blank两种，self为默认值，blank为在新窗口打开的方式

重点： ’

1，外部链接需要添加http://www.baidu.com
2，内部链接直接连接内部页面的名称比如<a herf="index.html">首页</a>
3，当没有确定好链接目标时候，可以用herf=“#” 来暂定一个空链接
4，除了文本，网页中的元素如图像，表格，视频等都可以添加超链接

锚点定位
通过创建锚点可以让用户快速的定位到指定内容
1，使用a herf="#id名"链接文本 /a“ 创建链接文本
2，使用相应的id名跳转目标位置
如<a href="#test1"> Test Test</a>
<h3 id="test1"> 内容</h3>
3，可以通过设置base标签整体设置链接打开方式

<head>   
    <meta charset="UTF-8">   
    <base target="_blank">
    <title>Document</title>
</head>

~9，特殊字符标签
在这里插入图片描述

五，相对路径

1，图像文件和HTML位于同一文件夹内;只需要输入图像文件的名称即可如<img src="logo.fig" />
2,图像文件位于HTML文件的下一级文件夹；输入文件夹名和文件名用”/“隔开
<img src="img/img01/logo.gif" />
3,图像文件位于HTML文件的上一级文件夹内，则在文件名之前加入” …/“ 上两级就加2个，以此类推<img src= ../logo.gif />

六，绝对路径

“C:/web/img/ligo.gif” 或者是"http://www.baidu.com/logo.gif"

七，列表

1，无序列表
无序列表的各个列表之间没有顺序级别之分是并列的

<ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
</ul>

注意：
1，ul之间只能嵌套li，直接在ul标签中输入其他标签和文字是不允许的
2，<li> </li>之间相当于一个容器可以容纳所有元素
3，无序列表会有自带的样式属性，得用css替代
2，有序列表

<ol>
        <li></li>
        <li></li>
 </ol>

3，自定义列表；
自定义列表常用对术语或者名词进行解释和描述，定义列表的列表项没有任何项目符号

 <dd>
       <dt></dt>
       <dt></dt>
       <dt></dt>
   </dd>

mikw999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习基础（一）

一，HTML语法骨架格式<!DOCTYPE html> <html lang="en"> <head> <!-- head标签：作用存放title,mate,base,style,scrpt...
复制链接

扫一扫