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< sup> 2</ sup>
20.右下角数字标签
m< sub> 3</ sub>
21.font字体标签
< font size = " 16" color = " red" > Hello World</ font>
22.无序列表标签
无序列表标签(ul+li)
< ul>
< li> 精彩少年</ li>
< li> 美丽突然出现</ li>
< li> 触动心灵的旋律</ li>
</ ul>
< 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>
< ol>
< li> 水果
< ol>
< li> 香蕉</ li>
< li> 哈密瓜</ li>
< li> 菠萝</ li>
< li> 苹果</ li>
</ ol>
</ li>
< li> 蔬菜</ li>
< li> 茶</ li>
</ ol>
24.图片和超连接标签
图片标签(img)
< 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 对齐方式居中
-->
< 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单选标签
< 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多选标签
< 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. 空格( ) :
2. 大于号(>) : >
3. 小于号(< ) : <
4. 单个双引号(") : "
5. 与号(&) : &
<!-- 显示: b<a> c -->
b< a> 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    
< 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    
< 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" )
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)
result. value = res
var xi = c/ res* 100
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>