初步学习网页前端

最新推荐文章于 2024-07-20 18:16:53 发布

帝黎亚

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量694

点赞数 1

分类专栏：笔记文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_52109865/article/details/122778353

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基础部分

首先是html5的声明部分

<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:

<meta charset="UTF-8">

接着是各种标签，可以当成各种组件来用：

<!-- 这是注释的格式 --> 
<hr />可创建水平线
<h1>标题，数字是几就是几级标题</h1>
<p>段落</p>
<a href="http://www.baidu.com">超链接</a>
<img src="https://profile.csdnimg.cn/5/1/0/0_qq_52109865" width="104" height="142" />  图片

然后是html元素：

首先是语法：
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

然后是body元素：

<body>
<p>展示body元素的用法</p>
</body>

//一般来说，body元素定义了html的主题
//元素可以拥有另一个元素

接着是元素：

上面的<body>元素可以包含在<html>元素里面
<html>

<body>
<p>展示</p>
</body>

</html>

属性，拿超链接举例子:

<a href="http://www.baidu.com">超链接</a>

其中的"href"就是超链接的属性

再比如：
<body bgcolor="#164481">
		<h1>你好!世界</h1>
	</body>
这个"bgcolor"就是body元素的属性

接下来举例适合大多数html元素的属性名称：

class	规定元素的类名（classname）
id	    规定元素的唯一 id
style   规定元素的行内样式（inline style）
title	规定元素的额外信息（可在工具提示中显示

接下来举几个例子：

style
<body style="background-color:yellow">
<p style="background-color:green">这是段落</p>
</body>

style替代了bgcolor，font等直接方法，可直接使用
style="font-family:****"来定义字体属性
使用 style="background-color:****"来定义背景颜色
使用 style="text-align:center" 来定义对其方式
如：
<p style="font-family:arial;color:red;font-size:20px;">段落</p>
来直接定义段落属性

文本格式化：

<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。

"计算机输出"标签：

<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。

引用、引用和术语定义：

<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。

实例展示

利用HBuilderX实现一些例子，结合当今时事，我做了一个简单的东奥宣传界面
在这里插入图片描述
源码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			你好，冬奥 
		</title>
	</head>
	<body bgcolor="##99CCFF">
		<h1>你好!这里是北京冬奥会</h1>
		<p>欢迎大家收看<del>东奥会</del>，冬奥会，
		这里是<a href="https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC/128981",style="color:red;font-size:20px;">北京</a>，
		世界上<big>唯一个</big>举办过两次奥运会的城市</p>
		<p><img src="2.png"width="1200" height="600" ></p>
	</body>
</html>

简单实现学校的官网界面

在这里插入图片描述
具体代码如下：
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zzuli</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="header">
        <div class="top"></div>
        <div class="log">
            <div class="left"></div>
        </div>
        <div class="menu">
            <div class="menu_list">
                <ul>
                    <li><a href="#">网站首页</a></li>
                    <li><a href="#">学院概况</a></li>
                    <li><a href="#">机构设置</a></li>
                    <li><a href="#">师资队伍</a></li>
                    <li><a href="#">人才培养</a></li>
                    <li><a href="#">学术研究</a></li>
                    <li><a href="#">招生与就业</a></li>
                    <li><a href="#">合作交流</a></li>
                    <li><a href="#">校园文化</a></li>
					<li><div class="right">
				    <form>
				        <input type="text">
				    </form>
				</div></li>
                </ul>
				
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_img"></div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_content">
				<p>水印了属于是</p>
           </div>
    </div>
</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 微软雅黑;
}.clear{
    clear: both;
 }
.header{
    width: 100%;
    height: 171px;
}
.header .top{
    width: 100%;
    height: 5px;
    background: #0b6cb8;
}
.header .log{
    width: 100%;
    height: 116px;
    margin: 0 auto;
	 background: #164481;
}
.log .left{
    float: left;
    width: 330px;
    height:60px ;
	background-color: #164481;
    background: url("../img/xylogonew.png");
    margin-top: 15px;
}


.header .menu{
    width: 100%;
    height: 50px;
    background: #164481;
}
.menu .menu_list{
    width: 1300px;
    margin: 0 auto;
}
.menu_list.right{
    float: right;
    width: 200px;
    height: 38px;
    background: blue;
    margin-top: 0px;
}
.menu .menu_list ul li{
    line-height: 40px;
    padding:0px 24.5px;
    list-style: none;
    float: left;
}
.menu .menu_list ul li:hover{
    background: #164481;
}
.menu .menu_list ul li a{
    text-decoration: none;
    color: white;
    font-size: 14px;
}
.content{
    width: 996px;
    height: 1175px;
    margin: 0 auto;
}
.content .content_img{
    width: 996px;
    height: 365px;
    background: url("../img/jifang203.jpg") no-repeat 0 0;
    background-size: 996px 365px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.footer{
    width: 100%;
    height: 92px;
    background: #164481;
}
.footer .footer_content p{
    color: white;
    text-align: center;
    line-height: 92px;
    font-size: 13px;
}

是一个非常简陋的官网了属于是

帝黎亚

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初步学习网页前端

基础部分首先是html5的声明部分<!DOCTYPE html>The new character encoding (charset) declaration is also very simple:<meta charset="UTF-8">接着是各种标签，可以当成各种组件来用： <hr />可创建水平线<h1>标题，数字是几就是几级标题</h1><p>段落</
复制链接

扫一扫