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

来源：互联网发布：微商加群软件编辑：程序博客网时间：2024/06/04 17:58

一、初识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>

3 0