山东标梵HTML基础笔记 / 开普饭

C/S与B/S

C/S 用户本地有客户端程序、远程有服务端

如：QQ、迅雷

优点：

缺点：开发、安装、部署、维护、都麻烦

B/S 用户通过URL浏览器访问，访问不同的服务器端程序

优点：开发、安装、部署、维护、都简单

缺点：对硬件要求高，应用过大，用户体验会受到影响

B/S架构详情：

1、静态资源

静态网页开发

特点*用户访问，得到的结果一致，如文本、图片、音频视频、HTML、CSS、JS（静态资源）

用户请求静态资源，服务器直接将静态资源发送给浏览器，浏览器内置解析引慬，可展示静态资源

HTML:用于搭建网页，展示内容

CSS：美化、布局页面

JavaScript:控制页面元素，让页面有动态效果

2、动态资源

使用动态网页及时发布的资源

特点：所有用户访问的结果可能不一致，如jsp/servlet,php,asp...

用户请求动态资源，服务器执行动态资源，转换为静态资源，再发送给浏览器

HTML(Hyper Text Markup Lanuage超文本标记语言)

HTML

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

是标记语言，语法吧hi严格，不会报错

标签学习

1、文件标签

*html 根标签

*head 头标签，指定html的一些属性

*title

*body 体标签

* <!DOCTYPE> 文档类型

2、文本标签

*注释：

*<h1><h6>按级别缩小标题大小

*<br>换行

*<p></p>段落标签

*<hr>展示一条水平线

属性：color：颜色 width:宽度 size:高度

aligh:对齐方式（center居中；left：左对齐；right：右对齐）

*<b>加粗

*<i>字体斜体

*<center>文本居中

*<font>字体标签大小，型号，楷体 color颜色；size大小；face字体

*属性定义：color 1、red\green\blue 2、rgb(值1，值2，值3)：值范围0~255，eg:rgb(0,0,255)

3、#值1值2值3：00~FF（16进制） eg:#FF00FF

width 1、数值：width="20"数值单位是像素

2、数值%：占比相对于父元素的比例

3、图片标签

img展示图片

相对路径* ./代表当前目录 ../ 上一级目录

4、列表标签

有序列表

*ol

*li

无序列表

*ul

*li

5、链接标签

* a 定义了一个超链接

属性：href :指定URL

target:指定打开资源的方式，_self:默认值，在当前页面打开 _blank:在空白页面打开

6、表格标签

*table 定义一个表格《width宽度；border边框；cellpadding定义单元格与内容的距离；cellspacing单元格间句丽，指定为0，则单元格线合二为一;bgcolour:背景色；align:对齐方式》；

*tr定义一行；属性bgcolour;align

*td定义单元格；属性colspan合并行；rowspan合并列

*th定义表头单元格

*<caption>表格

*<thead><tbody><tfoot>

7、div与span;header;footer

<span></span>起包裹作用与css一起用，文本信息在一行展示，不会换行 <div></div>起包裹作用，与css一起用，文本信息一行展示，会自动换行。

<header></header> <footer></footer>语义化标签

8、表单标签

表单：采集用户输入数据，与服务器进行交互

* form标签

action:指定提交数据的URL

method:提交方式，一共7种

get:请求参数会在地址栏中出现，封装在请求行；请求参数长度有限制；不太安全

post:请求参数不出现在地址栏，必须指定name属性；请求参数长度没有限制；较为安全

表单标签

*input:通过type属性值，改变元素展示样式

*type属性：

*text:文本输入框，默认值

*placeholder:指定输入框提示信息，当输入框的内容发生变化，自动清空提示信息

*password:密码输入框

*radio:单选框

*注意：要想多个单选框实现单选效果，则多个单选框的name属性值必须一样

给每一个单选框提供value属性，指定其被选后提交的值

checked属性，指定默认值

*checkbox:复选框

*注意：一般会给每一个单选框提供value值，指定其被选后提交的值

checked属性，可以指定默认值

*file：文件选择框

*hidden:隐藏域，用于提交一些信息

*按钮：* submit:提交按钮，提交表单

*button:普通按钮

*image：图片提交按钮 src指定图片的路径

*label:指定输入项的文字描述信息

*注意：

*label的for属性一般会和input的id属性值对应。对应了，则点击label区域，会让input输入框获取焦点。

用户名：<input type="text" name="usename" placeholder="请输入用户名"><br>

密码：<input type="password" name="password" placeholder="请输入密码"><br>

性别：<input type="radio" name="gender" value="male" checked>男

爱好：<input type="checkbox" name="hobby" value="shopping">购物

<input type="checkbox" name="hobby" value="Java">JAVA

<input type="checkbox" name="hobby" value="python">python<br>

图片：<input type="file" name="file" value="file"><br>

隐藏域：<input type="hidden" name="id" value="隐藏提交信息"><br>

取色器：<input type="color" name="colour" value=""><br>

生日：<input type="data" name="birthday" value=""><br>

邮箱：<input type="email" name="email地址"><br>

年龄：<input type="number" name="ege"><br>

省份：<select name="province" value="">

</select><br>

自我描述：<textarea cols="20" rows="5"></textarea><br>

</form>

*select:下拉列表

*option,指定列表项

*textarea:文本域

注册页面

<!DOCTYPE html>

<head>

<style>

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

body{

background: url("../images/bd.jpg") no-repeat center;

}

.rg_layout{

width: 900px;

height: 500px;

border:8px solid #EEEEEE;

background-color:white;

margin: auto;

margin-top: 15px;

}

.rg_left{

/*border: 1px solid red ;*/

float: left;

margin: 20px;

}

.rg_left > p:first-child{

color: #FFD026;

font-size:20PX;

}

.rg_left > p:last-child{

color: #A6A6A6;

font-size: 20px;

}

.rg_center{

/*border: 4px solid red;*/

float: left;

margin: 5px;

width: 200px;

}

.rg_right{

/*border: 1px solid red;*/

float: right;

margin: 10px;

}

.rg_right > p:last-child{

font-size: 15px;

}

.rg_right p a{

color:blue;

font-size: 15px;

}

.td_left{

width: 100px;

text-align: right;

height: 45px;

}

.td_right{

padding-left: 20px;

}

#usename,#password,#email,#name,#tel,#birthday,#checkcode{

width: 250px;

height: 32px;

border: 1px solid #A6A6A6;

border-radius: 5px;

padding-left: 10px;

}

#checkcode{

width: 100px;

}

#btn_sub{

width:100px;

height: 40px;

background-color: #FFD026;

border:2px solid #FFD026;

}

</style>

</head>

<body>

<p>新用户注册</p>

<p>USER REGISTER</p>

</div>

<tr>

</tr>

<tr>

</tr>

<td class="td_left"><label for="email">Email</label></td>

<tr>

</tr>

<tr>

</tr>

<tr>

<input type="radio" name="gender" value="male" id="gender">男

<input type="radio" name="gender" value="female" id="gender">女

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</div>

</body>

</html>

文章编辑:标梵互动(https://www.biaofun.com/)

山东标梵HTML基础笔记

相关推荐