HTML入门

html

多行注释快捷键 ctrl+/
复制当前行到下一项 ctrl+d
标签快捷写法 标签词+tab
网页格式化 ctrl+alt+d+l

第一节:html

Html:超文本标记语言 作用 描述网页
Html不是编程语言 是标记语言
使用html的标记标签 描述网页

Html文档也叫web页面

Html标签:是使用 html标签通常成对出现 也有单标签

<html></html> <html/> 1

<!DOCTYPE HTML> 声明 当前文档是html
<html></html>标签里面显示当前网页的所有信息
<head lang="en"> 头标签
lang=“en” 标注网页的语言 en英语 ch中文
<title></title>标签 显示在网页的选项卡区域
<body></body>标签 显示网页的所有内容
<meta charset="UTF-8">标签 信息标签
charse=utf-8 标注当前网页的编码格式为utf-8 meat标签在head里面

Html里面的常用标签

网页渲染格式:从左到右、从上到下

1.标题标签

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 1

文本加粗1-6字体由大到小 换行
2.<hr/> 水平线标签
3.<P></p> 段落标签 将文本分割为段落 换行
align=""center文本居中 right靠右 left靠左(默认)
4.<br/> 强制换行

5.文本格式化标签(无换行功能)不能使用align属性

<i></i> 斜体 <em></em>强调 一般浏览器中用斜体表示
<b></b>加粗 <strong></strong>加重语气表示强调 一般表现和b标签相同

<u></u> 下划线
<sub></sub> 下标
<sup></sup> 上标
<small></small> 小号字
<del></del> 删除线
<pre></pre> 标签 预先格式化标签
6.链接
<a href=""></a> 标签 超文本链接 跳转页面
href 里面写跳转的地址 (相对路径、绝对路径、远程路径)
href 默认写# 代表跳转当前页面

<a href=”” target=""></a> 1

属性:target target=“_self” 在当前页面打开 target=“_blank” 重新打开一个选项卡 默认在当前页面打开

绝对路径是文件所在盘符目录
网页从服务端打开 路径不能用绝对路径 容易造成文件丢失(一般不使用绝对路径)

相对路径是绝对路径的一部分
远程路径就是相对路径 把项目放到远程服务器上 通过服务器来访问的路径

