HTML和CSS简单使用_html scc-CSDN博客

本文链接：https://blog.csdn.net/qq_43813373/article/details/107184730

基础知识

<!-- 任何一个标准的HTML页面，第一行一定是一个以`<!DOCTYPE ……>`开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。 -->
<!DOCTYPE html>
<!-- 
  lang用于指定页面语言，最常见的语言类型有两种：
 - en：定义页面语言为英语。
 - zh-CN：定义页面语言为中文。 -->
<html lang="en">
  <head>
    <!-- <meta>标签 提供有关页面的基本信息 -->
    <!-- 字符集用meta标签中的`charset`定义，charset就是character set（即“字符集”），即网页的编码方式。 -->
    <meta charset="UTF-8" />
    <!-- Keywords是定义关键字，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。 -->
    <meta name="Keywords" content="帅者的第一个网页" />
    <!-- 只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。 -->
    <meta name="Description" content="这是帅者的第一个网页" />
    <!-- `width=device-width` ：表示视口宽度等于屏幕宽度。viewport 这个知识点，初学者还比较难理解，在学WEB移动端的时候会用到 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 用于设置网页标题 -->
    <title>Document</title>
  </head>
  <!-- <body>标签 用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。 -->
  <body>
    靓仔的第一个网页
  </body>
</html>
————————————————
版权声明：本文为CSDN博主「su_zui」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/su_zui/article/details/122814320

补充：头标签内部的常见标签如下：

<title>：指定整个网页的标题，在浏览器最上方显示。
<base>：为页面上的所有链接规定默认地址或默认目标。
<meta>：提供有关页面的基本信息
<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
<link>：定义文档与外部资源的关系。

HTML规范

（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>

（2）所有的属性都必须小写，HTML标记不区分大小写,不区分大小写。但是对于id和class之类的属性,它是区分大小写的。

（3）所有的标签都必须闭合。

双标签：<span></span>

单标签：<br> 建议写成<br /> <hr> 建议转成 <hr />，还有<img src=“URL” />

（4）所有的属性值必须加引号。<font color=“red”>

（5）所有的属性必须有值。<hr noshade=“noshade”>、<input type=“radio” checked=“checked” />

（6）XHTML文档开头必须要有DTD文档类型定义。

1）HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

也就是说，HTML不是依靠缩进来表示嵌套的，而是看标签的嵌套关系。但是，我们发现有良好的缩进，代码更易读。建议大家都正确缩进标签。

百度为了追求极致的显示速度，所有HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。

2）空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

3）标签要严格封闭

标签不封闭的结果是灾难性的。

拓展

1,name常用于form表单

在网页做Post提交时，是以Form（即表单域）为单位进行提交的，一个Form里有若干个表单对象(如)，同一个页面里可以为多个Form（Asp.net不同，它只允许有一个，且名字必须为Form1），在表单表提交到服务器端后，可以直接通过Name属性取到表单域的值，却无法通过ID直接取到该表表单对象的值。

另外，同一个Form里不能有多个name属性相同的HTML标记，但如果一个网页中有多个Form，则不同的Form里可以有同个Name属性的标记。而ID是全局的，在一个HTML文档里不能有多个节点使用相同的ID，无论它处在哪个Form里。

2,id常用于设置css样式

在建立CSS样式的时候，可以建立ID样式表（以＃为前缀），使具有该ID的样式直接应用该样式，而无法建立Name样式表。

使用Javascript进行Dom节点定位时建议使用getElementById方法，因为只有ID能唯一标识一个节点，而同一个网页里可能会有多个Name属性相同的节点，它们分别处在不同的Form里。

<!DOCTYPE html><!--doctype 文档类型-->
<html lang="en"><!--lang 识别的语言-->
<!--这里的bailang="en"可以删除，如果不删除的，du用谷歌之类打开，它会认为是zhi英文的，会自动给翻译（如果设置了自动翻译的话）-->
<head><!--head一般包含title标签，css样式，js代码-->
    <meta charset="UTF-8">
    <title>HELLO WORLD!</title>
    <!--    link映入css样式-->
    <link rel="stylesheet" type="text/css" href="1.css样式.css"/>
    <!--    组合之间可以相互搭配，但是当起冲突的时候会根据赋值顺序进行覆盖-->
    <style type="text/css">
        /*id选择器*/
        #di {
            border: 10px dashed red;
            background-color: blue;
            align-content: center;
        }

        /*class类型选择器*/
        .class1 {
            color: aqua;
            border: 10px dashed aqua;
            font-size: 66px;
        }

        /*注释的格式也不一样*/
        /*标签名选择器*/
        span {
            border: 2px solid red;
            background-color: green;
            align-content: center;
        }

        p {
            border: 2px solid red;
            background-color: green;
            align-content: center;
        }

        /*组合选择器*/
        .class2, #dii {
            border: 10px solid palevioletred;
            align-content: center;
            background-color: aquamarine;
        }
    </style>
