程序博客网 > 淘宝女装2017夏装新款

web第一课

来源：互联网 发布：淘宝女装2017夏装新款 编辑：程序博客网 时间：2024/05/17 08:01
学习过程htm-----css-----js+两个框架
cs架构 客户机到服务器的计算模式
bs架构 浏览器到服务器计算模式 优点 访问方便，，数据放置在服务器，
缺点 访问量特别大 容易崩溃
常用的 Web服务器： 使用第一的Apache
Jboss :Web sercies容器. ejb的容器
Tomcat ：开源免费的一个服务器，apache的一个基金会项目
IIs：Internet 信息服务微软主推的服务器
webLogic:开发管理部署一些大型的web应用，分布式的服务器。
等等
FireFox浏览器 要下载
FireBug 要下载
网页文件 html文件后缀
1什么是html： 本质上是一种描述网页的语言，
html超文本标记语言 全称 Hypertext markup language
html属于标记语言，不属于编程语言。 还有xml语言
html文档也称为网页。
2.html标签含义
第一个标签是开始标签，第二个标签是结束标签，不是所有的标签都需要结束，自动开闭标签，
html注意格式规定，必须成套出现。
html标签最好区分大小写 ，也就是标签对应大小 写名字要一样！

A <!DOCTYPE HTML>
B <html>
C <head>
D <title>show myfirst web</title>
E <meta charset="utf-8">
F <head>
G <body>
H <p>this is my frist web pro</p>
I </body>
J </html>

A html标签的含义
1申明网页的版本以及网页应该遵循的规范，有助于浏览器正确显示网页 并且向浏览器声明他是采用严谨模式 要有开闭
2网络上有各种不同类型的文件，浏览器都应该正确的打开，如果正确声明html，那浏览器解析就更加准确
3doctype 不区分大小写！
D 两个标签之间是标题名
E mata 含义
mata不需要闭合的标签，提供html的元素，元素不是显示踹，只会被浏览器解析！
meta标签除了设置编码集以外，还可以设置网页的关键字，网友的描述信息，作者的信息！
G 两个body标签中放 相当于java中的类里面的内容
body里面设置 标签 它的文字大小 h1-h6
h1显示最大文字 h6 最小文字
<h1>内容</h1>
注释 <!-- 内容-->
段落标签
<p id="p1"这个p1是唯一的不允许重名>内容</p>
超链接
<a href="#"这个#号代表跳转到本页>标签内容</a>
通过a标签设置锚点需要两个a标签一个a标签设置name属性一个a标签跳转到当前name属性对应的值
例
<h1><a name="cc"设置a标签名字 style="color: red; 设置颜色">标签显示的内容,</a></h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1看你需要设置的字体大小><a href="#cc"表示回到本页的cc处>回到h1处</a></h1>
标签显示图片 ../代表回到上一级目录
<img src="绝对路径 文件名/图片全名" width（宽）="200px" heigth（高）="200px" title=提示内容"xx" alt="这是桌面图片"/>
<img src=../(这个../代表回到上一级目录)>
换行标签
</br>自开闭 例如
<p>xxxx</br> xxasdasdsads</p>
空格 &nbsp;
<p>xxxx&nbsp</br> xxasdasdsads</p> xxxx后面会空一格
分割线
<hr width="100px"/>
缩写
<abbr>
<abbr title="中啊实打实的">zg</abbr> zg缩写 显示zg 当鼠标放到zg位置时会自动显示全1称
粗体
优先选择 strong
<strong> this is strong element</strong>
斜体
<em > today is a good day</em>
设置内容显示顺序
<bdo dir="rtl">大飒飒是是是 </bdo>
i标签

特别用法
<p> 跳楼价来了不要<del>998</del>只要<ins>298</ins>/p>
显示结果
<pre>
3
+
2
=
5
</pre>
显示结果


Html表单
表单是一个包含表单元素的区域
表单元素是允许用户在表单中（例如文本域 下拉单列 单选框 复选框 等等）输入信息的元素

<inputtype="text"maxlength="6"placeholder="密码" valus="小王">
placeholder 效果
values 代表默认

