day12-HTML


HTML(超文本标记语言)


html代码实际上就是一套能够被浏览器所识别的规则代码,由一个个标签组成。html代码就是一大长串字符串,而这种字符串的格式正好能够被浏览器所识别,也就有了我们的WEB页面。


后端与前端交互方式


1、后端通过直接返回浏览器能够识别的html代码


2、后端返回数据,前端替换html种的指定数据


文本标签text以及select选择框标签
    <div id="i1" class="c1"></div>
<input type="text" name="age" value="19">
<input type="hidden" name="age" value="18"> 隐藏input 提交的载具 不显示 {'name':value}
<input type="password"> 隐藏的文本
<input type="checkbox"> 多选框
<input type="radio"> 单选框
<input type="reset"> 必须与form表单连用才能有重置的效果
<input type="button"> 只是一个按钮 没有任何作用
<input type="submit">与form表单连用 有提交的功能
<textarea name="age">11111111</textarea> 多行文本
<form method="post" action="">

</form>
<label for="i1">用户名</label>
<input type="text" id="i1">
<select name="" size="2" multiple="multiple">
<option value="">1</option>
<option value="" selected="selected">2</option>
<option value="">3</option>
</select>
<a href="http://www.imdsx.cn">大师兄</a>
<input type="checkbox" name="age">,
<input type="checkbox" name="age">
<input type="checkbox" name="age">{'age':[1,2,3]}
<input type="radio" name="age">
<input type="radio" name="age">
<!--innerHtml 获取div标签中的所有内容 包括html代码-->













<!DOCTYPE html>

<html lang="en">
<head>
<!--自闭合标签:没有另一半,自动闭合-->
<!--主动闭合标签:有另一半叫主动闭合标签-->
<!--head当中 大多数标签是看不到的-->
<meta charset="UTF-8">

<!--间隔x秒后,跳转到指定url-->
<meta http-equiv="refresh" content="3;url='http://www.nnzhp.cn'">

<!--关键字检索-->
<meta name="keywords" content="大师兄,牛牛">

<!--网站描述-->
<meta name="description" content="j">

<!--浏览器tag的名字-->
<title>璐璐</title>

<!--tag标签的图片-->
<link rel="shortcut icon" href="logo.jpg">

<!--欠着-->
<!--<link rel="stylesheet" href="">-->
<!--<style></style>-->
<script></script>
</head>
<body>
</body>
</html>








<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<!--<h1>h1标签</h1>-->
<!--<h2>h1标签</h2>-->
<!--<h3>h1标签</h3>-->
<!--<h4>h1标签</h4>-->
<!--<h5>h1标签</h5>-->
<!--<h6>h1标签</h6>-->
<!--白板标签-->
<!--没有任何css的样式-->
<!--内联标签真白板标签-->
<!--有多大占多大-->
<!--<span>这是span标签</span>-->
<!--<span>这是span标签</span>-->
<!--这是我写在标签外面的内容-->
<!--块级伪白板标签-->
<!--无论有多大都占一行-->
<!--<div>这是div标签</div>-->

<!--段落标签-->
<!--换行标签-->
<!--<p>这是span标签 这是span标签 这是我写在标签外面的内容这是span标签-->
<!--<br/>这是span标标签 这是我写在标签外面的内容这是span标签 这是span标签-->
<!--这是我写在标签外面的内容这是span标签 这是s标签 这是我写在标签外面的内容</p>-->
<!--<p>这是span标签 这是我写在标签外面的内容这是span标签 这是span标签 这是我写在标签外面的内容</p>-->
<!--输入框 input-->
<!--<input type="text" name="username" value="" placeholder="请输入用户名">-->
<!--<input type="password" name="passwd">-->
<!--多选框 checked 默认勾选-->
<!--<input type="checkbox" name="" checked="checked">-->
<!--radio name字段 相同时,单选框互斥-->
<!--<div>-->
<!--<span>男</span><input type="radio" name="sex">-->
<!--</div>-->
<!--<div>-->
<!--<span>女</span><input type="radio" name="sex" >-->
<!--</div>-->
<!--form 表单提交会刷新页面 ajax不会刷新页面-->
<!--<form action="s.html" method="post">-->
<!--<input type="checkbox" checked="checked">-->
<!--<input type="text" name="username" value="">-->
<!--&lt;!&ndash;没有任何外加操作&ndash;&gt;-->
<!--<input type="button" value="增加">-->
<!--&lt;!&ndash;与form表单连用,会提交form表单中的数据&ndash;&gt;-->
<!--<input type="submit" value="提交">-->
<!--<input type="reset">-->
<!--</form>-->



!!!!!
<!--label 与input 连用 通过for 属性 映射到input的id属性-->
<!--<label for="i1">用户名:</label>-->
<!--&lt;!&ndash;id属性是选择器&ndash;&gt;-->
<!--<input id="i1" placeholder="请输入用户名" name="username" type="text">-->
<!--多行文本-->
<!--<textarea name="content">这是textarea的内容</textarea>-->

<!--select 下拉框标签-->
<!--<select name="city" size="1" multiple="multiple">-->
<!--<option value="1">黑龙江</option>-->
<!--<option value="2" selected="selected">河北</option>-->
<!--<option value="3">河南</option>-->
<!--</select>-->
<!--<select multiple="multiple">-->
<!--<optgroup label="黑龙江">-->
<!--<option>牡丹江</option>-->
<!--<option>哈尔滨</option>-->
<!--<option>鸡西</option>-->
<!--</optgroup>-->
<!--<optgroup label="河北">-->
<!--<option>保定</option>-->
<!--<option>石家庄</option>-->
<!--<option>涞水</option>-->
<!--</optgroup>-->
<!--</select>-->
<!--<a href="http://ui.imdsx.cn" target="_blank" style="text-decoration:none">大师兄博客</a>-->
<!--alt属性代表当图片加载失败,所展示的文案 title鼠标悬浮的logo-->
<!--<img src="logo.jpg" alt="这是logo" title="logo">-->
<!--列表标签-->
<!--<ul>-->
<!--<li>用例名称</li>-->
<!--<li>用例方法</li>-->
<!--<li>返回参数</li>-->
<!--</ul>-->
<!--数字列表-->
<!--<ol>-->
<!--<li>用例名称</li>-->
<!--<li>用例方法</li>-->
<!--<li>返回参数</li>-->
<!--</ol>-->
<!--<dl>-->
<!--<dt>黑龙江</dt>-->
<!--<dd>牡丹江</dd>-->
<!--</dl>-->
<!--<dl>-->
<!--<dt>河北</dt>-->
<!--<dd>保定</dd>-->
<!--</dl>-->

<!--表格标签-->
<table border="1">#border 是边框厚度
<thead>
<tr>
<th>id</th>
<th>caseName</th>
<th>Method</th>
<th colspan="2">操作</th>#colspan代表着要占多少列
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="3">抽奖</td>#rowspan代表着要占多少行
<td rowspan="3">post</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>编辑</td>
<td>删除</td>
</tr>
</tbody>
</table>

1、主动闭合和自闭合
<input>
<span></span>
2、什么是块级标签 什么是内联标签 又交行内标签
<input>
<div></div>
<img src="../../学习/视频/天蝎座/day12/SYZtester/logo.jpg">
3、出场率最高的标签
伪白板标签 display:block 块级标签属性
<div></div>
真白板标签
<span></span>
4、form input
5、select

</body>
</html>
posted @ 2018-03-27 22:16  Flynn丶傅  阅读(133)  评论(0编辑  收藏  举报