一.html
HTML 指的是超文本标记语言
html的结构 ： （1）整体结构 ： 输入html5 会自动书写
DOCTYPE: 文档声明
html 整体html标签
charset ： 编码格式
title ： 标题
body： 所有需要显示的内容写在这里
快捷键
html5 输入html:5自动生成格式
div*3（标签名 * 数字） 生成多个标签
CTRL + / 快速注释
标签
标签的结构
2种标签
第一种双标签
<标签名> </标签名>
第二种 单标签
<标签名 />
<标签名 > 不推荐
标签属性
<标签名 属性1=属性值1 属性2=属性值2 属性3=属性值3 />
<标签名 属性1=属性值1 属性2=属性值2 属性3=属性值3 > </标签名>
img标签
img标签（显示图片的标签） 特殊标签 1 .单标签
2.通过一个 src 属性显示图片的地址 : 本地地址 ： （1）相对地址： 相对于运行文件的地址，同一级就是./ 上一级就是 ../ (2)绝对地址 ：
-
alt 属性 ： 如果图片没有加载成功就会显示alt里的内容 鼠标移入到图片上的时候会显示的文字 5.宽度 ： width属性 6.高度 ： height属性 特殊标签 多个标签会水平排列 ，中间会有间隔 ，这个间隔就是换行导致的；
<div
class="mydiv"
id="divid"
>1111</div>
<div>2222</div>
<div>3333</div>
<img alt="图片加载失败" src="./imgs/1t.png" title="我是标题" width="200" height="200" /><img width="200" src="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/2101/25/c1/251135935_1611532823091_mthumb.jpg" title="我是蝴蝶" />
其他标签
一、标题标签 大标签
h1 -- h6 二、段落标签 大标签 p 标签
三、 span内容标签 小标签 ： span 小标签特性 ： 不会独占一行 ，不能设置宽和高 ，横着排列；
四、斜体标签 小标签 ：
i 标签 em标签
五、加粗字体 小标签 ：
b标签 strong标签
六、换行标签<br/>
七、划线标签 <hr/> 下划线、水平线、换行符 u hr br
八、转义标签
1.空格转义字符
2.> >
3.< <
嵌套的原则 ： 1.同级标签之间可以相互嵌套 2.大标签可以嵌套 小标签和特殊标签 大标签 ： div h1-h6 p 小标签：i/em stronge b hr br span ... 特殊标签 ： img
标签的嵌套
标签和标签之间的关系 ？ 1.并列关系 ,兄弟关系 ，姊妹关系 同级关系 2.嵌套关系
嵌套的原则 ： 1.同级标签之间可以相互嵌套 2.大标签可以嵌套 小标签和特殊标签
大标签 ： div h1-h6 p
小标签：i/em stronge b hr br span ...
特殊标签 ： img
列表
二、列表
1.有序列表 ol li
<ol type="A">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ol>
2.无序列表
ul li
<ul>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ul>
3.自定义列表
dl dt dd
<dl>
<dt>标题</dt>
<dd>内容一</dd>
<dd>内容二</dd>
<dd>内容三</dd>
</dl>
在style中
list-style-type 和 list-style 是一样的
circle: 空圆形样式
square:方型样式
none: 不需要默认的样式
table表格
table（表格）标签 ： 在html里实现表格的 ；
每一行是tr ，列 是td .
border属性添加边框
cellspacing="0" 设置表格边框之间的间隔
cellpadding="10" 设置表格内容的间距 （内容与边框的上下左右加上了10px） align="left/center/right"//对齐方式
合并行 rowspan 合并行 ，参数是几行
合并列 colspan 合并列 bordercolor="red" 设置表格的边框颜色
thead 里写表格头信息 通过 th 来写表头；
tbody里是写表格内容{通过Thead 和tbody写的表格表格头无法做合并行列的操作， 通常直接采用tr td列表}
<table width="800" height="500" border="1" bordercolor="red" cellspacing="0" cellpadding="50" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th width="200" align="left">性别</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">1-1</td>
<td>1-2</td>
<!-- <td>1-3</td> -->
</tr>
<tr>
<td>2-1</td>
<!-- <td>2-2</td> -->
<!-- <td>2-3</td> -->
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
<h1 align="center">项目增补单</h1>
<table width="750" border="1" cellspacing="0" align="center" height="360">
<tr align="center" height="28">
<td>序号</td>
<td width="246">维护项目及更换配件</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>工时费</td>
<td>合计</td>
<td width="190">故障原因</td>
</tr>
<tr align="center">
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td rowspan="4">7</td>
<td height="34" ></td>
<td colspan="2" rowspan="4"></td>
<td></td>
<td></td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr align="center">
<td></td>
<td height="34" ></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td height="34"></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td height="34"></td>
<td></td>
<td></td>
</tr>
<tr align="left">
<td colspan="2"> 备件费用小计：</td>
<td height="34" colspan="5"> 工时费用小计：</td>
<td>合计：</td>
</tr>
</table>
<p align="center">班组长： 技术部： 服务顾问： 客户确认： </p>
a链接
a链接 ：可以链接到其他地址
href属性 可以给地址，点击a链接的时候会跳转到该地址；
title属性 ：鼠标移入的时候显示
target 属性 _blank 可以新开一个窗口打开页面
<a href="http://www.baidu.com" title="跳转到百度" target="_blank">点击我跳转到百度</a>
<a href="#" title="跳转到百度">不想让a链接跳转</a>
//href="#" 时 a标签不会跳转
<a href="javascript:;" title="跳转到百度">不想让a链接跳转</a>
//A标签可以执行js代码，javascript:; 里没有js所以A标签不跳转
<a href="./table.html">点击我跳转到table页面</a>
//给的一个相对地址，table.html里要写 <a href="a链接.html">点击我到table页面</a>
form表单
form属性
<form action="" method="get"></form>
■ action = '接口地址'
■ method = 'get / post'
■ name = '表单名称'
- input标签属性
- type = '控件类型'
<input type="text" />
○ input标签属性
■ type = '控件类型'
■ name：属性标识表单域的名称；
■ Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。
■ maxlength：控制最多输入的字符数
action 提交的地址 input框是输入框 单标签
-
1）文本框
-
<input type="text" value="默认值"/>
-
2)密码框
-
<input type="password" />
-
3)提交按钮
-
<input type="submit" value="按钮内容" />
-
4)重置按钮
-
<input type="reset" value="按钮内容" />
-
5)空按钮
-
<input type="button" value="按钮内容" />
-
6）默认文本
-
<input type="text" placeholder="输入文本" />
姓名： <input type="text" name="uname" maxlength="6" /><br/>
性别： <input type="radio" name="sex"> 男 <input name="sex" type="radio"> 女<br/>
//radio类型选择，name相同的两个选项只能选择一个
form action="" method="get">
姓名： <input type="text" name="uname" maxlength="6" /><br/>
性别： <input type="radio" name="sex"> 男 <input name="sex" type="radio"> 女<br/>
//radio类型选择，name相同的两个选项只能选择一个
爱好： <input type="checkbox"> 篮球 <input type="checkbox"> 足球 <input type="checkbox"> 乒乓球<br/>
//checkbox勾选类型
城市 ： <select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">武汉</option>
</select><br/>
密码： <input type="password"><br/>
<input type="button" value="提交1">
<input type="submit" value="提交2">
<input type="reset" value="重置">
</form>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
