HTML-新手入门
HTML系统结构
（1）
B/S架构：Browser / Server （浏览器/服务器的交互形式）
Browser支持哪些语言：HTML、CSS、 JavaScript
B/S架构的优缺点：
优点：升级方便，只升级服务器端代码即可。维护成本低
缺点：速度慢、体验不好、界面不炫酷
常见系统：京东、百度、天猫
（2）
C/S架构：Client / Server （客户端/服务器端的交互形式）
C/S架构的优缺点：
优点：速度快，体验好，界面炫酷
缺点：升级麻烦，维护成本较高
常见系统：QQ、微信、支付宝
**
HTML语法结构
HTML：Hyper Text Markup Language （超文本标记语言）
<标签><标签 属性名="属性值" 属性名="属性值"> （结束标签）超文本: 流媒体、图片、声音、视频....
**
HTML开发工具与规范
开发HTML工具：
(1)文本编辑器，文件扩展名为 .html或 .htm
(2)DreamWeaver、HBulider…
运行HTML：
直接采用浏览器打开HTML文件
HTML的制定：
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。
HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5
前端网站帮助
提供大量文档：w3school、w3cschool
**
HTML基础结构
<html> <head>head> <title>网页标题title><body>网页主体内容body>html>注意：HTML不区分大小写，语法不严格，最好具体写
**
HTML标签
（1）段落标签
<p>一段一段一段一段p><p>一段一段一段一段p>`
**
（2）标题字标签
h1~h6 从大到小
<h1>标题h1>
<h2>标题h2>
<h3>标题h3>
<h4>标题h4>
<h5>标题h5>
<h6>标题h6>
**
（3）换行标签（独目标签）
<br>
**
（4）横线标签（独目标签）
属性：color（颜色）、width（宽度）
<hr>
<hr color="red" width="50%">
<hr color='blue' width=30%>
**
（5）预留格式
（写什么样子呈现出什么样子）
<pre>for;;;;;;sssss
pre>
显示为：for;;;;;;sssss
**
（6）字体标签
（1）
<del>删除字del>
<ins>插入字ins>
<b>粗体字b>
<i>斜体字i>
显示为：
**
（2）
sup标签是字体右上加字
sub标签是字体右下加字
10<sup>2sup>
10<sub>msub>
显示为
**
（3）
改变字体颜色、大小用font标签
属性：color（颜色）、size（大小）
<font color=red size=50>字体标签font>
显示为：
**
HTML实体符号
（1）大于小于号
实体符号特点是：以&开始，以；结束
<是小于号，>是大于号（l和g按照箭头方向指向）
b<a>c
**
（2）空格号
：空格
abc def
abc efg
**
HTML表格
（1）普通表格
1.table是表格 tr是行 td是列
2.align是HTML中的一个设置文本或者图片对齐方式的标签,center是align的一个属性值，表示居中，center是align的属性值。
3. border=“1px” 设置表格的边框为1像素宽度，width（ 宽度），height （高度）
<body><center><h1>列表h1>center><hr> <table align="center" border="1px" width="30%" height="150px"><tr align="center"> <一行的数据都居中><td>atd><td>btd><td>dtd>tr><tr><td>etd><td>ftd><td align="center">gtd>tr>table>body>
显示为：
**
（2）合并表格
1.row（行）合并的时候，删除“下面的”的单元格
2.col（列）合并的时候，删除哪个无所谓
<tr><td>员工编号td><td>员工薪资td><td>部门名称td>tr>
3.th标签也是单元格标签，比td多的是居中、加粗
<body><center><table border="1px" width="50%">center><tr><th>员工编号th><th>员工薪资th><th>部门名称th>tr><tr><td>1td><td>2td><td>3td>tr><tr><td>4td><td>5td><td rowspan="2">6 9td>tr> <tr><td colspan="2" >7 8 td> tr>table>body>
显示为：
**
（3）thead tbody tfoot
thead tbody tfoot在table中不是必须的，只是便于后期的JS代码的编写
格式如下：
<thead><tr><th>员工编号th><th>员工薪资th><th>部门名称th>tr>thead>
<tbody><tr><td>etd> <td>ftd><td>gtd>tr>tbody>
<tfoot> <tr><td>htd><td>itd><td align="center">jtd>tr>
tfoot>
**
HTML背景颜色和背景图片
bgcolor:设置背景色background:设置背景图片以上的设置都是对背景进行设置注意：图片过小，背景会呈现重复现象
<html><head><meta charset="utf-8"><title>HTML背景颜色和背景图片title>head><body bgcolor="red" background="ing/111.jpeg"> body>
html>
**
HTML图片
1.设置图片的高度和宽度的时候，只设置宽度，高度会进行等比例缩放
2.img标签就是图片标签
3.src属性就是图片的路径
4.width设置宽度，height设置高度
5.title设置鼠标悬停时显示的信息
6.alt设置图片加载失败时显示的提示信息
<body><img src="ing/111.jpeg" width="100px" title="我是图片" alt="图片找不到"><br><br><br><img src="ing/111.jpeg" ><br><br><br><img src="in/111.jpeg" alt="图片找不到">
body>
**
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！