THML简介 代码 语法
1 HTML基本定义和发展
1. html是单词HyperMarkupLanguage的缩写，中文称之为 超文本标记语言。其中的超指的就是超链接
2. HTML由html css js
2 HTML骨架标签
1. “< >”这叫做标签
2. 第一行代码为html版本号信息
3. <html>代码开始
4. <meta charset=”UTF-8”>程序出现中文就必须要用UTF-8是国际编码
5. <title>名</title>网页标题要写在中间
6. <body>在这里写的内容会显示在网页上，</body>结束
7. </html>代码结
3 HTML标签和语法
1. HTML标签被人定义为 单标签 和 双标签
2. 单标签----<单标签名/>
3. 双标签<单标签名></单标签名>
4. 双标签写法<></>开始和结束
5. HTML标签可以嵌套
6. HTML空格 换行代码：
空格： 只有一个空格
换行：<br />
4 HTML标题 段落标签
1.标题标签<h1></h1>最大<h6></h6>最小
2.段落标签<p></p>，<p>标签自带换行
5 文字标签
1. 标签语义化，在合适的地方使用合适的标签，就算符 合标签的语义化能提高搜索排名
2. 弱语义化（没有强调语义）：
<b></b>加粗标签
<s></s>删除线
<i></i>倾斜
3. 强语义化（尽量用强语义）：
<del></del>删除线
<strong></strong>加粗（特别强调）
<em></em>倾斜（带有强调）
6 布局标签（没有语义）
1. <div></div>“独占一行”，div是双标签
2. <span></span>可以一行显示多个，span是双标签
3. 代码注释快捷键：Ctrl＋？，注释代码会侵占网速
7 图片标签基本用法
1. <img src=”图”/> 解释如下：
img是单标签
Src代表资源路径 属性名=“属性值”叫做键值对语法也KV对
2. 图片宽 高度：
<img src=”名” width=”宽度” height=”高度”>，只设宽或高一个属性，另外一个会按照原图比例进行缩放
3. 鼠标悬停提示文字：
<img src=”路径”title=”文字”/>鼠标悬停在图片上显视文字
<img src=”路径”title=”文字” alt=”文字”/>alt当图片加载失败显示提示文字
8 路径
1. 路径分为两种 绝对路径 相对路径
2. 绝对路径绝对不要用，在前端中代码没有移植性
3. 相对路径就是相对路径中的同级路径的写法
相对路径 下级查找就是在在thml文件下一级查找
相对路径 上级路径在thml文件上一级查找
格式如下：上级查找<img src=”../img/名”>
下级查找<img src=”img/名”>
9 超链接
1. 本窗口打开连接
跳转线上网站 格式：
<a href=”网站，网址”>内容</a> 线上网址要加http://
本地跳转 格式：
<a href=”本地路径”>内容</a>
2. 新窗口打开连接
加上 target=”_blank 格式如下：
<a href=”网站，网址” target=”_blank”>内容</a>
3. 空连接的三种写法 用#写空连接返回上一级会让页面 瞬间返回顶部
<a href=”#”>内容</a>
<a href=”javascript:;”>内容</a>
<a href=”javascript:void(0);”>内容</a>
10 表单标签
1. form标签就是作为表单数据的跟标签 格式如下;
Action 属性的值就是要把所有的表单内容，传递给哪一个 后台来解决
Method 代表传输数据时候的方法：get代表明文传送 post简单加密传输数据
2. 文本框：
输入框：<input type=”text”/>
输入提示：<input type=”text” placeholder=”内容”/>
密码框：<input type=”password”/>
3. 选择框：
单选框：
单选：<input type=”radio” name=”xb”/>
实例<input type="radio" name="xb" checked="checked" id="nv"/><label for="nv">女装大佬</label>
点字选择：<input type=”radio”name=”xb” id=”cf”/>
<lavel for=”cf”>男</label>
点字选择加密：<input type=”radio”name=”xb”/>男</label>
4. 复选框：
<input type=”checkbox” id=”cf”/><label for=”cf”>字</label>, 点击字也可以实现
<input type=”radio”/>
表格书写格式：
<form action=”指定提交那个后台程序” methhod=”数据提 交方法”>
输入提示：<input type=”text” placeholder=”内容”/>
密码框：<input type=”password”/>
</form>
5. 下拉菜单格式：
<select name=”” id=””>下拉框
<option value=””>选项</option>
</select>
6. 默认选中状态：
单选框加入checked=”checked”就可以
多选框加入checked=”checked”
下拉菜单加入checked=”checked”会改变排名位置
Selected=”selected”不会改变排名位置
7. 文本域：
rows代表行数 Cols 代表列，一般情况下不适应这两个属性因为有兼容性问题 使用css来解决
<textarea name=” ” id=” ” cols=” “ rows=” ” placeholder=”提示”>
加入此代码可以实现文本域大小锁定：
<style type="text/css">
textarea{ resize: none;}
</style>
8. 按钮：
普通按钮：不具有功能，但可以设置相应的功能
<input type=”button” value=”提示文字”>
重置按钮：点击后重置表单页面数据而非清空
<input type=”reset” value=”提示文字”>
提交按钮：此按钮会把表单上传到form标签中的actiom 提交后台相对应的程序
<input type=”submit” value=”提示文字”>
11 列表标签
1. 创建格式:
无序标签：ul li代表无序标签
<ul>
<li>内容</li>
</ul>
有序标签：ol li代表有序标签，标签要用的准确保证语义
<ol>
<li>内容</li>
</ol>
|
|
收藏
淘帖
踩
