Html学习

胡启行

已于 2023-05-11 18:22:53 修改

阅读量326

点赞数

分类专栏： Html 文章标签： html 学习前端

于 2021-04-04 20:30:22 首次发布

本文链接：https://blog.csdn.net/weixin_42605384/article/details/115432679

版权

Html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1.html表头部分代码

<!DOCTYPE html>: 版本的声明,当前是html5版本

html标签: 网页的根标签,所有其它的标签都被html包含

head网页头部标签: 网页的配置信息

    <title>网页标签的标题</title>

    <meta charset="utf-8">:字符集(编码的设置)

    <meta name="keywords" content="千锋教育,良心培训"> 为搜索引擎提供的关键字列表：各关键词间用英文逗号","隔开

    <meta name="description" content="国内领先的前端品牌"> Description用来告诉搜索引擎你的网站主要内容
    
body网页主体标签: 浏览器展示内容的标签都放在body标签中

<!-- 注释内容 -->: html注释

2.html(1-6级)标题

标题标签(h1~h6)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述

3.html背景颜色

<!-- 背景颜色红色 -->
	<body bgcolor="red">
	</body>

4.html背景图片

<!-- 背景图片 -->
	<body background="image/1.jpg">
	</body>

5.html段落标签

段落标签(p)
<p>段落文本</p>
注意:如果一篇文章有3个段落时，要放在3个p标签中

6.html强调标签(斜体)

强调/加强语气(strong/em)
em:强调->默认是斜体
strong：更强烈的强调 ->粗体
<em>强调</em>
<strong>强烈的强调</strong>

7.html添加一行代码标签

添加一行代码(code)
<code>一行代码</code>

8.html添加多行代码标签

添加一段代码(pre)
<pre>多行代码</pre>

9.html给文本增加样式的标签

给文本增加样式的标签(span)
<span> 文本 </span>

10.html布局标签

布局标签(div)
<div>用于布局</div>

10.html短引用文本标签

短引用文本(q)
<q>短引用文本</q>

10.html长引用标签

长引用(blockquote)
<blockquote> 长引用 </blockquote>

11.html换行标签

换行标签(br)

12.一首诗的书写样式

<h2>枫桥夜泊</h2>
<p>
   月落乌啼霜满天，<br/>
   江枫渔火对愁眠。<br/>
   姑苏城外寒山寺，<br/>
   夜半钟声到客船。
</p>

13.分割线标签

分割线标签(hr)
<hr color="red">  <!-- 画出红色的线 -->

14.预留格式标签

<!-- 预留格式 -->
		<pre>
			for(int i = 0 ；i < 100; i++ ){
				System.out.println("i=" + i);
			}
		</pre>

在这里插入图片描述

<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr/>	
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>

15.粗体字标签

<!-- 粗体字 -->
		<b>粗体字</b>

在这里插入图片描述

16.斜体字标签

<!-- 斜体字 -->
		<i>斜体字</i>

在这里插入图片描述

17.插入字标签

<!-- 插入字 -->
		<ins>插入字</ins>

在这里插入图片描述

18.删除字标签

<!-- 删除字 -->
		<del>删除字</del>

在这里插入图片描述

19.平方号标签

<!-- 10的平方 -->
		10<sup>2</sup>

在这里插入图片描述

20.右下角数字标签

<!-- m右下角下数字3 -->
		m<sub>3</sub>

在这里插入图片描述

21.font字体标签

<!-- font字体标签 -->
		<font size="16" color="red">Hello World</font>

在这里插入图片描述

22.无序列表标签

无序列表标签(ul+li)
<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

在这里插入图片描述

<!-- type标签设置前面的形状circle:圆圈，square:小方框 ，disc:小圆点 -->
<ul>
	<li>中国
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
		</ul>
	</li>
	<li>美国</li>
	<li>日本</li>
</ul>

在这里插入图片描述

23.有序列表标签

有序列表标签(ol+li)
<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

在这里插入图片描述

<!-- type标签可以设置有序列表的标签是数字还是字母等 -->
<ol>
	<li>水果
		<ol>
			<li>香蕉</li>
			<li>哈密瓜</li>
			<li>菠萝</li>
			<li>苹果</li>				
		</ol>
	</li>
	<li>蔬菜</li>
	<li>茶</li>
</ol>

在这里插入图片描述

24.图片和超连接标签

图片标签(img)
<!-- 网络图片 如果加上alt标签，表示如果加载失败后的提示信息 -->
<img src="http://i0.hdslb.com/bfs/article/138225f66e58191efab2c2fdbbf95799aaad8c39.jpg">
<!-- 本地图片 -->
<img src="img/timg.jpg" alt="图片地址错误显示" title="鼠标移到图片上显示"/>
<!-- 云图片 -->
<img src="https://note.youdao.com/yws/api/personal/file/WEB6e9e40071bff499ec0fdae4756359ec5?method=download&shareKey=a722ddd923ca202724d9da80ca42b68a" />