在制作表格中 有如下关键字
tr td border thead tbody tfoot
第一种
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body><!--border代表边框的风格-->
<tableborder="1"><!--第一种表格的书写形式 缺点多 只是能够构造一个表格而已-->
<tr>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>

<td>wade</td>
<td>男</td>
<td>45</td>
</tr>
<tr>
<td>james</td>
<td>男</td>
<td>32</td>
</tr>
<tr>
<td>kobe</td>
<td>男</td>
<td>38</td>
</tr>
</table>
第二种
<!--thead tbody tfoot语义化标签：有利于搜索引擎查询。可以快速定位内容-->
<tableborder="1"><!--第二种表格-->
<thead><!--头 -->
<tr>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<!--tr代表行 td代表列-->


<tbodyid="tb"><!--身体-->
<tr>

<td>wade</td>
<td>男</td>
<td>45</td>
</tr>
<tr>
<td>james</td>
<td>男</td>
<td>32</td>
</tr>
<tr>
<td>kobe</td>
<td>男</td>
<td>38</td>
</tr>
</tbody>


<tfoot><!--尾部-->
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</tfoot>
</table>
第三种表格
<tableborder="1"><!--第三种表格-->
<thead>
<tr>
<th>名字</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbodyid="tb1">
<tr>

<td>wade</td>
<td>男</td>
<td>45</td>
</tr>
<tr>
<td>james</td>
<td>男</td>
<td>32</td>
</tr>
<tr>
<td>kobe</td>
<td>男</td>
<td>38</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</tfoot>
</table>
第四种
<tableborder="1"><!--第四种表格-->
<colgroup>
<colstyle="background-color:red"span="1">
<!-- <col style="background-color: green">-->
<colstyle="background-color:pink">
<colstyle="background-color:pink">

</colgroup>
<tr>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>

<tdcolspan="3">wade</td><!--colspan代表合并多少列 总共三列 下面的要注释不然会自动向外填充 -->
<!-- <td>男</td>-->
<!-- <td>45</td>-->
</tr>
<tr>
<tdrowspan="2">jkobe</td><!--rowpan代表合并多少行-->
<td>男</td>
<td>32</td>
</tr>
<tr>
<!-- <td>kobe</td>-->
<td>男</td>
<td>38</td>
</tr>
</table>


</body>
</html>

结果如下
action表示要提交的服务器地址 method表示提交方式
<form action="" method="get">
<input type="submit">
</form>
布局标签
布局用div标签，表示一个区域快，本身没有任何宽和高
<div style="width:960px;height:50px;backgroud:antiquewhite>xxx</div>
<div >456</div>
div可以嵌套，，，，
span可以显示内容 也可以 用来布局
<span style="disply" :block;width:200px;heigth :200px;backgroud-color :#f0ff85></span>
0 0
淘宝女装2017夏装新款 淘宝女装2017夏装新款
原创粉丝点击
热门IT博客
tomcat 默认端口tomcat 默认端口
黑马php就业版百度云黑马php就业版百度云
linux mac
python免费吗
京东 大数据研发部
mac如何连接校园网
电子商务网站源码下载
淘宝网冬季羊毛大衣
剑网三刘亦菲捏脸数据
中国人民大网络教育
mb雪崩能天使淘宝网
淘宝产品拍摄要求
淘宝省钱小助手
关于人工智能
微分方程 知乎
佳能打印机驱动mac版
python升级到2.7 pip
内裤品牌 纯棉 知乎
js遍历json数组 的key
东莞seo外包
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 科学图画书 汉声数学图画书 绘本图画书 图画书图片 图画书的英文 关于书的图画 自制图书一本绘画 幼儿书籍推荐 李伯清书场 阿陈书场 谈天音书场 李伯清书场全集 苏州电视书场 58书城 世纪书城 书城网站 一世书城手机网站 京东网书城 去看书网免费看书 我的书城网手机版 123言情网 言情123 123言情手机版 网上商店 新华书店网上书店 堂山 梵山堂 堂山兄弟 正堂山外山 容山堂 白云山敬修堂 怀山堂铁棍山药 堂山男孩可乐云 书墨聚 夹刘海的夹子 小夹子 夹核桃的夹子 木头夹子 书夹子 书夹子图片 中小学生书夹板

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里