HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

全栈测试笔记

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量518

点赞数

文章标签： html 前端 javascript css html5

本文链接：https://blog.csdn.net/weixin_44896406/article/details/128691474

版权

HTML简介

HTML，全称是超文本标记语言(HyperText Markup Language)，超文本就是指页面内可以包含图片、链接等非文字元素，而标记语言指由标记(标签)构成的语言。

HTML代码对缩进的要求并不严格，我们通常使用缩进来让我们的代码结构更清晰。

HTML注释

HTML注释不支持嵌套，也不能写在HTML标签中。快捷键是ctrl+/

HTML文档结构

<!DOCTYPE HTML>
<html>
    <head>头部信息内容</head>
    <body>页面主体内容</body>
</html>

解释：　

<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
<html></html> 称为根标签，所有的网页标签都在<html></html>中。
<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容最终会在浏览器中显示出来。

HTML效果查看

pycharm / idea 中编写html代码后，鼠标移动到右上角，会显示浏览器图标，点击对应的图标查看效果

或者右击html文件

head标签

title，meta，link，style，script

除了title，在head中其它标签(meta，link，style，script)都看不到

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- title标签 -->
	<title>全栈测试笔记</title>

        <!--meta标签-->
	<!--指定文档的内容类型和编码类型-->
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <!-- 每3秒刷新一次 -->
        <meta http-equiv="refresh" content="3">

	<!-- 5秒之后重定向到某网站 -->
	<meta http-equiv="refresh" content="5;URL=https://www.cnblogs.com/uncleyong/"/>

	<!--IE打开时，告诉IE浏览器以最高的兼容模式渲染当前网页 -->
	<meta http-equiv="x-ua-compatible" content="IE=edge">

	<!-- 关键字检索 -->
	<meta name="keywords" content="自动化测试,性能测试,测试开发">

        <!--网站描述-->
	<meta name="description" content="全栈测试笔记">

	<!-- link标签，定义title的图标 -->
	<link rel="icon" href="./fav.ico">

	<!-- link标签，引入外部样式表 -->
	<link rel="stylesheet" type="text/css" href="./index.css">

	<!-- style标签，定义内部样式表 -->
	<style type="text/css">
　　　　  　　#d{color: red;}
	</style>

	<!-- script标签，定义内容脚本文件 -->
	<script type="text/javascript">

	</script>

	<!-- script标签，引入外部js文件 -->
	<script src="./index.js"></script>
</head>
<body>

</body>
</html>

网站图标

body标签

h1-h6，p，em，strong，a，div，ul，ol，dl，dt，dd，img，br，span，hr，特殊符号，文本样式标签，

table[thead、tr、th、tbody、tr、td]，

form[input，label，select，option，textarea]

标题标签 h1~h6

<h1> - <h6>，标题标签，自带属性。<h1>定义最大的标题，<h6>定义最小的标题。没有h7

独占一行，是块级元素，可以设置宽高、加大加粗

示例：

	<div class="hx">
		<h1>全栈测试笔记</h1><h2>全栈测试笔记</h2>
		<h3>全栈测试笔记</h3>
		<h4>全栈测试笔记</h4>
		<h5>全栈测试笔记</h5>
		<h6 style="height: 100px">全栈测试笔记</h6>
		<h7>全栈测试笔记</h7>
	</div>

效果：

段落标签 p

<p>，paragraph的简写，段落和段落之间有间距

强调 <em>或<strong>标签

如果想在一段文字中特别强调某几个字，这时候就可以用到<em>或<strong>标签。

这两个标签都是表示强调，但是两者在强调的语气上有区别：<em>表示强调，<strong>表示更强烈的强调。

在浏览器中<em>默认会用斜体表示，<strong>会用粗体来表示。推荐使用<strong>表示强调

示例：

	<div class="p1">
        <p>全栈测试笔记</p>
        <p><strong>全栈测试笔记</strong></p>
        <p><em>全栈测试笔记</em></p>
    </div>

效果：

超链接标签 a

超级链接<a>标记代表一个链接点，是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像

target：_blank 在新的网站打开链接的资源地址
target：_self 在当前网站打开链接的资源地址
title： 表示鼠标悬停时显示的标题

a标签属于行内标签：在一行内显示，设置宽高不起作用

示例：