<!-- 超链接 如果加上target标签，表示设置最终窗口打开的位置：
_blank:新窗口打开
_self:当前窗口
_parent:当前窗口的父窗口
_top:当前窗口的顶级窗口
 -->
		<a href="www.baidu.com" title="鼠标放在上面的提醒消息">Html学习</a>

在这里插入图片描述

25.网页窗口设置iframe标签

<!-- 设置显示百度网页的窗口大小 -->
		<iframe src="http://www.baidu.com" width="500" height="200"></iframe>

在这里插入图片描述

26.table标签

<table border="1">
	<caption>员工通讯录</caption>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>职位</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>产品经理</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>男</td>
		<td>开发工程师</td>
	</tr>
</table>

在这里插入图片描述

<!-- 
	<thead><tbody><tfooter>标签作用: 如果不加表格会加载完成之后在显示,如果加了,表格tbody里的内容就会按需加载,防止数据过大,加载缓慢问题
	colspan: 水平合并单元格
	border：设置边框宽度
	align：center 对齐方式居中
<!--如果想将列合并 张三和男这两个单元格合并成一个可以写成如下：<td colspan="2">张三男</td>-->
<!--如果想将行合并 张三和李四这两个单元格合并成一个可以写成如下：<td rowspan="2">张三李四</td>-->		
 -->
<table border="1">
	<caption>员工通讯录</caption>
	<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>职位</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>张三</td>  	                    
			<td>男</td>
			<td>产品经理</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>男</td>
			<td>开发工程师</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>合计</td>
			<td colspan="2">100</td>
		</tr>
	</tfoot>
</table>

在这里插入图片描述

27.form标签

表单标签(form)
<form>
	性别:
	<label for="male">男</label>
	<input type="radio" name="gender" checked id="male"/>
	<label for="female">女</label>
	<input type="radio" name="gender" id="female"/><br/>
	兴趣:
	篮球 <input type="checkbox" name="a" />
	足球 <input type="checkbox" checked name="b" />
	台球 <input type="checkbox" name="c" />
	<br/>
	<label for="email">邮箱</label>
	<input type="email" name="email" id="email" placeholder="输入邮箱地址"/><br/>
	<label for="desc">描述</label>
	<textarea value="文本域" name="desc" id="desc"></textarea><br/>
	<label for="address">地址</label>
	<select id="address">
		<option>北京</option>
		<option>上海</option>
		<option>天津</option>
		<option>南京</option>
	</select>
	<br/>
	<input type="submit" value="提交" />
	<input type="reset" value="重置" />
</form>

在这里插入图片描述

<form action="http://www.baidu.com" >
	<input type="submit"  value="百度" />		
</form>

在这里插入图片描述


<form action="http://192.168.145.2:8080/crm/login" >
			用户名:<input type="text"/>
			<br>
			密码:<input type="password"/>
</form>

在这里插入图片描述

28.input标签

<!-- 选择文件 -->
		<input type="file"  />

在这里插入图片描述

29.radio单选标签

<!-- 单选框默认选择：女 ，只有在单选框的name相同的时候每次才只能选择一项
		如果name值不相同，那么两个选项就都可以选择了-->
		<form action="http://192.168.145.2:8080/crm/login" >
			<input type="radio" name="sex1"  value="1" />男
			<input type="radio" name="sex1"  value="0" checked/>女
		</form>

在这里插入图片描述

30.checkbox多选标签

<!-- 多选框默认选择：抽烟 ，只有在单选框的name相同的时候才是同一个多选框-->
<form action="http://192.168.145.2:8080/crm/login" >
	<input type="checkbox" name="aihao"  value="smoke" checked />抽烟
	<input type="checkbox" name="aihao"  value="drink" />喝酒
	<input type="checkbox" name="aihao"  value="firehair" />烫头
</form>

在这里插入图片描述

31.select下拉框标签

<!-- 下拉框，默认选择的是本科-->
<select name="学历">
	<option>高中</option>
	<option>专科</option>
	<option selected>本科</option>
	<option>硕士</option>		
</select>

在这里插入图片描述

32.文本区域标签

<!-- 文本域-->
		简介<br><textarea rows="10" cols="40" name="jianjie">
			
		</textarea>

在这里插入图片描述

33.特殊字符标签

