HTML基础笔记

最新推荐文章于 2024-07-24 20:11:59 发布

给彩礼也用券

最新推荐文章于 2024-07-24 20:11:59 发布

阅读量91

点赞数 2

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

本文链接：https://blog.csdn.net/m0_46220632/article/details/109671600

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML基础

简述

这是一个标记语言（就是美化字体格式，比如word），word是图形化操作，而html用简单的标记代码实现网页，是用来描述网页的一种语言。
格式：文件名.html
HTML代码是由头和体组成的

<html>
	<head></head>
	<body>需要展示给用户看的信息内容</body>
</html>

<!-- 此为注释符号 -->

head：头
body：体

基础标签

一、标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这是标题</title>
	</head>
	<body>
	<!-- 这是注释不影响任何语句 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
	<!-- 通过<h1> - <h6> 标签来定义 -->
	</body>
</html>

二、段落标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这还是标题</title>
	</head>
	<body>
		 将进酒
   		 杯莫停
    <!-- 网页显示不会换行 -->
    
   		 <br>
   	<!-- <br>标签就是换行，别人是成对的，而他是单身的 -->
   		 
	大河之剑<br>天上来，哈哈哈哈哈！
	
		<p>这是一个段落</p>
		<p>这又是一个段落</p>
	<!-- html不会识别换行，每个<p>标签都会自己换行 -->
	</body>
</html>

效果图

三、文本格式化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又是标题</title>
	</head>
	<body>
        <b>加粗文本</b><br><br>
        <i>斜体文本</i><br><br>
        <code>电脑自动输出</code><br><br>
        这是 <sub> 下标</sub> 和 <sup> 上标</sup>
	<!-- html不会识别换行，每个<p>标签都会自己换行 -->
	</body>
</html>

文本效果

四、超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又是标题</title>
	</head>
	<body>
        <a href="https://www.baidu.com/" target="_blank">访问百度</a>
<!-- 以上是字的超链接，图片也可以 -->
<!-- 如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。 -->
	</body>
</html>

五、图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又是标题</title>
	</head>
	<body>
        <!-- 引号是本地照片路径，也可以设置网络上的图片 -->
       <img src="../html/mg/tim2g.jpg" width="400" height="200">
       <!-- 可以设置像素大小 -->
       <img src="../html/mg/timg.jpg" width="30%" height="30%">
       <!-- 可以设置在父元素的比例，这里的父元素是body -->
	</body>
</html>

效果图

六、列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又又是标题</title>
	</head>
	<body>
        
        <!-- ul是无序列表，ol是有序列表 -->
<ul>
    <li>点赞</li>
    <li>收藏</li>
    <li>投币</li>
</ul>
<ol>
    <li>点赞</li>
    <li>收藏</li>
    <li>投币</li>
</ol>
	</body>
</html>

效果图

七、块标签（div&span）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>依然是标题</title>
</head>
<body>
    <div>
        <!-- 
        div可以认为是一个柜子，把东西放在柜子里更整齐，网页布局离不开div
        <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现
        -->
        123
    </div>
    <div>456</div>

    <span>444</span>
    <span>555</span>
    <!-- span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化,他不会换行，比如密码错误提示的框可以用span标签 -->