<body>
    <div class="p1">
        <p style="height: 200px">顶部</p>
	</div>
	<div class="test">
		<a href="https://www.cnblogs.com/uncleyong/" target="_blank" title="qzcsbj">全栈测试笔记</a>
		<!-- 返回页面顶部的内容，href="#"是返回页面顶部的空链接 -->
		<a href="#">跳转到顶部</a>
                <!--去掉a标签的下划线，text-decoration: none-->
		<a href="#" style="text-decoration: none">跳转到顶部</a>
	</div>
</body>

盒子标签 div

<div> 标签可以把文档分割为独立的、不同的部分，可以添加class属性，class的值可以不是唯一的，可以和其它任意标签的class的值一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .aaa{
            color:red;
        }
	</style>
</head>
<body>
    <div class='aaa'>全栈测试笔记</div>
    <div class='a'>
        <p class='bbb'>qzcsbj</p>
        <p class='aaa'>python</p>
    </div>
</body>
</html>

列表标签 ul，ol

<ol>:ordered listsde的缩写，有序列表
ol标签的属性：
	type：列表标识的类型
		1：数字(编号默认为1开始)
		a：小写字母
		A：大写字母
		i：小写罗马字符
		I：大写罗马字符

<ul>:unordered lists的缩写，无序列表
ul标签的属性： 
	type：列表标识的类型
		disc：实心圆(默认值)
		circle：空心圆
		square：实心矩形
		none：不显示标识

示例：　

	<div class="lists">
        <ul type="none" >
            <li>我的账户     ></li>  <!-- &gt表示> -->
            <li>我的订单     ></li>
            <li>我的优惠券    ></li>
            <li>我的收藏     ></li>
            <li>退出      ></li>
        </ul>
        <ul>
            <li>我的账户</li>
            <li>我的订单</li>
        </ul>
        <!--  去掉前面的标识，type="none" 等价于 style="list-style: none" -->
        <ol style="list-style: none">
                <li>我的账户></li>
                <li>我的订单></li>
                <li>我的优惠券></li>
                <li>我的收藏></li>
                <li>退出></li>
        </ol>
        <ol>
            <li>我的账户</li>
            <li>我的订单</li>
        </ol>
    </div>

效果：

分层列表dl，外层dt、内层dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <dl>
            <dt>列表标题1</dt>
            <dd>列表内容1</dd>
            <dd>列表内容1</dd>
        </dl>
        <dl>
            <dt>列表标题2</dt>
            <dd>列表内容2</dd>
            <dd>列表内容2</dd>
        </dl>
    </div>
</body>
</html>

效果：

图片标签 <img/>

一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。

语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

可设宽高，是行内块标签

示例：

    <div class="image">
    <!-- 图片标签<img/> -->
        <img src="./test1.png" alt="图片1" style="width: 200px;height: 200px">
        <img src="./test2.png" alt="图片2"  style="width: 200px;height: 200px">
    </div>

换行标签 <br>

<br>标签用来将内容换行。

文本标签 span

span行内标签，如果只给行中部分内容设置样式，就可以用这个标签

<p>你好，<span style = "color: red;">全栈测试笔记</span></p>

分割线 <hr>

<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容

特殊符号

浏览器在显示的时候会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格，HTML代码中的所有连续的空行(换行)也被显示为一个空格。要用 

常用的特殊字符：

文本样式标签

主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等。
1. <b></b>：加粗
2. <i></i>：斜体
3. <u></u>：下划线
4. <s></s>：删除线
5. <sup></sup>：上标
6. <sub></sub>：下标

<b>全</b><i>栈</i><u>测</u><s>试</s><sup>笔</sup><sub>记</sub><em>你</em><strong>好</strong>

效果：

全栈测试^笔_记你好

表格标签 table

table[thead、tr、th、tbody、tr、td、tfoot、tr、td]

表格由<table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义)，每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格行和列的合并：
　　rowspan 合并行(竖着合并)
　　colspan 合并列(横着合并)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	<!-- 表格 -->
	<table border="1" cellspacing="0">
		<!-- 表格头 -->
		<thead>
			<tr>
				<th></th>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
			</tr>

		</thead>

		<!-- 表格主体 -->
		<tbody>
			<!-- 表格主体的每一行 -->
			<tr>
				<td rowspan="3">上午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>生物</td>
				<td>化学</td>

			</tr>
			<tr>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>生物</td>
				<td>化学</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>生物</td>
				<td>化学</td>
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>生物</td>
				<td>化学</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>生物</td>
				<td>化学</td>
			</tr>

		</tbody>
		<tfoot>
			<tr>
				<td colspan="6" style="text-align: center">课程表</td>
			</tr>
		</tfoot>

	</table>

</body>
</html>

效果：