特殊字符
1. 空格( ) : &nbsp;
2. 大于号(>) : &gt;
3. 小于号(<) : &lt;
4. 单个双引号(") : &quot;
5. 与号(&) : &amp;
 <!-- 显示:b<a>c -->
b&lt;a&gt;c

在这里插入图片描述

34.一些新增标签说明

html5新增标签
网站头部标签(header)
和div功能相同只是带有语义
网站尾部标签(footer)
和div功能相同只是带有语义
网站区域标签(section)
和div功能相同只是带有语义
第四章 标签的语义化
什么是语义化
给浏览器中显示出来的每一个内容赋予其特殊的意义
语义化的好处
6. 更容易被搜索引擎收录
7. 更容易让屏幕阅读器读出网页内容
8. readonly和disabled修饰,都是只读不可修改的，但是提交表单的时候，disabled修饰的不提交
9. maxlength:最多输入多少个字符的参数

35.映射关系的一个写法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>输入数值对应显示数值</title>
  </head>
  <body>
    <label for="input">请输入数值：</label>
    <input type="number" id="input" oninput="showOutput()">
    <label for="output">对应数值：</label>
    <output id="output"></output>

    <script>
      const mapping = {
        1: 10,
        2: 20,
        3: 30,
        // 可以根据需要添加更多的映射关系
      };
      function showOutput() {
        const input = document.getElementById("input").value;
        const output = document.getElementById("output");
        if (mapping[input]) {
          output.value = mapping[input];
        } else {
          output.value = "";
        }
      }
    </script>
  </body>
</html>

36.双法液位计写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双法兰液位计计算</title>
	</head>
	<body>
		<center>
		<h1>双法兰液位计计算</h1> <br>
		<h2>方法一</h2> <br>
		<label for="downzhi">设计图纸下限值(pa)</label>
		<input type="number" name="downzhi1" id="num1" placeholder="输入设计说明书量程下限值"/>pa <br>
		<label for="upzhi">设计图纸上限值(pa)</label>
		<input type="number" name="upzhi2" id="num2" placeholder="输入设计说明书量程上限值"/>pa <br>
		<label for="liangcheng">设计图纸量程值(pa)</label> 
		<input type="number" name="liangcheng3" id="result"/>pa <br>
		<label for="chaya">膜盒实际差压值(pa)</label>
		<input type="number" name="chaya" id="num3" placeholder="输入现场膜盒实际差压值"/>pa <br>
		<label for="xians">液位显示(%)</label>
		<input type="number" name="xians" id="xians"/>%  <br> 
          <hr color = "red">
		<h2>方法二：密度计算方法</h2> <br>
		<label for="des1">介质密度(Kg/m3)</label>
		<input type="number"  id="des1" placeholder="输入介质密度"/>Kg/m3 <br>
		<label for="des2">硅油密度(Kg/m3)</label>
		<input type="number"  id="des2" placeholder="输入硅油密度:0.96"/>Kg/m3 <br>
		<label for="juli">高度(m)</label>
		<input type="number"  id="juli" placeholder="输入两法兰之间垂直距离"/>m &nbsp &nbsp
		<label for="juli2">(变送器在下法兰的下方)高度(m)</label>
		<input type="number"  id="juli2" placeholder="变送器距下法兰中心高度"/>m <br>
		<label for="qianyi">迁移量(Kpa)</label>
		<input type="number"  id="qianyi" />Kpa <br>
		<label for="xiaxian">所有情况下的计算量程下限(Kpa)</label>
		<input type="number"  id="xiaxian" />Kpa <br>
		<label for="shangxian">双法兰变送器处于罐体中间或下法兰平齐处部位计算量程上限(Kpa)</label> 
		<input type="number"  id="shangxian" />Kpa  &nbsp &nbsp
		<label for="shangxianu">双法兰变送器处于下法兰面以下位置计算量程上限(Kpa)</label>
		<input type="number"  id="shangxianu" />Kpa <br>
		<label for="zong">计算总量程(Kpa)</label>
		<input type="number"  id="zong" />Kpa <br>
        <hr color = "red">
        <h2>方法三：确定双法兰零点时仪表下限设定值和工艺要求显示的液位值来计算仪表上限设定值</h2> <br>
        <a href="双法兰液位计计算方法3.html" target=_blank">确定双法兰零点时仪表下限设定值和工艺要求显示的液位值来计算仪表上限设定值</a>
	
		<script type="text/javascript">
			window.onload = function() {
				//量程下限值输入
				var num1 = document.getElementById("num1")
				//量程上限值输入
				var num2 = document.getElementById("num2")
				//量程计算显示
				var result = document.getElementById("result")
				//现场实际差压输入
				var num3 = document.getElementById("num3")
				//现场实际液位百分比显示
				var xians = document.getElementById("xians")
				//输入介质密度
				var des1 = document.getElementById("des1")
				//输入硅油密度
				var des2 = document.getElementById("des2")
				//输入两法兰之间的垂直高度
				var juli = document.getElementById("juli")
				//输入两法兰之间的垂直高度
				var juli2 = document.getElementById("juli2")
				//迁移量
				var qianyi = document.getElementById("qianyi")
				//量程下限
				var xiaxian = document.getElementById("xiaxian")
				//量程上限
				var shangxian = document.getElementById("shangxian")
				//量程上限（变送器低于下法兰位置的情况）
				var shangxianu = document.getElementById("shangxianu")
				//总量程
				var zong = document.getElementById("zong")
				
				//监听input输入框里面输入的数值
				num1.addEventListener("input",calculate);
				num2.addEventListener("input",calculate);
				num3.addEventListener("input",calculate);
				des1.addEventListener("input",calculate);
				des2.addEventListener("input",calculate);
				juli.addEventListener("input",calculate);
				juli2.addEventListener("input",calculate);
				function calculate () {
					//量程下限
					var a = parseFloat(num1.value)
					//量程上限
					var b = parseFloat(num2.value)
					//现场实际差压
					var c = parseFloat(num3.value)
					//获取绝对值,求量程
					var res = Math.abs(a-b)
					//将计算的量程给到第3个input控件
					result.value = res
					//向下取值，计算实际的液位显示百分比
					var xi = c/res*100
					//将计算的结果保留2位小数
					var xi1 = xi.toFixed(2)
					xians.value = xi1
					//介质密度
					var p = parseFloat(des1.value)
					//硅油密度
					var q = parseFloat(des2.value)
					//距离高度
					var m = parseFloat(juli.value)
					var m2 = parseFloat(juli2.value)
					//计算迁移量
					var qianyi1 = -q*9.8*m
					var qianyi2 = qianyi1.toFixed(2)
					qianyi.value = qianyi2
					//计算量程下限
					var xiaxian1 = -q*9.8*m
					var xiaxian2 = xiaxian1.toFixed(2)
					xiaxian.value =xiaxian2
					//计算量程上限
					var shangxian1 = (p-q)*9.8*m
					var shangxian2 = shangxian1.toFixed(2)
					shangxian.value = shangxian2
					//计算量程上限(变送器低于下法兰位置的情况）)
					var shangxianu1 = p*9.8*m-q*9.8*m2
					var shangxianu2 = shangxianu1.toFixed(2)
					shangxianu.value = shangxianu2
					//计算总量程
					var zong1 = p*9.8*m
					var zong2 = zong1.toFixed(2)
					zong.value = zong2
				   }
                }
		</script>
		</center>
	</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>双法兰液位计计算方法三</title>
</head>
<body>
    <center>
	<h1>双法兰液位计计算方法三</h1>
	<form>
		<label for="m">输入现在变送器实际的压力值:</label>
		<input type="text" id="m" name="m" required>pa <br>

		<label for="x">输入零点时仪表量程下限值:</label>
		<input type="text" id="x" name="x" required>pa <br>

		<label for="a">输入现在显示的液位百分比值:</label>
		<input type="text" id="a" name="a" required>% <br>

		<label for="b">输入工艺要求显示的液位百分比值:</label>
		<input type="text" id="b" name="b" required>% <br>

		<input type="button" value="计算" onclick="calculate()"><br>

		<label for="y">原设置的仪表量程上限值:</label>
		<input type="text" id="y" name="y" readonly>pa <br>

		<label for="k">原设置的仪表量程上限值进行的偏移量:</label>
		<input type="text" id="k" name="k" readonly>pa <br>
		
		<label for="k">现在需要设置的仪表上限值(量程上限+偏移量):</label>
		<input type="text" id="y+k" name="y+k" readonly>pa <br>

	</form>
    </center>
	<script>
		function calculate() {
			var m = parseInt(document.getElementById("m").value);
			var x = parseInt(document.getElementById("x").value);
			var a = parseInt(document.getElementById("a").value);
			var b = parseInt(document.getElementById("b").value);
			var y = (100*(m-x)+a*x)/a;
			var k = ((100*(m-x)+b*x)-b*y)/b;
			var yPlusK = y + k;
			document.getElementById("y").value = y;
			document.getElementById("k").value = k;
			document.getElementById("y+k").value = yPlusK;
		}
	</script>
</body>
</html>

胡启行

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html学习

<!DOCTYPE html>: 版本的声明,当前是html5版本html标签: 网页的根标签,所有其它的标签都被html包含head网页头部标签: 网页的配置信息 <title>网页标签的标题</title> <meta charset="utf-8">:字符集(编码的设置) <meta name="keywords" content="千锋教育,良心培训"> 为搜索引擎提供的关键字列表：各关键词间用英文逗号
复制链接

扫一扫