HTML
一、HTML概述
开发中使用的架构
C/S架构 client server 客户端和服务器
在客户端上安装软件
优点：大文件读写更快，减少服务器压力
缺点：服务器端版本升级，客户端也要对应升级
B/S架构 browser server 浏览器和服务器
在客户端只需要一个浏览器
输入域名，就可以访问服务器内容
优点：不用在客户端电脑上安装任何软件
缺点：所有数据和资源都要从服务器下载，增加服务器压力。
我们做的项目都是b/s架构。
和用户交互的界面要从一阶段的命令行换成网页
HTML是网页的基本结构。
超文本标记（标签）语言
二、网页的结构
1、基本结构描述
html 表明当前页面为网页结构
head 描述页面的信息
title 描述当前页面的标题，用户看到就大概知道该页面的内容
body
<html> <head> <!-- 网页的标题 --> <title>体育</title> </head> <body> <!-- 网页展示的内容 --> <font color='red'>hello</font> world </body> </html>
以上的代码分成了若干个部分
<html> 用尖括号包起来的代码称为标签
<font color='red'> font标签 标签中的内容color为该标签的属性 描述标签的效果
hello 没有尖括号包起来的代码，不用浏览器处理，展示给用户浏览
三、网页编写的工具
1、工具介绍
记事本、hbuilder、dreamweaver、webstorm、vs code
hbuilder
2、创建web项目
3、项目结构
所有该项目的文件都存到该目录中Demo2022-9-15,避免项目迁移时，丢失文件
四、文本标签
1、字体标签
<!-- 字体标签<font></font> 双标签 有范围 属性color="颜色值" 可以是单词，也可以是16进制三原色编码 每个颜色的取值为0-255 三组颜色 每两个数字代表一个基础颜色 size 字的大小 1-7 需要更多的大小，要通过css来处理 face 字体 --> <font color="#BC8945" size="7" face="华文彩云">你好</font>
2、换行标签
<!-- 换行<br /> 单标签， 当前位置是一个换行 --> <br />
3、字效标签
<!-- b为加粗 i为斜体 u为下划线 --> <b>html</b> <i>hello</i> <u>今天</u>
4、段落标签<p>
<p> 阿斯顿发顺丰大撒旦发射点发射点发生阿斯顿发顺丰大撒旦发射点发射点发生阿斯顿 阿斯顿发顺丰大撒旦发射点发射点发生 阿斯顿发顺丰大撒旦发射点发射点发生 阿斯顿发顺丰大撒旦发射点发射点发生 阿斯顿发顺丰大撒旦发射点发射点发生</p> <p>阿斯顿发顺丰大撒旦发射点发射点发生 阿斯顿发顺丰大撒旦发射点发射点发生 阿斯顿发顺丰大撒旦发射点发射点发生 阿斯顿发顺丰大撒旦发射点发射点发生 阿斯顿发顺丰大撒旦发射点发射点发生</p>
如果需要在网页加空格，需要使用符号
5、标题标签<hn>
<h1>倚天屠龙记</h1> n的取值为1-6
6、水平分割线
width 线的宽度 像素为单位
align 线的对齐方式，默认是居中，left、right、center
size 线的粗细
color 线的颜色
<hr width="300" align="left" size="7" color="red" />
7、特殊符号
空格 < 左尖括号 > 右尖括号 © 版权符号
8、预格式
pre
<pre> 两个黄鹂鸣翠柳， 一行白鹭上青天。 </pre>
9、滚动
marquee
behavior 滚动方式
scrollamount 滚动速度
onmouseover 当鼠标移入到标签上 this.stop()将滚动效果停止
onmouseout 当鼠标移出到标签时 this.start()将滚动效果开始
<marquee scrollamount="100" behavior="scroll" οnmοuseοver="this.stop()" οnmοuseοut="this.start()">一行白鹭上青天</marquee>
五、图片和超链接
1、图片
<!-- 图片标签 <img> src 资源路径 ../退到上层目录 从html目录回到Demo2022-9-15目录 ./表示当前目录 只设置宽度或者高度，会自动进行等比调整 width 像素或者百分比 height 像素值更准确 --> <img src="../img/1.jpg" height="800" width="800" />
2、超链接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <!-- 超链接标签 a 链接文件 --> <a href="../img/1.jpg">图片</a> <a href="../1.iso">文件</a> <br /> <!-- 链接本地页面 --> <a href="图片.html">图片页面</a> <a href="字体.html">字体页面</a> <br> <!-- 链接外部页面 --> <a href="http://www.baidu.com">百度页面</a> <br> <!-- 页面内链接（锚点链接） --> <a name="menu">倚天屠龙记</a> <br> <a href="#a">第一回</a><br> <a href="#b">第2回</a><br> <a href="#c">第3回</a><br> <a href="#d">第4回</a><br> <br> <a name="a">第一回</a> <a href="#menu">回到目录</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <a name="b">第二回</a><a href="#menu">回到目录</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <a name="c">第三回</a> <a href="#menu">回到目录</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <a name="d">第四回</a><a href="#menu">回到目录</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> </body> </html>
六、列表
1、有序列表
<!-- 列表 1、有序列表 ol标签定义列表 li标签定义列表中的项目 默认显示阿拉伯数字 通过type可以设置字母排序或者罗马数字排序 通过start可以设置起始数字 --> <ol type="I" start="2"> <li>孙悟空</li> <li>猪八戒</li> <li>沙和尚</li> </ol>
2、无序列表
<!-- 无序列表 ul标签表示无序列表 type设置无序列表的图标 circle空心圆 disc 实心圆 square 实心方形 无序列表经常做导航用 --> <ul type="square"> <li>张辽</li> <li>赵云</li> <li>甘宁</li> </ul>
3、定义列表
<!-- 定义列表 dl dt名词 dd解释 --> <dl> <dt>html</dt> <dd>超文本标记语言</dd> </dl>
七、表格
1、作用：
展示数据
<body> <!-- table 表格 border 设置表格边框粗细 width height align 表格对于页面的水平对齐方式 bordercolor 边框颜色 cellspacing 设置单元格之间的间距 cellpadding 内容与单元格边框的间距 bgcolor 设置背景色 tr 行 align="center" 该行内容的水平对齐方式 bgcolor 设置背景色 td 单元格 align="center" bgcolor 设置背景色 th 黑体居中 bgcolor 设置背景色 caption 表格的标题 --> <table border="10" width="800" align="center" bordercolor="red" cellspacing="0" cellpadding="20" bgcolor="burlywood"> <caption><h2>部门列表</h2></caption> <tr> <th>部门编号</th> <th>部门名称</th> <th>部门位置</th> </tr> <tr align="center"> <td>10</td> <td>销售部</td> <td>上海</td> </tr> <tr> <td>20</td> <td>销售部2</td> <td>深圳</td> </tr> <tr align="center"> <td>30</td> <td>售后部</td> <td>西安</td> </tr> </table> </body>
八、表单
1、input
<!-- 表单：跟后台进行交互 form action 将表单的数据提交给谁 如果是静态页面效果如超链接 method 默认是get明码传递 安全性不高 post打包传递 安全性高 input标签 输入框 默认type的值为text type属性 取值不同，就可以生成不同的输入框 text 文本框 password 密码框 radio 单选 多个radio要有相同的名字，才有互斥效果 checked="checked" 设置默认选中项 checkbox 复选框 submit 提交按钮 将表单的数据提交给action对应的程序 reset 重置按钮 将表单恢复成默认数据 button 普通按钮，按钮的功能需要自己编写 file 文件域 image 图片按钮 hidden 隐藏域 --> <form action="字体.html" method="get"> 姓名：<input type="text" name="name"><br> 密码：<input type="password" name="pwd"><br> 性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked="checked">女 <br> 爱好：<input type="checkbox" name="hob" checked="checked">篮球 <input type="checkbox" name="hob">读书 <input type="checkbox" name="hob" checked="checked">音乐 <br> 照片：<input type="file" name="photo"> <br> <input type="submit" > <input type="reset"> <input type="button" value="注册"> </form>
2、下拉列表
<!-- 下拉列表 生日 性别 籍贯 select 声明下拉列表 option 是下拉列表的选项 --> 生日 <select name="year"> <option>1995</option> <option>1996</option> <option>1997</option> </select>年 <select name="month"> <option>1</option> <option>2</option> <option>3</option> </select>月 <select name="date"> <option>1</option> <option>2</option> <option>3</option> </select>日
3、文本域
个人介绍： <!-- 文本域 多行文本框 textarea cols 列 rows 行 --> <textarea cols="40" rows="10" name="intro"></textarea>
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/31101