</head>
<!--属性必须有值,值必须加引号-->
<body bgcolor="#ffebcd" align="center">
<h3 align="center">你好,世界!</h3>
<button align="center" onclick="alert('javaweb入门开始')">触发事件</button>
<br/>
<img aligh="center" src="images/back.png" height="200" width="200" border="20" alt="图片不存在"/></img>
<br/>
<h3>超链接</h3>
<a href="https://www.bilibili.com/video/BV1Y7411K7zz?p=13" target="_self">在当前页面跳转哔哩哔哩</a>
<br/>
<!-- 跳转的目标 -->
<a href="https://www.bilibili.com/video/BV1Y7411K7zz?p=13" target="_blank">新建页面跳转哔哩哔哩</a>
<br/>
<a href="#tj">同一页面内超链接锚点跳转“id”为div的id属性值</a>
<div id="tj"></div>
<a href="https://www.baidu.com/" style="text-decoration: none">去除下划线的超链接</a>
<h3>列表</h3>
<ul>
    <!-- 无序列表-->
    <li><a href="images/刘能.jpg" target="room">刘能</a></li>
    <li><a href="images/赵四.jpg" target="room">赵四</a></li>
    <li><a href="images/宋小宝.jpg" target="room">宋小宝</a></li>
    <li><a href="images/小沈阳.jpg" target="room">小沈阳</a></li>
</ul>
<h3>子窗口</h3>
<iframe width="400" height="400" name="room"></iframe>
<ol>
    <!--有序列表-->
    <li>刘能</li>
    <li>赵四</li>
    <li>宋小宝</li>
    <li>小沈阳</li>
</ol>
<h3>表单</h3>
<!--含有name属性的标签才会被传递信息-->
<!--https://www.baidu.com/?password=&sex=men&coun=中国&hddenpeople=普通用户-->
<form action="http://baidu.com" method="get">
    <!--将标签放在table里面就会对齐了-->
    <table align="center" border="10">
        <tr>
            <td>照片:</td>
            <td><input type="file"><br></td>
        </tr>
        <tr>
            <td>用户名:</td>
            <td><input type="text"/><br/></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="password"/><br/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <!--            传递过去的信息是value的值-->
            <td><input type="radio" name="sex" checked="checked" value="men"/>男<input type="radio" name="sex"
                                                                                      value="women"/>女<br/></td>
        </tr>
        <tr>
            <td>兴趣:</td>
            <td><input type="checkbox"/>java<input type="checkbox"/>python<input type="checkbox"/>c++<br/></td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td><select name="coun" id="country">
                <option>请选择国家</option>
                <option>韩国</option>
                <option>美国</option>
                <option>日本</option>
                <option selected="selected">中国</option>
            </select><br/></td>
        </tr>
        <tr>
            <td> 自我评价:</td>
            <td><textarea cols="10" rows="10">牛逼</textarea><br/></td>
        </tr>
        <tr>
            <td><input type="reset"></td>
            <td align="center"><input type="submit"></td>
        </tr>
    </table>
    <input type="hidden" name="hiddenpeople" value="普通用户">
</form>
<h3>table表格</h3>
<!--cellspacing和border-collapse都可以去掉间隔-->
<table align="center" cellspacing="10" border="10" style="border-collapse: collapse">
    <tr>
        <th colspan="2">
            日期/数量
        </th>
        <th>
            无间隔
        </th>
    </tr>
    <tr>
        <th>
            测试1
        </th>
        <th>
            测试2
        </th>
        <th>
            测试3
        </th>
    </tr>
    <tr>
        <th>
            测试1
        </th>
        <th>
            测试2
        </th>
        <th>
            测试3
        </th>
    </tr>
</table>
<div style="margin-left: auto;margin-right: auto;background-color: chartreuse;width: 250px;height: 250px;text-align: center">
    div标签和文字居中
</div>
<div style="border: 2px solid red;background-color: green;align-content: center">div不管文字有多少，默认占一行</div>
<span>span根据文字长度变化，封装文字便于后台开发使用</span>
<p>p段落默认上边和下边都空一行，如果有就不用空了</p>
<div id="di">运用id选择器的div标签,一个id只能被一个控件使用</div>
<p class="class1">运用class类型选择器的p段落标签</p>
</body>
</html>

div{
    border: 10px solid yellow;
    font-size: 30px;
}
span{
    border: 10px dashed red;
}