html标签一

来源：互联网发布：渠道管理知乎编辑：程序博客网时间：2024/05/29 17:54

java是强类型预编译高级编程语言
XML是自定义标签语言
HTML是预定义标记语言
第一个网页的编写流程:
1.新建后缀名(扩展名)为.html(或者htm)
2.编写网页
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的内容:可以包括图片声音视频文字以及超级连接等
</body>
</html>
3.测试页面就是用浏览器显示页面效果
注意:在测试的过程中浏览器的不同有可能出现的效果也不同
html版本的不同有可能出现的效果也不同
html语言中的注释: 
基本块级标签：标题，段落，水平线
常用于布局：有序列表，无序列表，描述标签
行级标签：图像标签，范围标签（span)，换行标签（br和p的区别）
标题标签:<hn></hn> n的取值 1 2 3 4 5 6
其中h1最大 h6最小
如果设置标题的对其方式:
align:设置对其方式
取值: left 左对齐(默认的)
right:右对齐
center:居中
段落标签:<p></p>
段落标签对其方式:
align:
取值:left 左对齐(默认的) right右对齐 center居中
水平线标签<hr/>
设置水平线中的一些属性:

width:设置水平线的宽度
size:设置水平线的高度默认2px
color:设置水平线的颜色
单位:
1.相对单位 px em
2.绝对单位 cm mm
设置水平线的对其方式:
align:
取值:left 左对齐
right 右对齐
center 居中(默认的)
有序列表: <ol></ol>
设置列表类型:
type 常见的取值 1(默认的) a A i I
设置列表的起始:
start:
列表项: <li></li>
设置列表选项的类型
type:常见的取值 1(默认的) a A i I
value:设置属性值
无序列表:<ul></ul>
设置无序列表的类型:
type:
常见的取值:disc 实心圆(默认的)
circle 空心圆
square:正方块
列表项:<li></li>
描述标签:<dl></dl>
描述的标题:<dt></dt>
描述的内容:<dd></dd>
图片标签:<img/>
src="图片路径";
图片路径:
1.绝对路径该文件完整路径的描述形式(很少去用)
2.相对路径相对于当前文件而言的路径(推荐使用)
title:提示文件一般情况下使用的都是title 因为它兼容性好
alt:提示文字
width:设置图片的宽度 px
height:设置图片的高度 px
通过设置图片的宽度或者高度会造成图片的失真一般情况下都不建议这样处理
如果需要修改图片的大小可以通过相应截图工具比如ps flash
可以按比例的缩小或者扩大图片
border:设置图片的边框
视频标签 <embed></embed> 已经很少使用了
dl标签实现图文交互
<dl>
<dt><img src="images/iron.jpg" title="电熨斗"></dt>
<dd>商品名称：灿坤蒸气电熨斗</dd>
<dd>商品价格：388元</dd>
<dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd>
</dl>
dl标签实现图文交互
span标签:显示独特样式
<span></span>
style:定义样式
color:字体颜色
font-size:字体大小
三种链接:
1.超级链接
超级链接语法:<a href="链接地址" target="窗口显示的位置"></a>
链接地址:
1.链接本地文件
2.链接外部文件
target:_blank新窗口
2.锚链接
1.同页面间的锚链接
1_1.定义锚点
<a name="锚点名"></a>
1_2.链接锚点
<a href="#锚点名"></a>
2.不同页面间的锚链接
3.功能型链接
<a href="mailto:邮箱地址"></a>
链接外部文件
<a href="https://www.baidu.com/index.php?tn=rising2010_1_pg" target="_blank">链接外部文件</a>
<h2>同页面间的锚链接</h2>
<a href="#abc">快速找到图片</a>
不同页面的锚链接
<a href="demo1_10.html#abc">快速找到demo1_10网页中的图片</a>

0 0