单标签
eg:注释标签: ctrl+/
1.容器盒子
<div class="box"></div>
2.换行标签:<br>
3.横线标签:<hr>
4. 标题标签:<h1> <h2><h3><h4><h5> <h6> 在页面中代表页面标题的层级和大小。
6.段落标签:<p></p> 在页面中代表段落标签,填充文字即可。
7.表示强调标签:<font> 文字</font>
8.属性: color:改变文字颜色
size:改文字大小属性
例如:<font color="pick" size="5">文字</font>
9.文本加粗显示:<strong></strong>或者 <b></b>
10.文字斜体显示: <em></em>或 <i></i>
11.下划线标签:<ins></ins>或者<u></u>
12.删除价格标签:<del></del>或者<s></s>
13. 图片标签:<img src=>
sec:设置一个图片要显示的路径
title:设置鼠标悬停图片显示的文字
alt:对图片描述 为方便引擎搜索
width:设置图片宽度
height :设置图片高度
14.没有语义的标签:
<div>页面内容 </div> 实现网页布局 div可包含任何标签
<span></span> 在网页布局中使用
15. 超链接标签:
<a herf="网站网址">百度</a>
<a href="http://www.baidu.com"><img sec="1.jpg"></a>
title:设置鼠标悬停到超链接的文字提示
target:-self
<base target="-blank">超链接跳转页面其他写法 在<head>页面写
16.锚链接
<div id=""路径位置>目标文字</div>
<a herf="l路径位置">目标</a>
17.meta标签用法
<meta charset="Utf-8"> 防止网页面乱码
charset:字符集
utf-8: 编码格式 (其他格式:gbk gb2312 big5)
eg:
<meta name="keywords" content"女装 男装 休闲"> 注意关键字是给搜索引擎看的搜索(网站推广)
<meta name="description " content"女装 男装 休闲"> 网页描述信息给搜索引擎看的搜索(网站推广)
18.网站重定向(网址指向另一个网页)
<meta http-equiv="refresh" content="3; 网址路径都可以http://www.baidu.com">3秒跳转百度
19.link 标签用法
设置网站图标 <link rei="icon" href="favicon.ico(小图片格式)" >(图标路径 )注意1 最好把图标放到根目录下, 方便寻找。
2.用处 引用外来样式表
20.列表分类
1.无序列表
<ul (type="square"改变圆点) >列表项如下
<li>吃</li>
<li> 玩</li>
<li>睡</li>
</ul>
注意:<li>列表内可以包含任何标签(图片 链接标签都可以)
2 有序列表
<ol type="A">
<li>开门 </li>
<li>放进去 </li>
<li>关门 </li>
</ol>
3.自定义列表
<dl>
<dt>标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
注意:dt标签只能包含行内元素
dd标签可以包含所有标签
一般网页结尾处用自定义列表
21.表格
作用:1.表格显示数据 2.网页布局
1.表格组成
表头 th
行 tr
列 td
表格 table
<table>
<tr> (第一行)
<td>姓名</td>
<td>年龄</td>
<td>职业</td>
</tr>
<tr> (第二行)
<td>小明</td>
</tr>
</table>
2.表格属性在<table>标签内:border: 设置边框 width 设置宽度 height 设置高度 cellspacing 设置td与td之间的距离 默认值为2
3.cellpadding 设置内容与td的左侧的距离 align: left center right 设置对齐方式 注意:1.如果给table标签设置align属性,只会
4.让标签居中 不会让内容居中,给td 或者tr设置align属性可以让其内容居中。
5.bgcolor:"pink"设置表格背景颜色 <th></th>设置表头加粗 用法和td相同 caption 设置标题 用法在table内
6.便捷写法: table>tr*4>td*4(创建表格 加中括号可设置属性)
7.表格结构 <thead></thead> <tbody></tbody> <tfoot></tfoot>
8.去掉单元:横向合并 <colspan=""> 竖向合并:<rowspan="">
22.表单
1 提示信息 2 表单控件 3 表单域
<legend></legend>表单外面的框框
23. 表单域 <from> </from> action:设置后台处理数据的后台程序 method:提交程序给后台的方式 get:提交数据 (将数据显示在地址栏中) post提交数据:通过后台提交数据 (安全性)
<from action="1.php" method="pdst">
用户名:<input type="text" name="username">
<br>
<br>
密码:<input type="password" name="pwd">
<br>
<br>
<input type ="sumbit">
<button class="submit">提交</button>
</from>
24.表单控件
1.文本输入框
<input type="text">
属性: maxlength="" 设置输入最大长度 readonly 设置控件为只读 disabled 禁止用户输入 value 设置默认值 name 设置控件名称 id 控件编号
2.密码输入框
<input type="password"> 该控件属性与文本输入框属性一样
3.单选控件
<input type="radio"> 注意:该控件实现单选效果需要给控件设置相同的name 名称
属性:checked 设置控件默认选中项
4.下拉列表
<select>
<option>河南</option>
<option>河北</option>
<option>山东</option>
</select> 属性:selected设置控件默认选中项
其他写法:
<select>
<optgroup label="河北省">
<option>邯郸</option>
<option>石家庄</option>
<option>保定</option>
</optgroup>
</select>
5.多选控件: <input type="checkbox"> 属性: checked 设置控件默认选中项
爱好: <input type="checkbox"checked > 看书or学习 orluyou旅游
6.inpu控件:
<input type="file">资源上传控件
<input type="search">自带删除功能 后标删除叉号
<input type="namber" value="60" min="" max=""> 数字设置最大值和最小值
<input type="range" value="60" min="" max=""> 设置范围
<input type="color">设置颜色
<input type="time">
<input type="date">
<input type="tel"> 在移动端实现弹出数字键盘\ required: 必须输入 如不阻止当前提交
关闭表单提示 autocomplete="off"
placeholder 输入框的文本占位符
文本域 <textarea></textrea>
隐藏控件:<input type="hidden"> value="123" 按钮
1. 提交按钮:<input type="submit">
2.普通按钮:<input type="button">不能提交表单数据
3. 重置按钮:<input type="reset">(将数据恢复单默认值)
4. 图片提交按钮:<input type="image" src="图片.jpg"> (提交表单数据)
24.<iframe> 标签 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
您可以把需要的文本放置在 <iframe> 和 </iframe> 之间 详情查看 https://www.w3school.com.cn/tags/tag_iframe.asp