目录
网页:它是由文字图片音频视频超链接等组成的,一个网站包含多个网页。
网站:实际生活中淘宝、京东、等都称作网站。
浏览器
常见的浏览器有IE Google等,创建的IE浏览器内核是trident ,Google浏览器内核是webkit
WEB标准
web标准主要分为结构(html)、样式(css)、行为(js),其中html主要是网页框架构建、样式主要是页面美化、行为主要是网页之间数据的交互。
HTML
html不是编程语言,它是超文本标记语言,
html标签主要分为嵌套和并列两种关系,标签分为单标签和双标签,
常见的双标签h1-h6、p等双标签是一个盒子,里面可以嵌套内容
创建的单标签有br(换行)、hr(水平线)
标题标签(h1 -h6) | 默认加粗、文字大小随着数字大小递减、独占一行,一般 h1建议在网页出现一次,h2出现两次,h3-h6可以出现多次 |
段落标签(p) | 里面可嵌套文字和图片 |
文本格式化标签 | 加粗 b 、strong 倾斜 em 、i 下划线 ins 、u 删除线 del 、s |
span | 行内元素,可以一行存放多个,设置宽高失效,上下边距失效,左右边距不失效 |
div | 块元素,独占一行,宽高可以设置,如果没有设置宽,默认是和父级元素宽相同 |
无序列表 :一个ul可以嵌套多个li,li里面可以嵌套任何标签
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
有序列表:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表:dt表示标题、dd表示要描述的内容、
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
路径:
主要分为相对路径和绝对路径;
相对路径
- 同级路径
- 下级路径(重点)
- 上级路径
绝对路径
- 在线网址
- 带有盘符的路径(不推荐)
表格(合并单元格)
border:表格边框线;cellpadding :表格内容与边框之间的空白处距离;
rules:表格细线;width:表格宽度;
<table border="1" cellpadding="10" rules="all" width="400">
<tr>
<td colspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2" rowspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
<td rowspan="3">4</td>
</tr>
<tr>
<!-- <td colspan="2">1</td> -->
<!-- <td>2</td> -->
<td>3</td>
<!-- <td>4</td> -->
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<!-- <td>4</td> -->
</tr>
</table>
其中合并单元格主要分为三个步骤;
- 先找到需要合并的单元格是跨行合并(从上到下)还是跨列合并(从左到右)跨行合并rowspan,跨列合并colspan
- 找到需要合并目标单元格的第一个格子,然后写属性=”属性值“;
- 删除多余格子
表单
表单主要用来手机用户信息
表单域,用来将表单收集的用户信息,提交到对应的位置,提示文本和表单控件必须要放在表单域中
表单控件主要分为input表单控件、下拉列表、文本域
input表单控件主要是通过修改input的type属性的取值不同,实现不同的功能比如:
文本框 type的取值为text
密码框 type得到取值为password
单选按钮 type取值为radio,想要实现单选效果需要设置相同的name属性取值
复选框 type的取值为checkbox ;默认选中用checked属性
常见属性
value:表单默认值,一般设置为空
placeholder:占位符,
name 给表单起名分类
maxlength最大长度
select下拉列表默认选中就用sellected;
<select name="" id="">
<option value="" selected>钱塘区</option>
<option value="">上城区</option>
<option value="">西湖区</option>
<option value="">滨江区</option>
</select>
textarea文本域
个人介绍:<br><br><textarea cols="30" rows="10" placeholder="请输入内容"></textarea><br>
按钮
input:button 普通按钮
input:submit 提交按钮
input:reset 重置按钮
input:file multile可以上传多个文件
input:image上传图片
<button> 普通按钮 <button>具有提交功能
<input type="submit" value="免费注册">
<input type="reset" value="重置">
案例
<h2>青春不常在,抓紧谈恋爱</h2>
<hr>
<form action="">
昵称:<input type="text" name="" id="" value="" placeholder="请输入用户名"><br><br>
性别:<input type="radio" name="sex" id="" checked>男
<input type="radio" name="sex" id="">女<br><br>
所在城市:<select name="" id="">
<!-- selected默认选中 -->
<option value="" selected>上海</option>
<option value="">北京</option>
<option value="">南京</option>
<option value="">杭州</option>
</select>
<select name="" id="">
<option value="" selected>钱塘区</option>
<option value="">上城区</option>
<option value="">西湖区</option>
<option value="">滨江区</option>
</select>
<br><br>
婚姻状况:<input type="radio" name="marry" id="" checked>未婚
<input type="radio" name="marry" id="">已婚
<input type="radio" name="marry" id="">保密<br><br>
喜欢的类型: <input type="checkbox" name="" id="" checked>可爱
<input type="checkbox" name="" id="" checked>性感
<input type="checkbox" name="" id="">御姐
<input type="checkbox" name="" id="">萝莉
<input type="checkbox" name="" id="">小鲜肉
<input type="checkbox" name="" id="">大叔<br><br>
个人介绍:<br><br><textarea cols="30" rows="10" placeholder="请输入内容"></textarea><br>
<h3> 我承诺</h3>
<ul>
<li>年满18岁,单身</li>
<li>抱着严谨的态度</li>
<li>真诚寻找另一半</li>
</ul>
<div><input type="checkbox" name="" id="">我同意所有的条款</div><br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<br><br><br>
</form>
效果图