# HTML入门 ### C/S与B/S架构 - C/S架构 - client：客户端 - server：服务器 - B/S架构 - browser：浏览器 - server：服务器 ### WEB工作原理 - 浏览器 => 服务器：发送请求，索取相关数据。 - 服务器 => 浏览器：接收请求并解析，处理业务，返回数据(响应) - 页面组成：HTML、CSS、JS ### 开发工具 - 编辑工具：notepad++ - 测试工具：chrome ### HTML简介 - 说明：超文本标记语言，所见即所得的文本 - 后缀：.html或.htm，现在统一使用.html ### 标签格式 - 格式： - 双边：`<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名>` - 单边：`<标签名 属性1="值1" 属性2='值2' 属性3=值3 />` - 特点： - 成对出现 - 容错性强 - 标签名已预定义 - 全部小写，注意格式 - 属性使用双引号包括 - 说明：标签就是HTML的骨架，最重要的组成部分。 ### 全局架构标签 - 示例： ```html <html> <!--注释--> <head> <title>网页标题</title> </head> <body text="red" bgcolor="#0000ff"> 这是页面的内容 </body> </html> ``` - 说明： - html：是文档中最大的标签，所有标签都要放在该标签内部 - head：头部，存放页面显示以外的内容，如：标题、字符集等 - body：身体，存放页面要显示的内容，其中的内容会显示在页面中。 - 属性： - text：字体颜色 - bgcolor：背景色 - 几乎每个标签都有的属性： - class、id、name、style - 后面集合CSS与JS经常使用 ### 常用标签(文本修饰) - 标题：h1~h6，字体从大到小；h1一个页面中最多一个，不要为了调整字体大小而使用。 - 加粗：`<b></b>、<strong></strong>` - 斜体：`<i></i>、<cite></cite>、<em></em>` - 下划线：`<u></u>` - 删除线：`<s></s>` - 上标：`<sup></sup>` - 下标：`<sub></sub>` - 字体：`<font></font>` - size：大小 - color：颜色 - face：脸型(字体类型) ### 常用标签(格式控制) - 换行：`<br />`，对于任意多个空格或回车，浏览器都解析为一个空格 - 段落：`<p></p>`，表示一个段落 - 横线：`<hr />`，水平的直线 - 滚动：`<marquee></marquee>` - 原样：`<pre></pre>`，浏览中显示的内容与文档中的格式一样 - 无序列表：`<ul></ul>`，其中的每个元素都是一个`<li></li>` - type：disc(实心圆，默认)，circle(空心圆)，square(实心方框) - 有序列表：`<ol></ol>` - type：1、a、A、I - start：序号的其实位置 ### 字符实体 - 说明：HTML 中的预留字符必须被替换为字符实体，否则无法显示。 - 提醒：不用刻意记录字符实体，用的时候查一下就可以了。 - 示例： ``` < 小于 < > 大于 > 空格 & & ``` - 参考：http://www.w3school.com.cn ### URL(重点) - 说明：统一资源定位符，是URI的一种，可以唯一的标识一个网络资源。 - 组成：协议://主机:端口/文件?参数1=值1&参数2=值2 - http：80端口，会自动省略 - https：443端口 - 例子：http://www.baidu.com:80/index.html?page=3&wd=python ### 超链接(a) - 名称：`<a></a>` - 说明：超链接，可以完成页面的跳转 - 属性： - href：指定跳转地址 - title：光标放上去的提示信息 - target：新页面的打开目标 - _self：当前标签栏 - _blank：新的空白标签栏 - _parent：覆盖父级页面 - _top：覆盖最外层页面 - name：设置锚点，可以用于跳转定位 - 设置该属性后，可以根据其值进行跳转定位(设置a标签的href属性) - 如：`<a name="p5"></a>`，使用：`<a href="xxx#p5"></a>` - 说明：不但可以在一个页面内部跳转，也可以在不同页面间跳转。