web小结~2019.3.24

web简介:万维网(world wide web)是一个有相互连接的超文本组成的系统,通过互联网访问
URL(uniform resource locator 统一资源定位符)
    组成部分:协议、服务期地址(域名)、资源路径
网络应用程序框架:
    B/S框架(browser/server)
        通过浏览器访问网络程序
    C/S架构(browser/server)
        通过客户端应用软件访问网路程序
互联网的发展:
    信息共享、信息共建、随时在线、物联网(互联网+)

网页浏览过程:
1、通过输入网址(URL)指定要访问的网页
2、请求:把XXX网页文件传送给我
3、响应:把XXX网页文件传送给你
4、浏览器“解释”网页文件,呈现出网页

网页文件:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页文件</title>
    </head>
    <body>
        <h1>2019.3..24对之前学的web进行复习</h1>
    </body>
</html>
网页文件:
    浏览器中看到的网页实质为:网页文件
    网页文件:
        文本文件
        扩展名为.html或.htm
        文件内容为HTML代码和文本内容
HTML简介:超文本标记语言
HTML不是一种编程语言,而是一种标记语言。标记语言是一套标记语言。标记语言是一套标签
,HTML 使用标签来描述网页

HTML语言三要素:
    词汇(标签)、语法(标签的使用规定)、语义(浏览器“理解”的标签的含义)
HTML标记标签通常被当成HTML标签,它是由尖括号包围的关键词,如<html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>demo</title>
    </head>
    <body>
        <h1>你好!</h1>
    </body>
</html>

<meta/> 定义页面有关信息,如页面编码、关键词、页面描述
    单标签,必须在head标签内、利用属性值进行设置

标签分类:
    双标签:由“开始标签“和”结束标签”两部分组分组成。结束标签比开始标签
多了一个“/”,必须成对使用
    单标签:在开始标签中进行关闭,即以开始标签的结束而结束(比如<meta/>)
为什么HTML语言设计出单双两种标签:
    双标签:代表标签作用范围
    单标签:无需表达范围,仅在标签出现有效

标签与标签之间可以是嵌套的,但先后书序必须保持一致
HTML标签对大小写不敏感,但建议同一规范小写

<body>标签的额可选属性
bgcolor    颜色名称    规定文档的背景颜色
text    颜色名称    规定文档中所有文本的颜色

标题标签
<h1></h1>    h1~h6

段落标签:
段落——网页中显示一段文字
<p>.....</p>

图片标签——网页中显示一张图片
<img src="" alt=“”/>
src:指明存储图像的位置
alt:为图片添加替换文本
绝对路径:
    本机绝对路径:从盘符开始的完整路径
    网络绝对路径:网络可访问地址
相对路径:
先对路径是指先对当前文件或目录的路径
先对路径规则:
    1、图片和网页在同级目录    src="./图片名"
    2、图片在网页的下一级目录    Src="目录名称/图片名"
    3、图片在网页的上一级目录     src="../图片名"
优点:文件夹被移动,其内部文件的相对路径不变
注意事项:
    1、不要使用本机绝对路径,推荐使用相对路径
    2、图片文件单独存放在一个文件夹中
    3、图片文件夹与页面文件放在同一个目录下

超链接
超链接——从一个网页指向一个目标的而连接关系
<a href="链接目标">链接对象</a>
属性:
href:规定链接目标
target:在何处打开目标
    _blank:在新窗口打开
    _self:在当前窗口打开(默认)

列表
无序列表:是一个没有前后顺序的信息列表
有序列表:是一个有前后顺序的信息列表
无序列表
无序列表使用<ul>标签,每个列表使用<li>标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等
有序列表
有序列表使用<ol>标签。每个列表项使用<li>标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等


表格
表格代码:
、、
<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>李思</td>
        <td>21</td>
        <td>100</td>
    </tr>
    <tr>
        <td>李思白</td>
        <td>20</td>
        <td>100</td>
    </tr>
    <tr>
        <td>李白</td>
        <td>10</td>
        <td>59</td>
    </tr>
</table>
</body>

<th></th> 
语法:
1. 成对出现              
 2. 嵌套于<tr></tr>标签内 
语义:定义“表头”(特殊的单元格) 

<td></td> 
语法:
1. 成对出现               
2. 嵌套于<tr></tr>标签内 
语义:定义表格中的“一个单元格

表格相关的属性:
border:表格表框的额宽度(pixels)
bordercolor:表格边框的颜色
background:表格背景图
bgcolor:表格背景颜色
cellpadding:单元便沿与其内容之间的距离
cellspacing:单元格之间的空白

width:规定表格元素的宽度(pixels或%)
height:规定表格元素的额高度(pixels或%)
align:表格的对齐方式(left center right)

单元格合并
——跨列
rowspan="几列"
——跨行
border="几行"


表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入信息的元素(文本框、
下拉列表、单选框、复选框等等);其作用是从访问网站的而用户哪里获得信息,是用户
向服务器除数数据接口

表单标签
<form></form>
语法:1、成对出现
          2、表单的开始和结束位置
语义:定义一个表单
相关属性:
    action:规定向何处发送提交表单数据。
    method:规定以何种方式将表单数据传送ado服务器
所有表单控件都必须放到<form></form>标签之间,
否则用户输入的信息无法提交到服务器

文本框
当用户要在表单中键入字母、数字的内容时,就会用到文本框
<form>
    <input type="text" name="名称" value="文本"/>
</form>
    1、type:当type=“text”,输入框为文本输入框
    2、name:为输入框命名,以备后台程序使用
    3、value:为输入框设置默认值。(一般起到提示作用)

密码框
<input type="password" name="名称" value="文本"/>

选择框
单选框:radio
<form>
    <input type="radio" value="Male" name="sex" checked/>男
    <input type="radio" value="Female" name="sex">女
</form>
复选框:checkbox  (同组复选框name属性值需要一致)

    2、value:提交数据到服务器的值
    3、name=为控件命名
    4、checked:当添加checked时,该选项默认选中

文件控件:
    当type属性值为file时,用于文件上传
<form>
    <input type="file" name="files"/>
</form>

按钮
    提交按钮:type="submit"    提交表单到服务器
    重置按钮:type="reset"     重置表单信息至初始状态
    普通按钮:type="button"
多行文本域
<textarea></textarea>
相关属性:
    rows:规定文本区内可见行数
    cols:规定文本区内可见列数
<form>
    <textarea name="cat" rows="3" cols="3">
    
    </textarea>
</form>


<select>标签
下拉列表
标签:<select></select>
列表项:<option></option>
<form>
    <select name="class">
        <option value="one" selected>软件一班</option>
        <option value="two" selected>软件二班</option>
    </select>
</form>

posted on 2019-03-24 16:40  redOrange01  阅读(114)  评论(0编辑  收藏  举报