新建html文件
<!DOCTYPE html>
<!--以最新规范解析-->
<!--标签可以嵌套,但是不可以交叉嵌套,属性可以加在开始标签内<h1 id="xiaofeng">用于定位-->
<html lang="en">
<head>
<!--页面看不到的东西-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="网页描述内容">
<!--keywords中的内容便于搜索引擎机器人查找信息和分类信息。description是网页描述-->
<meta charset="UTF-8">
<!--字符编码-->
<!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">-->
<!--两秒后自动跳转到该网页-->
<!--<meta http-equiv="Refresh" content="2">-->
<!--不加url就是刷新-->
<meta http-equiv="content-Type" charset=UTF8">
<!--编码方式-->
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
<!--兼容到ie7-->
<title>zxy</title>
<link rel="icon" href="girl.ico">
<!--在title前加一个图标-->
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
<style>
div{
color:red;
background-color:yellow;
}
span{
color:green;
background-color:grey;
}
<!--井号表示id-->
#div1{
height: 500px;
background-color: #cc3399;
}
#div2{
height: 500px;
background-color: yellow;
}
#div3{
height: 500px;
background-color:blue;
}
</style>
<!--设置格式等-->
</head>
<body>
hello world
<!--head标签h,设置标题。n的取值范围是1~6,数字越大字体越小,也可以在css文件中自己设定-->
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
<!--自闭合标签 水平线-->
<hr>
<hr/>
<!--段落标签。隔行,包裹的内容被换行。-->
<p>床前明月光</p><p>疑似地上霜</p>
<!--换行标签break-->
床前明月光
<br>疑似地上霜<br/>
<!--加粗标签<b><strong>-->
<b>举头望明月</b>
<strong>举头望明月</strong>
<!--为文字加上一条中线-->
<strike>低头思故乡</strike>
<del>低头思故乡</del>>
<!--文字变成斜体-->
<em>低头思故乡</em>
<!--上标和下标-->
<sup>低头思故乡</sup>
<sub>低头思故乡</sub>
<!--div标签是块级标签,可以自行处理格式-->
<!--div标签独自占用一行,其他文字会换行-->
<div style="color:red">hello world</div>
<!--或者将css文件写入头标签中-->
hello<div>hello world</div>
<!--内联标签,不换行,直接显示在hello后面-->
hello<span>hello</span>
<!--块级标签,换行：<p><hn><table><ol><ul><form><div>-->
<!--内联标签,不换行：<a><input><img><sub><sup><textarea><b><em><span>-->
<!--一个 代表一个空格-->
hello world
<!--版权符号c-->
©
<!--界面显示<h1>,否则会默认为标签-->
<h1>
<!--img是内联标签,未加载出来显示加载失败,鼠标悬浮显示ns,单开线程加载-->
<img src="1.jpg" width="200px" height="200px" alt="加载失败" title="ns">
<!--超链接标签<a>-->
<!--在当前页面进行跳转,其他标签加不跳转-->
<a href="http://www.baidu.com">百度</a>
<!--打开新的界面-->
<a href="http://www.baidu.com" target="blank">百度</a>
<!--锚标签 在本界面进行跳转-->
<div id="div_top">top</div>
<a href="#div1">第一章</a>
<a href="#div2">第二章</a>
<a href="#div3">第三章</a>
<div id="div1">第一章</div><a href="#div_top">返回</a>
<div id="div2">第二章</div><a href="#div_top">返回</a>
<div id="div3">第三章</div><a href="#div_top">返回</a>
<a href="#div_top">test</a>
<!--unordered list 无序列表 前面是点-->
<ul>
<li>111</li>
<li>111</li>
</ul>
<!--unordered list 无序列表 前面是数字-->
<ol>
<li>222</li>
<li>222</li>
</ol>
<!--dl定义列表,dt标题,dd列表项-->
<dl>
<dt>第一章</dt>
<dd>111</dd>
<dd>111</dd>
<dt>第二章</dt>
<dd>111</dd>
<dd>111</dd>
</dl>
<!--border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽）-->
<!--<tr>: table row <th>: table head cell <td>: table data cell <th>: table header <tbody>(不常用): 为表格进行分区.-->
<!--rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）-->
<table border="1" cellpadding="10px" cellspacing="0px">
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
</table>
<table border="1">
<tr>
<th id="th1">标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td colspan="2">内容1</td>
<!--占两列-->
<td rowspan="2">内容3</td>
<!--占两行-->
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
<!--form表单用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含textarea、select、fieldset和label元素。-->
<!--action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理,比如https://www.sogou.com/web-->
<!--method: 表单的提交方式 post/get 默认取值就是get-->
<!--get: 1.提交的键值对放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.-->
<!--post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.-->
<form action="127.0.0.1:8090/index" method="get" enctype="multipart/form-data">
<p>姓名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<!--按键上显示的值通过value设定,button需要配合js(事件处理)使用才有意义-->
<p><input type="button" value="press"></p>
<!--复选框,当两个都选中的话,服务器端收到一个列表[100,101]-->
<p>爱好：篮球<input type="checkbox" name="hobby" value="100" ></p>
<p>乒乓球<input type="checkbox" name="hobby" value="101"></p>
<!--单选框,name相同时才是一组单选框,name属性是和服务器通信时使用的名称-->
<p>男<input type="radio" name="sex" value="0"></p>
<p>女<input type="radio" name="sex" value="1"></p>
<!--上传文件-->
<p><input type="file" name="zz"></p>
</form>
<!--<select>下拉选标签属性 name:表单提交项的键。multiple 可以多选。size：最多显示个数，剩余在滚动条里<option>下拉选中的每一项。value:表单提交项的值。selected:selected下拉选默认被选中。<optgroup>为每一项加上分组-->
居住地
<select multiple="multiple" name="city" multiple="multiple" size="4">
<optgroup label="河北">
<!--标签类似标题-->
<option value="langfang">廊坊</option>
</optgroup>
<optgroup label="北京">
<option value="beijing" selected>北京</option>
</optgroup>
</select>
<!--<textarea>文本域 name:表单提交项的键。cols:文本域默认有多少列。rows:文本域默认有多少行-->
<textarea rows="10"cols="20">自我简介</textarea>
<!--<label>标签关联。点击爱时也会在checkbox中打钩-->
<label for="www">爱</label>
<input id="www" type="checkbox">
<!--<fieldset>-->
<fieldset>
<legend>登录</legend>
<input type="text">
</fieldset>
<p><input type="reset" value="重置"></p>
<p><input type="submit" value="提交"></p>
</body>
</html>
4708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
