HTML&CSS学习

最新推荐文章于 2023-07-24 21:03:36 发布

panfengblog

最新推荐文章于 2023-07-24 21:03:36 发布

阅读量338

点赞数

分类专栏： web 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44338712/article/details/107130940

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML&CSS学习

HTML的一些标签

标题

<h1>~<h5>

段落

<p>

超链接

<a href=""></a>

图片

是一个void元素，没有任何内容的元素，甚至没有结束标记。

<img src=".jpg">

短引用

常常以双引号显示，当然也可以通过设置css更换样式

<q></q>

长引用

<blockquote></blockquote>

换行

<br>

列表

可嵌套使用，制作嵌套列表

<!-- 无序列表 unordered list -->
<ul></ul>
<!-- 有序列表 ordered list -->
<ol></ol>
<!-- 列表元素 list item -->
<li></li>

一些属性

id属性

<!-- 比如说像这样 -->
<h2 id="chai">Chai Tea, $1.85</h2>

<!-- 比如说像这样进行访问,在链接最后加一个# -->
<a href="index.html#chai">see Chai Tea</a>

使用target打开新窗口

<a target="_blank" href="mission.html">Read about our Mission</a>

开始的一些准备工作

版本说明

html4版本共说明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

html5版本说明，事实上，浏览器认为你正在使用标准html，不再考虑版本号。事实上html不再会有6,7,8…，制定标准的人已经把这个规范变成了一个活的标准，随着技术的发展不断更新，所以不再有版本号，认知你可以不再叫它html5，因为现在它只是html

<!doctype html>

指定字符编码

写在head中

<meta charset="utf-8">

CSS（层叠样式表）

style元素

<html>
<head>
    <title>Title</title>
    <!-- style元素放在html的首部里，type告诉浏览器正在使用寿命类型的样式，这里使用的是css -->
    <style type="text/css">
        body{
            background-color: #d2b48c;
            margin-left: 20%;
            margin-right: 20%;
            border:2px dotted black;
            padding: 10px 10px 10px 10px;
            font-family: sans-serif;
        }
        p{
        background-color: #954b4b;
        color: #a7cece;
        border: 1px solid gray;
      }
        h1{
        font-family: sans-serif;
        color: gray;
      }
        h2{
        font-family: sans-serif;
        color: gray;
      }
    </style>
</head>
<body>
</body>
</html>

link元素

当需要大量页面需要使用相同的css时，可以创建.css文件，统一css样式，同时也方便统一管理和修改。.css文件中的内容（不能包含html）

body {
	font-family: sans-serif;
}

h1, h2 {    
	color: gray;
}

h1 { 
	border-bottom: 1px solid black;
}

p {
	color: maroon;
}

p.greentea {
	color: green;
}

在html中使用

<link type="text/css" rel="stylesheet" href="lounge.css">

创建类选择器

在css中创建一个类，对段落使用

p.pfguo{
	color: red;
}

在HTML中使用

    <p class="pfguo">
      Join us any evening for refreshing 
      <a href="beverages/elixir.html">elixirs</a>, 
      conversation and maybe a game or two of 
      <em>Dance Dance Revolution</em>.  
      Wireless access is always provided;  
      BYOWS (Bring Your Own Web Server).
    </p>

如果需要对多个元素使用？

在css中这样写规则

.pfguo2{
	color: black;
}

一个元素可以加入多个类

<p class="pfguo1 pfguo2 pfguo3">

广泛的属性

字体

设置字体，可设置多个，当访问用户计算机无第一种字体时，会顺延使用下一个字体，同理，若不含有，依次顺延。

当然如果有需要，也可以设置web字体，有很多网址会提供这样的字体托管服务

font-family：Verdana，Geneva，Arial;

字体颜色

color：silver;/*设置字体颜色*/

当然也可以使用16进制码

当然还有很多属性，自己查吧~

font-weight:bold/*可选的有：lighter、normal、bold、bolder*/
text-decoration:underline;/*下划线：underline 上划线：overline 删除线：line-through*/

panfengblog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS学习

HTML&CSS学习HTML的一些标签标题<h1>~<h5>段落<p>超链接<a href=""></a>图片是一个void元素，没有任何内容的元素，甚至没有结束标记。<img src=".jpg">短引用常常以双引号显示，当然也可以通过设置css更换样式<q></q>长引用<blockquote></blockquote>换行<
复制链接

扫一扫