前端学习笔记（一）HTML基础

最新推荐文章于 2023-04-19 20:20:34 发布

Spy97

最新推荐文章于 2023-04-19 20:20:34 发布

阅读量475

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/nudt_spy/article/details/105866960

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML的基本结构和使用方法，包括文档结构、标题、段落、超链接、图片、列表、表格、表单等元素的使用，以及如何通过内联样式和内部样式表来美化页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结构

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

标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyWeb</title>
</head>
<body  bgcolor="#006400"> # 背景色
    <h1 align="center/right">标题1</h1>  #标题居中/ 靠右对齐
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

段落

会自动换行

	<p>  contest  </p>

超链接

	<a href="https://www.baidu.com" target="_self">百度</a> #自身标签打开链接
	
	<a href="https://www.baidu.com" target="_blank">百度</a> #新建标签打开链接
	
	<a href="https://www.baidu.com" target="_blank">
		<img src="...">				#图片链接
	</a> 	
	
	<a name="tip">This is a tip</a>
	
    <a href="#tip">slick to jump</a> #文本内部链接

图片

	<img src="..." width="100" height="100">

规定元素唯一ID

	<h1 class="xxx"></h1>
	<h1 id="xxx"></h1>

html 格式化字体

    <b>Welcome to spy  </b> <br>   #粗体
    <big>Welcome to spy  </big> <br> #大号
    <small>Welcome to spy  </small> <br> #小号
    <em>Welcome to spy  </em> <br> #强调
    <i>Welcome to spy  </i> <br>	#斜体
    <strong>Welcome to spy  </strong> <br> #加重
    大家好<sub>Welcome to spy  </sub> <br>	#下标
    大家好<sup>Welcome to spy  </sup> <br>	#上标
    <ins>Welcome to spy  </ins> <br>	#下划线
    <del>Welcome to spy  </del> <br>	#删除线

在这里插入图片描述

html 样式

<head>
    <meta charset="UTF-8">
    <title>TTTTT</title>
    <style type="text/css">
        h1{					#h1或者h2或者p...
            color: #00ffff;
        }
    </style>
</head>
<body>
    <h1>Weclome!!!</h1>		#内部样式
    
    <b style="color: blue">Weclome!!!</b>	#内联样式
</body>

在这里插入图片描述

表格

    <table border="1" cellpadding="20"> #边框 和 格子大小
        <caption> 表格 </caption> #标题
        <tr>         #一行
            <th>表头1</th> # 表头
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>单元格1</td> #单元格
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>
                <ul>   #列表
                    A
                    <li>B</li> #列的一种样式
                    <li>C</li>
                </ul>
                单元格1
            </td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>

在这里插入图片描述

列表

    <ul type="disc">  #无序
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
    <ol type="I" start="10">  #有序 标号类型{A：大写字母 a:小写字母 I：大写罗马 i:小写罗马} 起始标号
        <li>A</li>
        <ul>	#列表嵌套
            <li> a</li>
            <li> b</li>
            <li> c</li>
        </ul>
        <li>B</li>
        <li>C</li>
    </ol>

在这里插入图片描述

div布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        #container{
            width: 100%;
            height: 800px;
            background-color: aquamarine;
        }
        #heading{
            width: 100%;
            height: 10%;
            background-color: darkkhaki;
        }
        #content_menu{
            width: 30%;
            height: 80%;
            background-color: coral;
            float: left;
        }
        #content_body{
            width: 70%;
            height: 80%;
            background-color: antiquewhite;
            float: left;
        }
        #footing{
            width: 100%;
            height: 10%;
            background-color: cornflowerblue;
            clear: left;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="heading">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主体</div>
        <div id="footing">底部</div>

    </div>
</body>
</html>

在这里插入图片描述

表单

<body>
     <form>
         用户名：
         <input type="text"> <br/> #文本输入框
         密码：
         <input type="text"> <br/><br/><br/>
         选择你喜欢的字母
         A <input type="checkbox"> #复选框
         B <input type="checkbox">
         C <input type="checkbox"> <br/><br/><br/>
         选择你的性别
         男<input type="radio" name="sex"> #单选框
         女<input type="radio" name="sex"> <br/><br/><br/>
         选择你的学校
         <select> 				#下拉选项
             <option>NUDT</option>
             <option>HNU</option>
             <option>CSU</option>
         </select> <br/><br/><br/>
         <input type="button" value="按钮">  #按钮
         <input type="submit" value="确定">  <br/><br/><br/>
     </form>
    <textarea cols="30" rows="30">请介绍自己</textarea> #文本域
</body>

在这里插入图片描述

内联框架

  <iframe src="..." frameborder="0" width="400px" height="400px"></iframe>

在这里插入图片描述