WEB前端 | HTML基础——(1)XHTML基础

最新推荐文章于 2024-03-18 12:09:27 发布

Erosvan

最新推荐文章于 2024-03-18 12:09:27 发布

阅读量566

点赞数 3

分类专栏： HTML基础文章标签： html web前端 xhtml 前端基础初识html

本文链接：https://blog.csdn.net/Erosvan/article/details/52422973

版权

HTML基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、初识html

起始标记
<>
结束标记
</>

标记+特殊的字符组成标签
标签的作用就是告诉浏览器内容的起始和结束的位置

二、html基础模板

<!-- 不是标签 告诉浏览器使用html5的标准解析这个文件 -->
<!doctype html>
<!-- html标签代表的就是整个html文档 -->
<html>
     <!-- 代表整个html文档的头部 -->
     <head>
         <meta charset="utf-8"/>
         <!-- 代表网页的标题，可以显示在浏览器的选项卡中 -->
         <title>hello</title>
     </head>
     <!-- 展示网页的内容 -->
     <body>
    你好呀.
     </body>
</html>

为了规范书写，通常使用英文小写来书写代码，单标签需要闭合。

三、html基础标签

<!doctype html>
<html>
	<head>
	    <meta charset="utf-8"/>
		<title>基础标签</title>
	</head>
	<body>

		<!-- h1标签可以作为整个网页内容的标题，一般一个网页只有一个h1 -->
		<h1>宝宝离婚了</h1>
		<h2>宝宝离婚了</h2>
		<h3>宝宝离婚了</h3>
		<h4>宝宝离婚了</h4>
		<h5>宝宝离婚了</h5>
		<h6>宝宝离婚了</h6>

		<!-- 段落：每一段文字都是一个p标签-->
		<p>宝宝心里苦，但是宝宝不说，现在宝宝说了，宝宝要离婚。宝宝不知道宝宝的宝宝是不是宝宝的宝宝</p>

		<!-- 文字的容器：用来展示文字 -->
		<span>我是span标签</span>

		<!-- 容器 -->
		<div>我是div标签</div>

		<!-- b,strong,em,i标签都是用来展示文字的，其中b,strong标签是加粗效果i,em是斜体效果 -->
		<b>我是b标签</b>

		<strong>我是strong标签</strong>

		<i>我是i标签</i>

		<em>我是em标签</em>

		<!-- a链接标签，锚点；href是a标签的属性 -->
		<!-- href属性：①网址；②写自己的html文件；③#（占位符）
		target="_blank"可设置链接在新窗口打开，默认是在原来的窗口打开-->
		<a href="http://www.baidu.com" target="_blank" title="去百度呀">百度</a>


		<!-- src:①给图片的url；②给本地图片的路径
		相对路径:从本html所在的位置（文件夹）查找；../代表返回上一层文件夹
		绝对路径:从根目录查找
		alt属性：①作用是文本替代方案；②可以让搜索引擎收录图片的时候检测到我们图片的内容；③对seo有一定的优化作用
		title：鼠标悬浮在标签上面的时候会有一个提示 -->
		<img src="http://www.wallcoo.com/paint/space_1600/wallpapers/1440x900/wallcoo.com_Space_Art_wc.jpg" alt="星空" />

		<img src="/Users/lanou/Desktop/12班H5学习/HTML基础/1、XHTML基础/yuzhou.jpg" alt="星空" />

		<!-- 分割线 -->
		<hr/>
		<!-- 换行 -->
		<br/>
	</body>
</html>

四、html标签特性和CSS样式

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
	    <title>标签特性和CSS样式</title>
    </head>
    <body>
         <!-- css样式引入
         1、行间样式 -->
         <div style="background:red;width:200px;height:100px">我是div</div>
         <div>我是div2</div>
         <!-- img标签也可以改变宽和高
         第一种：通过行间样式在style属性里面写width:200px
         第二种：通过img标签的width属性直接给宽和高（一般使用第二种） -->
         <img width="300" src="yuzhou.jpg" alt="宇宙"/>

        <!-- 行级标签：(display:inline)span，a，img，b，i，em，strong，br可以与行级同行显示，宽高不能改变，只能由内容决定
        块级标签：(display:block)div，p，h1~h6，hr独占一行，高度由内容决定，宽度继承父级 -->
        <!-- display 可以改变标签的特性inline代表行级；block代表块级，行块可以互换
        display:inline-block 晚自习自测-->
         <div style="background:blue;">测试div的特性</div>

         <div style="background:grey;display:inline;">我是块级div</div>
         <span style="background:orange;display:block;">我是行级span</span>

         <!-- css文本样式、边框 -->
         <div style="color:red">文字颜色</div>
         <div style="font-size:30px;">文字大小</div>
         <div style="text-indent:20px;">文本缩进</div>
         <div style="text-align:center;">对齐方式</div>
         <!-- 行高 line-height：当行高和容器的高度一样时，就可让文字在容器里竖直方向居中（仅限于单行文字） -->
         <div style="color:white;background:blue;width:300px;height:100px;text-align:center;line-height:100px;">行高</div>
         <div style="">边框</div>

    </body>
</html>

Erosvan

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端 | HTML基础——(1)XHTML基础

一、初识html起始标记<>结束标记标记+特殊的字符组成标签标签的作用就是告诉浏览器内容的起始和结束的位置二、html基础模板 hello 你好呀. 为了规范书写，通常使用英文小写来书写代码，单标签需要闭合。
复制链接

扫一扫