HTML小结

最新推荐文章于 2022-04-21 22:04:08 发布

Sinjiufai

最新推荐文章于 2022-04-21 22:04:08 发布

阅读量250

点赞数 6

分类专栏：学习文章标签： html html5

本文链接：https://blog.csdn.net/Sinjiufai/article/details/120731089

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文主要介绍了HTML的基础框架，包括根标签<html>、头标签<head>和主体<body>的使用，以及常用标签如<h1>~<h6>标题、<p>段落、<br>换行、<img>图像、<a>链接、<table>表格、<ul>无序列表、<ol>有序列表和<form>表单的创建与应用。此外，还涉及了表格的样式调整、列表类型以及表单元素的使用方法。

摘要由CSDN通过智能技术生成

html小结

概括

一、html框架

简单一点的骨架：

//根标签
<html>
	//头标签
	<head>
		//标题标签
		<title></title>
	</head>
	//主体部分
	<body>
	//内容
	</body>
</html>

示例：vscode给的模板
在vscode中直接输入！+tab 键生成html框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

简单说明代码：

用来告诉浏览器按照html5标准解析页面

<!DOCTYPE html>

指定该html标签内容所用的语言

<html lang="en">
en定义语言为英语，zh-CN定义语言为中文

字符集Character set是多个字符集的集合，计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字

UTF-8是目前最常用的字符集编码方式（我记得pink老师当初说这是万国符）
让html文件是以UTF-8编码保存的，浏览器根据编码去解码对应的html内容

 <meta charset="UTF-8">

二、关于标签

1.常用标签

标签使用：
例：<h1>内容</h1>
   <p>段落</p>

排版标签：
标题标签h(h1~h6)
段落标签<p></p>
水平线<hr>(单标签）
换行标签<br>（单标签）

简单修饰：
b或strong文字加粗
i或em文字斜体
s或del文字加删除线
u或ins文字加下划线

图像标签img
这里只写常用的
例：
<img src="picture.jpg" width="200" height="200" border="3" title="鼠标悬空显示的文字" alt="当图片加载错误时显示的文字" >

链接标签
<a href="跳转目标的文件" target="_blank">文字</a>
在内部文件跳转时不要在前面写http:不然会错误
当跳转外部网站时再在前面写
例：<a href="http://www.baidu.com" target="_blank">百度</a>
上面这个target="_blank" 表示在另一个页面打开（常用）
上面这个target="_self" 表示在这同一个页面打开
顺便提下跳转html文件一定要写对路径哦！不然也会出错

锚点链接
创建锚点链接，用户快速定位到目标内容
1.使用对应id名标注跳转位置
<h3 id = "story">故事</h3>
2.<a href = "#story">被点击的文字</a>

在html中注释与c语言不同
一般在软件中使用快捷键：
ctrl + /
<!-- 这个是注释ctrl + / -->

特殊字符（只写几个 浏览百度可以查到更多）
&emsp; 一个空位
&lt;	<	
&gt;	>	
...

2.表格

创建表格
<table>
	表格中的一行
	<tr>
		一行中的一个单元格
		<td>
		单元格里面的文字
		</td>
	</tr>
</table>

表头单元格标签<th></th>
用表头标签<th></th>替换相对应的单元格标签<td></td>
这里直接看例子好了
    <table align="center" cellpadding="0" cellspacing="0" border="1" width="500">
        <caption>表格标题</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>大白</td>
            <td>男</td>
            <td>90</td>
        </tr>
    </table>

在上面中
border 用来设置表格的边框(默认border="0"无边框)
cellspacing 设置单元格与单元格边框之间的空白间距 默认2px
cellpadding 设置单元格内容与单元格边框之间的空白间距 默认1px
width 设置表格宽度
height 设置表格高度
align 设置表格在网页中的水平对齐方式 left center right

合并表格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

表格结构划分
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
上面标签存在于<table></table>中
例：
    <table border="1" align="center" width="300" height="300">
        <thead>
            <tr>
                <th>
                表头内容
                </th>
                <th colspan="2"></th>
				//由于colspan="2"
				//这里少了一个<th></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>

            <tr>
				//由于rowspan="2"
				//这里少了一个<td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

3.列表

列表
无序列表ul

    <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>

有序列表ol

    <ol>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ol>

在ol中 可以添加属性type="" 默认为1 可以写1，a，A，i 更多可以去查询百度
	  可以添加属性start="8" 那么列表中第一个序列号从8开始排
例：
    <ol>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ol>

    <ol type="A">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ol>

    <ol type="i">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ol>

例输出：

自定义列表

例：
<dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
</dl>

输出
在这里插入图片描述

4.表单

直接上例子了
感觉做一遍差不多就熟悉了
具体内容不过多描述毕竟是概述

     <form action="url地址" method="提交方式" name="表单名称">
        用户名:
        <input type="text" name="username" placeholder="请输入" maxlength="6">
        <br>
        <!-- 密码框用户看不见密码 -->
        密码:
        <input type="password" name="pwd" placeholder="请输入" maxlength="6" id="pwd">
        <br>
        性别:
        <label for="nan">男</label>
        <input type="radio" name="sex" value="男" id="nan">
        <label for="nv">女</label>
        <input type="radio" name="sex" value="女" id="nv" checked="checked">
        <br>
        <!-- 这里的checked="checked"表示默认选择 -->
        <!-- 单选按钮和复选框可以设置checked属性 -->
        爱好:
        吃饭<input type="checkbox" name="hobby">
        睡觉<input type="checkbox" name="hobby">
        上厕所<input type="checkbox" name="hobby" checked="checked">
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
        <br>
        <!-- 后期结合js使用 -->
        <input type="button" value="获取短信验证码">
        <br>
        <!-- 文件域 使用场景 上传文件使用         -->
        上传头像
        <input type="file"><br>
        身高：
        <select>
            <!-- 里面至少包含一个选项 -->
            <!-- 在其中一个写selected="selected"默认选定 -->
            <option>170</option>
            <option>180</option>
            <option>190</option>
            <option selected="selected">200</option>
        </select>
        cm
        <br>
        今日反馈:
        <br>
        <textarea name="文本域" id="" cols="50" rows="5">开始写入。。。。
        </textarea>
    </form>