</body>
</html>
![效果](https://img-blog.csdnimg.cn/20201116111659564.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MjIwNjMy,size_16,color_FFFFFF,t_70#pic_center)

八、表格标签（一）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又又又是标题</title>
	</head>
	<body>
<table border="2px" width = "50%">
    <!-- 
    table标签就是表的框架
    border为边框的粗细 width为占用父标签比例
    <tr>为一行
    <tr>为一列
    <th>为标题行
        -->
    <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>违纪信息</th>
        <th>处罚</th>
    </tr>
    <tr>
        <td>王某</td>
        <td>001</td>
        <td>无</td>
        <td>无</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>002</td>
        <td>pc</td>
        <td>留校察看</td>
    </tr>
</table>
	</body>
</html>

效果图

表格标签（二）

单元格合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又又又又是标题</title>
	</head>
	<body>
<table border="2px" width = "50%">
    <tr>
        <td colspan="2">1</td>
        <!-- <td>2</td> -->
<!-- colspan左右合并“2”为合并几个（一定要删掉被合并的一个，这里注释为了更清楚的理解） -->
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">5</td>
        <!-- rowspan="2"上下合并-->
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <!-- <td>/</td> -->
        <td>*</td>
        <td>+</td>
        <td>-</td>
    </tr>
    <!-- 如果需要上下左右四个合并：先合并左右，再加个上下参数就ok（记得删掉被合并的表格） -->
</table>
	</body>
</html>

效果图

九、表单标签（一）

基础了解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又又又又又是标题</title>
	</head>
	<body>
        <form>
            用户名：<input type="text"/>
            <br/>
            密码：<input type="password"/>
            <br/>
        <!-- 
            input标签是一个框（可以是输入框，复选框，按钮.....）
            type标签是确定他的格式是什么框的
                text：文本框（默认）
                password：密码框（内容不可见）
                radio：单选框
                checkbox：复选框
                submit：提交按钮
                reset：重置按钮
                file：附件框（用于上传文件）
                hidden：隐藏框
                button：普通按钮
            -->
            性别：<input type="radio" name="xxxx"/> 男
                <input type="radio" name="xxxx" /> 女
                <br/>
            带把？：<input type="radio" name="oooo"/> 是
                <input type="radio" name="oooo" /> 否
        <!-- 
            name:是为了确定为同一个单选框，不同name不相互影响
                 -->
        </form>
	</body>
</html>

效果图·

表单标签（二）

提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又又又又又又是标题</title>
	</head>
	<body>
        <form>
            用户名：<input type="text" name="userxxx"/>
            <br/>
            密码：<input type="password" name="passxxx"/>
            <!-- 这里用valude标签可以设置默认用户名和密码，一般没人在这用 -->
            <br/>
            性别：<input type="radio" name="xxxx" value="nande" checked="charset"/> 男
            <!-- checked="charset"为默认选中 -->
                <input type="radio" name="xxxx" value="nvde"/> 女
            <!-- 这里的 value 标签为当前选中的按钮上传选中的参数（到服务器，目前没有服务器） -->
                <br/>
            
            <input type="submit" />
            <!-- 这是提交按钮 -->
        </form>
	</body>
</html>

打开

提交后
在这里插入图片描述

表单标签（三）

复选框&重置按钮&上传文件按钮&自定义按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又又又又又又又是标题</title>
	</head>
	<body>
        <form action="">
    <!-- action参数是提交到那个地方，目前没有先空着 -->
            爱好：
            <input type="checkbox" name="hhhh" value="biancheng"/>编程
            <input type="checkbox" name="hhhh" value="dafeiji"/> 打灰机
            <input type="checkbox" name="hhhh" value="pc"/>pc
            <!-- 和单选框原理一样 -->
            <br/>
            <input type="submit"/>
            <br/>
            <input type="reset"/>
            <!-- 这是重置按钮 -->
            <input type="button" value="我是按钮"/>
            <!-- 这是自定义按钮，要配合js，目前了解一下就行 -->
            <br/>
            照片：<input type="file" name="ppppssss"/>
            <!-- 可以上传文件，要配合后天，目前了解一下就行 -->
        </form>
	</body>
</html>

在这里插入图片描述

表单标签（四）

文本域&选择框标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这又又又又又又又又又是标题</title>
	</head>
	<body>
        <form action="">
          <select name="tt1tt">
              <!-- 下拉选择框 -->
                <option value="youqian">充值玩家</option>
                <option value="yougan" selected="select">肝帝玩家</option>
                <!-- selected为默认 -->
                <option value="qiongbi">退出游戏</option>
                <!-- value原理一样，提交服务器时上传的参数 -->
           </select>
            <br/>
            <br/>
           个人介绍：<textarea name="short">我叫：</textarea>
           <!-- 文本域，里面可以默认自带文字（栗：我叫：） -->
           <br/>
           <br/>
           <input type="submit"/>
        </form>
	</body>
</html>