表单标签 form系列

表单是一个包含表单元素的区域，允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框()
表单用于显示、收集信息，并将信息提交给服务器

包含：from、label、input、单选按钮radio、复选框checkbox、textarea、select下拉列表等

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单控件</title>
</head>
<body>
	<div class="form">
		<!-- form表单标签是一个块级元素，被提交 -->
		<form action="https://www.cnblogs.com/uncleyong/" method="get">
			<p>
				<!-- label标签行内元素  input是行内块元素-->
				<label for='user'>用户名:</label>
				<input type="text" name="username" id="user" placeholder="请输入用户名">
				<input type="text" name="username" id="user2" value="请输入用户名2" placeholder="请输入用户名">
			</p>
			<p>
				<label for="password">密码：</label>
				<input type="password" name="password" id="password" placeholder="请输入密码">
			</p>

			<!-- 单选按钮radio  checked会被默认选中 -->
			<p>
				用户性别：
				<input type="radio" name="sex" value="男" checked="">男
				<input type="radio" name="sex" value="女">女

			</p>

			<!-- 复选框checkbox-->
			<p>
				用户的爱好:
				<input type="checkbox" name="checkfav" value="吃" checked="check">吃
				<input type="checkbox" name="checkfav" value="喝">喝
				<input type="checkbox" name="checkfav" value="玩">玩
				<input type="checkbox" name="checkfav" value="乐">乐
			</p>

			<p>
				<!-- 文件上传 -->
				<input type="file" name="textFile">
			</p>

			<p>
				<!-- 文本域(多行文本) -->
				自我介绍：
				<textarea cols="20" rows="5"  name="txt" placeholder="请做自我介绍"></textarea>
			</p>

            <p>
				<!-- 下拉列表 -->
				<select name="city" size="1">
					<option value="深圳" selected>深圳</option>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="山东">山东</option>
					<option value="福建">福建</option>
				</select>
			</p>

			<p>
				<!-- 下拉列表，size表示默认展示条数 -->
				<select name="city" size="2" multiple="multiple">
					<option value="深圳" selected>深圳</option>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="山东">山东</option>
					<option value="福建">福建</option>
				</select>
			</p>

            <p>
                <!-- optgroup是分组，label是组的名字 -->
                <select name="city" size="5" multiple="multiple">
                    <optgroup label="广东省">
                        <option value="1">深圳</option>
                        <option value="2">东莞</option>
                    </optgroup>
                    <optgroup label="山东省">
                        <option value="3">济南</option>
                        <option value="4">青岛</option>
                    </optgroup>
                </select>
            </p>
			<p>
 				<!-- 普通的按钮 -->
				<input type="button" name="btn" value="提交" disabled="disabled">
				<!-- 重置按钮 -->
				<input type="reset" name="">
				<!-- 提交form表单使用 -->
				<input type="submit" name="btn" value="submit提交">
			</p>

		</form>
		<!-- button按钮，是普通按钮，和form表单没任何关系 -->
		<button type="button">按钮</button>
	</div>

</body>
</html>

效果：

标签分类

HTML中标签元素分为三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table> <form> <li>

常用的行内元素：
<a> <span> <br> <i> <em> <strong> <label>

常用的行内块状元素：
<img> <input>

块级元素特点：display: block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。这个块级元素独占一行
2、元素的高度、宽度、行高以及内边距、外边距都可设置。
3、元素宽度在不设置的情况下，是它本身占父容器的100%(和父元素的宽度一致，默认就是浏览器的宽度)，除非设定一个宽度(宽度是父盒子的宽度，高度根据内容填充)

行内元素特点：display: inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及纵向的margin不可设置(设置了也不起作用)；可以设置padding及横向的margin
3、元素的宽度就是它包含的文字或图片的宽度(它的宽高根据内容去填充)，不可改变。

行内块状元素的特点：display: inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及内边距、外边距都可设置。

另外：我们可以通过display属性对块级元素、行内元素、行内块元素进行转换。

【bak】

原文会持续更新，原文地址：https://www.cnblogs.com/uncleyong/p/17045655.html

全栈测试笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML简介HTML，全称是超文本标记语言(HyperText Markup Language)，超文本就是指页面内可以包含图片、链接等非文字元素，而标记语言指由标记(标签)构成的语言。HTML代码对缩进的要求并不严格，我们通常使用缩进来让我们的代码结构更清晰。标签1. 在HTML中规定标签使用英文的尖括号，即<和>包起来，如<p>、<div>都是标签...
复制链接

扫一扫