Web开发基础【笔记版】（自用）

在线狙击100次

已于 2024-09-08 14:37:16 修改

阅读量206

点赞数 9

文章标签：笔记 html5 css javascript web

于 2024-09-06 17:13:50 首次发布

本文链接：https://blog.csdn.net/2401_83883881/article/details/141963582

版权

注意！本文章持续增加中......

网页的开发有三种核心的语言：HTML、CSS、JavaScript

HTML：内容

CSS：修饰

JavaScript：互动

一、 HTML5语言基础

web开发最基本的格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    
</head>
<body>
 

</body>
</html>

基础标记：

<!DOCTYPE >必须在页面文档的第一行，声明文档类型

<html></html>只是形式上的标记，表示是html文档

<head></head>头标记

<title></title>标题标记：表示的是网页标题

<body></body>主体标记：里面放网页里面的内容

<head></head>里面只能放6中标记：①title②meta③link④style⑤script⑥base

<body></body>里面的标记：

<hn></hn>网页中内容的标题，其中n为1~6。表示的是标题大小

<hr/>表示横线，<hr width="80%" size="10" color="green"/>设置横线的长度宽度和颜色

<p></p>段落标记里面可以加的：

<strong></strong>表示加粗里面的文字
<sub></sub>表示下标的内容；<sup></sup>表示上标的内容

........

二、CSS语言基础

<style></style>里面放要修饰的内容。要放{}来具体修饰。

background-color:背景颜色
color:字体颜色
width:设置宽度
height:设置高度
line-height:设置行高
margin:0 auto;设置为居中

.....

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  <!--防止乱码 -->
    <title>大国工匠-罗兴</title>
    <style type="text/css">
        h1{
                    background-color:blue;
                    color:#fff;
                    width:800px;
                    height:80px;
        }
        body{
            background-color:pink; /*背景色*/
        }
        p{
            text-indent:2em;/*文本缩进, em表示一个字体大小*/
            color:green; /*字体颜色*/
            line-height:30px;/*行高，px是一个单位表示像素*/
            width:800px;/*p的宽度*/
            margin:0 auto;/*p居中*/
        }
    </style>
</head>
<body>
    <h1 align="center">大国工匠-罗兴</h1>
    <hr width="80%" size="10" color="green"/> <!--横线-->
    <img src="images/luoxing.jpg"/>  <!--单标签 -->
    <p><strong>“多学一点，学精一点。”</strong><br/>长江中......</p>

    <p>2006<sup>2</sup>年7月，刚刚毕业的......</p>

</body>
</html>