HTML语法基础

最新推荐文章于 2024-03-24 15:26:44 发布

TU_BO

最新推荐文章于 2024-03-24 15:26:44 发布

阅读量264

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/TU_BO/article/details/79449395

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html的基本框架

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">//执行当前浏览器的编码格式
<title>这里写标题</title>
</head>
<body>
这里写文章主体内容
</body>
</html>

html中常用标记语法

标题标签:h1~h6
水平线标签:< hr/>
段落标签:< p>< /p>
换行标签:< br/>
滚动标签:< marquee decration =”left/right/up/down” behivour=”scoll”>< /marquee>
段落缩进:blockquote
原样输出:pre
斜体标签:em
粗体标签:strong
上下标:sup和sub
居中标签:center
块标签:div div+css
行内标签:span
有序列表:ol li
无效列表:ul li
架构组织列表:dl dd dt

超链接

超链接标签< a href=”需要链接的地址”>超链接< /a>
< a>< /a>标签的作用

   1: 创建跳转标记   :<a 锚点名称=”x01”>< /a>
   2:最终要从某个位置跳转到跳转标记这个位置:< a href=”#锚点名称”>开始跳转< /a>

链接图片资源

      < img   />
        开发中使用:在项目下创建image包:里面放入图片的素材
        src:链接到的资源图片  “../01.jpg”
        alt:图片的替代文本, 当图片失效的时候,替代起作用
        title:当鼠标悬浮在图片上的时候,显示图片的名称
        width:设置图片的宽度  (px)
        height:设置图片的高度

转义字符 ##

         <:&lt;
        >:&gt;
    空格:&nbsp;
    注册商品:&reg;  ®
    版权所有:&copy; ©

表格标签

在html语言里面,它是没有列的概念,只有行和单元格
        table标签:表格标签
        tr:行标签
        td:单元格标签
        th:在一行中显示表格中的表头(居中,适当加粗)

        如果一个表格要想显示效果,必须加上table一些属性,边框:border
        行合并:rowspan
        列合并:colspan
        <table border=”1px” align=”center” width=”xxpx” height =”xxpx” bgColor=”表格背景色”>

css样式

1.行内样式

<a href="" style="font-size:24px;color:#F00">超链接</a><br/>
使用style属性,设置css样式

2.内部样式

在head标签体中一个标签style标签,
<style type="text/css">
    a{
        /*所有a标签的属性值*/
        font-size:24px;
        color:#F00;     
    }
</style>

3.外部样式
在head标签体中< link href=”连接外部的css文件” rel=”stylesheet” />
导入外部css文件,要使用该标签导入
如果在实际开发中,肯定使用的是第三种方式,
css样式和html标签分离开来,有利于维护

<!--使用link标签导入外部 css文件-->
<link href="07.css" rel="stylesheet" />

css选择器

    标签选择器:
    直接在里面使用html标签名称来设置样式选中所有同名的标签:使用标签选择器

/*css标签选择器*/
    div{
        font-size:24px;
        color:#F00; 
    }

类选择器
1)  给标签设置class属性  class=”c”   
2)  使用类选择器的语法,在样式 .c{样式}
书写结构:

    /*类选择器*/
    .c1{
        font-size:36px;
        color:#0F0; 
    }

类选择器的优先级高于标签选择器
特点:在同一个html页面中,多个html标签是可以指定多个同名的class属性!

id选择器
1)  必须给该标签设置id属性 举例 id = “dl”
2)  使用id选择器的语法,在样式中#id属性值  : #dl{ 书写样式}
书写结构:
/*id选择器*/
    #dl{
        font-size:24px;
        color:#00F;     
    }

id选择器它的优先级要高于类选择器

id选择器优先级>类选择器>标签选择器
注意:在同一个html页面中,不要去给多个标签指定同名的id属性,防止Javascript中有一个方法:
document.getElementById(“id属性值”) 获取标签对象,可能获取不到!

并集选择器
                将选中的标签需要的样式
/*并集选择器*/
    .c1,#dl{
        font-size:24px;
        color:#F00; 
    }

交集选择器  :选中的选择器名称1中子标签的内容
                  选择器名称1    选择器名称2{
                    书写样式

} 
/*交集选择器*/    -选中的就是div中的子标签span标签
    div span{
        font-size:36px;
        color:#0F0; 
    }

                通用选择器
                    * :通配符,代表所有标签,给整体设置
                    *{
                    样式;
}

伪类选择器
                        比如:超链接标签,代表选中一种状态:
                        link:没有访问过的状态
                        hover:鼠标悬浮的时候一种状态
                        active:鼠标激活(点击了,但是没有松开)的一种状态
                        visited:已经被访问过的状态(点了,并且松开了)的一种状态
            超链接:
                状态:-没有访问-鼠标悬浮-激活-访问过, 这些状态:实际场景,不停循环使用的!

TU_BO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML语法基础

html的基本框架&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;//执行当前浏览器的编码格式&lt;title&gt;这里写标题&lt;/title&gt;&lt;/head&gt;&lt;body&gt;这里写文章主体内容&lt;
复制链接

扫一扫

专栏目录