初入web知识点

Posted 2020-08-06

html标签：
◆ <img src="../images/XXX.PNG" alt="xxx">
../表示url地址信息 最好不要超过两级 images表示上两级中的images文件夹 XXX.PNG表示images文件夹中的某一张PNG图片 xxx表示当图片不显示时所显示的文本内容“xxx”
◆ <pre></pre>
预文本格式 网页显示内容样式与代码编写时的样式一样
◆ <a href="……"></a> a 标签
……链接地址URL
◆ 锚点（回到顶部 跳转到相对应的地方）
①创建锚点 <a href="" name="zhuang"></a>
②指向锚点<a href="#zhuang">回到指定点</a> #只表示分隔符
◆ <div></div>盒模型
<div style="border:1px solid red ; height:50px">一段文字</div>
一段文字 的周围有一个 border 边框 1px 红色 高度为50px
◆ 列表
①无序列表<ul><li></li></ul> 列表前面有小点
②有序列表<ol><li></li></ol> 列表前面是序号
③定义列表<dl><<dt><dd></dd></dt></dl>
Tips:li*5→Tab 可快速生成5个<li></li>
◆ <iframe src="" frameborder="0"></iframe>框架
内联框架 就是框架标签与a标签一起实现的 分为框架命名和a标签
Tips:程序中的符号都是英文状态下的符号，若是在中文状态下输入的符号则识别不了。比如分号
◆ <table></table>表格
表格是由行<tr></tr>和单元格<td></td>组成的
<caption></caption>表示标题 <th></th>表头（有加粗效果）
合并：→ 行合并<td rowspan="2"></td>
→ 列合并<td colspan="2"></td>
align针对的是整个表格 可调节表格的左、中、右
<table border="1" align="left/center/right" style="border-collapse: collapse" ></table>
border="1" 边框显示 align="left/center/right" 表格居左/中/右 style="border-collapse: collapse"是插入的CSS 表示表格双线框变为单线框
<table border="1" align="center" cellpadding="15" cellspacing="25"></table>
cellpadding="15"表示表格内边距为15 cellspacing="25"表示表格外边距为25

表单（form）提交数据 用于交互
<form action="（表单处理程序的地址）" method="（提交方式）">……</form>
◆form提交方式只有两种：
①get： 会在地址栏显示用户信息 安全低 速度快
②post：不会在地址栏显示用户信息 安全高 速度慢
◆input type类型 代码
①html： text文本 password密码 button按钮 submit带提交功能的按钮 reset重置 radio单选 checkbox多选 image图片 hidden隐藏 color颜色
②html5: file文件 date日期 datetime时间 email邮件 number数字 search搜索 URL地址
◆按钮类型
①input type=submit 自带提交功能
②input type=button value=""
③标签button
◆表单属性名
autocomplete 自动完成
autofocus 自动聚焦
readonly 只读
disabled 输入、控制不可用
readonly与disabled唯一区别是后者有灰色底纹
◆textarea文本域
<textarea name="" id="" cols="" rows=""><textarea>
命名区别：
name 名称可相同 与后台交互用
id 名称唯一、不同 JS部分
class 名称类别可相同 html、css前台页面部分
◆下拉菜单
<select name="" id="">
<option value="">……</option> 选项
</select>
◆label 与input合用 扩大、包裹
<input type="radio" id="man" name="sex"><label for="man">男</label>
页面显示选择是 点击“男”也可以进行选择