相对路径的写法
同级目录下 可直接写名称 eg:href=“***”
或者 一个点表示从当前文件向外跳一级 eg:href=”./***”
不同级目录 跳转兄弟文件的子目录 eg:href=(./···/***)

<a href="./index-常用标签.html">index.常用标签</a> <a href="./trump/trump1.html">trump1</a> 12

绝对路径
绝对路径要有效果 当前文件必须从静态文件打开 href=“文件所在盘符目录”

<a href="D:/html/2.18/index-常用标签.html">盘符目录打开</a> 1

使用a链接制作锚标 当前页面的锚标和跨页面锚标
href=“#***” 跳转当前页面的锚标

href=“./trunp/trump.html#***” 跳转到trump页面的锚标

<a href="#like">锚标位置1</a> <a href="#likeyou">锚标位置2</a> <a href="./trump/trump1.html#trumpp">trumpp锚标</a> 123

a链接 写name=*** 其他标签写id=***

<a name="likeyou">锚标位置2</a> <p id="like">锚标位置1</p> 12

7.img图片标签 <img src="" alt=""/>

<img src="https://i01piccdn.sogoucdn.com/c7fd23d792b99f10" alt="加载失败" align="center"/>极光<br/> <img src="D:/html/2.18/trump/3a9af6a5c96568f8" alt="加载失败"/> 12

src属性是图片的路径(远程或相对) alt属性是图片加载失败时显示的内容 align属性 作用的是图片 效果是图片后的文字对齐位置(center居中 right靠右 left靠左)
8.列表标签
有序列表 ol li type属性 修改序号的显示方式(a A 1 等等)
无序列表 ul li 有序无序列表可互相嵌套

<ul> <li>水果</li> <li>蔬菜</li> <ol type="1"> <li>菠菜</li> <li>西红柿</li> <li>西兰花</li> <li>萝卜</li> </ol> <li>饮料</li> <li>玩具</li> </ul> 123456789101112
水果 蔬菜 菠菜西红柿西兰花萝卜 饮料 玩具

9.区块标签 div 相当于一个容器 主要用来做网页的框架布局 换行 Span标签 专门放置文字的标签

<div><h1>容器可换行</h1></div> <div>容器可换行</div> <div>容器可换行</div> <span><i>文本</i></span> <span><u>文本</u></span> <span><b>文本</b></span> <span><pre>文 本</pre></span> 1234567

容器可换行

容器可换行

容器可换行

文本 文本 文本

文 本

10.input标签

type属性 决定当前的input标签类型 没有type属性则默认单行文本框

Type属性值: Text 单行文本框 Password 密码框 (maxlength输入的最大长度) (Placeholder属性是提示信息) Checkbox 复选框 (checked默认属性) Radio 给radio起相同的名称可以把多个radio做成单选框(name=***)(checked默认属性) File 打开资源管理器 用来上传文件 Submit 表单提交按钮 reset 重置按钮(这两个单独写无效,需要配合form使用) 12345678

value属性(单文本框会显示在界面)是input标签的值 不是界面显示的 是给代码使用的

select 下拉菜单 selected默认选择 (option选项)

<select name="jobyear"> <option selected value="0">——请选择——</option> <option value="1">——1年——</option> <option value="2">——2年——</option> <option value="3">——3年——</option> <option value="4">——4年——</option> <option value="5">——5年——</option> </select> 12345678

textarea 文本域 多行文本框
rows cols 行和列 控制默认外观大小 (Placeholder属性是提示信息)

<textarea name="save" rows="20" cols="20" placeholder="请输入..."></textarea> 1

<form action="" method=""></form> 表单元素标签 做用户注册或登录
action属性 提交表单的数据到后台的路径
method属性 表单提交方式 get 显示提交(不安全、数据量大) post 隐式提交(安全、数据量小)
delete 专门针对 删除操作
insert 专门针对 增加操作
update 专门针对 修改操作

<form action="" method="post"> <ul> <li>姓名:<br/><input name="nickname" type="text" maxlength="10" placeholder="请输入..."/></li> <li>年龄:<br/><input name="age" type="text" maxlength="3" placeholder="请输入..."/></li> <li>性别:<br><input type="radio" value="男" name="1" checked/>男<input type="radio" value="女" name="1"/>女</li> <li>职业:<br/><input name="job" type="text" placeholder="请输入..."/></li> <li>兴趣爱好:<br><input name="hobby" type="checkbox" value="篮球"/>篮球 <input type="checkbox" name="hobby" value="足球"/>足球 <input type="checkbox" name="hobby" value="羽毛球"/>羽毛球</li> <li>工作经验:<br> <select name="jobyear"> <option selected value="0">——请选择——</option> <option value="1">——1年——</option> <option value="2">——2年——</option> <option value="3">——3年——</option> <option value="4">——4年——</option> <option value="5">——5年——</option> </select></li> <li>备注:<br> <textarea name="save" rows="20" cols="20" placeholder="请输入..."></textarea> </li> <input type="file"/><br> <input type="submit" value="提交"/><input type="reset" value="清空"/> </ul> </form> 12345678910111213141516171819202122232425

<table></table>是表格元素标签
<tr></tr>行 <td></td>列
<th></th>也是行(文本加重、居中)
<caption></caption> 表头
border 属性 设置表格的边框宽度
width属性 设置表格的宽
cellspacing 设置列之间的间距
cellpadding 设置列之间的内间距 (按照左上设置距离 右和下自动)
align 设置居中方式
bgcolor 设置表格颜色
rowspan 跨行
colspan 跨列 (表格的跨行和跨列计数算自身)

<table bgcolor="aqua" align="center" border="1" width="500" cellspacing="0"> <caption>表头</caption> <tr bgcolor="#f0ffff"> <td rowspan="4">11111</td> <td colspan="4">基本信息</td> </tr> <tr bgcolor="#f5f5dc"> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>地址</th> </tr> <tr> <td>张三</td> <td>13</td> <td>男</td> <td>地址</td> </tr> <tr> <td>里斯</td> <td>15</td> <td>男</td> <td>地址</td> </tr> </table> 12345678910111213141516171819202122232425

表头

11111

基本信息

姓名

年龄

性别

地址

张三

13

地址

里斯

15

地址

Iframe框架

<iframe src="http://www.baidu.com" width="100%" height="700" name="1" frameborder="0"></iframe> 1

是一个内嵌框架 用于制作小型企业系统(实现点击a链接,在iframe框架中显示嵌入的网页)

Src属性:内嵌的地址
Width属性:设置宽
Height属性:设置高 (浏览器没有高只有宽 所以高设置100%无效)
Name属性:名称(在a链接中写target=名称实现在iframe框架中打开a链接所跳转的页面)
frameborder属性:边框属性(边框的大小)