html5基础知识(1)-----属性&&样式

最新推荐文章于 2024-04-16 17:40:30 发布

白日梦想jun

最新推荐文章于 2024-04-16 17:40:30 发布

阅读量492

点赞数 1

分类专栏： HTML&&CSS 文章标签： html5 标签属性元素

本文链接：https://blog.csdn.net/oiu1010110/article/details/49802081

版权

HTML&&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、什么是TTML？
HTML是用来描述网页的一种语言
HTML:超文本标记语言(HyperText Markup Language)

HTML是一种标记语言，而不是编程语言

2、HTML5新特性:

用于绘画的canvas标签
用于媒体回放的video和audio元素
对本地离线储存的更好支持
新的特殊内容，如：article、footer、header、nav、section

新的表单控件，如：calendar、date、time、email、url、search

HTML元素：
1、元素是指从开始标签到结束标签的所有代码
如：<p>this is my web</p> <p>是开始标签，this is my web是元素内容，</p>是结束标签
如：<br/>
2、HTML的元素语法
元素的内容是开始标签和结束标签之间的内容
空元素在开始标签中进行关闭
3、嵌套的HTML元素
大多素的HTML元素都是可以嵌套的
如：最简单的<html><body></body></html>
如：

<a href = "http://www.baidu.com">
    <img src=”html.png” height=”500px” width=”500px”>
</a>

HTML属性：
1、标签可以拥有属性为元素提供更多的信息
2、属性以键/值对的形式出现
如：href=“www.baidu.com”
3、常用标签属性：
<h1>:align对齐方式
<body>:bgcolor背景颜色 background：设置背景图片
<a>:target规定在何处打开链接
4、通用属性：
Class：规定元素的类名
Id :规定元素唯一ID
Style :规定元素的样式

title: 规定元素的额外信息

HTML格式化：
1、控制缩进、设置行间隔、设置标记和属性名称的大小写等
如：<b>---定义粗体文本
<em>-定义着重文字
<small>-定义小号字
<strong>-定义加重语气
…………

注：在最新的html5中，一些已被css样式代替

<span style="font-size:14px;"><span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <b>你好</b>
    <br/>
    <big>你好</big>
    <br/>
    <em>你好</em>
    <br/>
    <i>你好</i>
    <br/>
    <small>你好</small>
    <br/>
    <strong>你好</strong>
    <br/>
    大家好<sub>你好</sub>漂亮
    <br/>
    大家好<sup>你好</sup>漂亮
    <br/>
    <ins>你好</ins>
    <br/>
    <del>你好</del>
    </body>
</body>
</html></span></span>

运行结果：

HTML样式：
1、标签：
<style>:样式引用
<link>:资源引用
2、属性：
rel = ”stylesheet”:外部样式表
type = ”text/css”:引入文档的类型
margin-left：边距

3、三种样式插入方法：

外部样式表：

     <link rel = ”stylesheet” type = ”text/css” href = ”mysyle.css”>

内部样式表：

<style type = ”text/css”>
     Body{
           Background-color：red;}
     p{
           margin-left：20px}
</style>

内联样式表：

 <p style = “color:red”>

<！---mystyle.html->

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
        h2{
            color: brown;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3 style="color: blueviolet">标题</h3>
</body>
</html></span>

<span style="font-size:14px;">h1{
    color: aqua;
}</span>

运行结果：

注：对于样式的操作放到head中，方便修改

HTML5链接属性及使用
1、链接数据：
文本链接
图片链接
2、属性：
href属性：指向另一个文档的链接

name属性：创建文档内的链接

例：

<a name=”tips”>顶部</a>
<a href=”#tips”>跳转到顶部</a>

3、 img标签属性：alt、width、height
alt用于当该图片显示不了的时候可显示该图片的文字信息
width、height：分别用于设置图片的宽和高

白日梦想jun

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录