初识HTML
一、基本概念
-
网页和网站：
- 网页有N个网站组成
- 网页中包含：文字、图片、视频、音频、链接、程序......
- 网页的内容由HTML技术实现的
- 网页的后缀通常都是.html
-
浏览器和渲染引擎
- 常见的浏览器：谷歌、火狐、欧朋、iE、Safari
- 不同的浏览器有不同的内核（渲染引擎），暂时不用记
-
网页三层结构
- 结构层：使用HTML技术实现,给网页提供内容的东西
- 样式层：给网页提供想要的样式,就相当于穿一个好看的衣服
- 交互层：用js来实现,JS是前端程序员最需要掌握的技术
-
开发工具
- 推荐使用Vs Code工具,好处：小巧,插件多
- 快捷键：
- shift + alt + 向下箭头 => 复制上一行
- tab => 向后移动代码
- shift + tab => 向前移动代码
- ! + tab => html基本骨架 !是英文的!
- div.wraper + tab => 生成一个带名字的div
- 鼠标中键 + 向下拽 => 同时选中多行
- 键盘上的del键 => 删除文件
- F2 => 重命名
- shift + alt + f => 格式化代码
- ctrl + f => 查找内容并替换内容
-
标签,属性,元素
- 标签：标签都是使用<>包起来的，分单标签和双标签，也分男标签，女标签和人妖标签
- 标签与标签之间是有关系的,分父子关系和兄弟关系
- 属性：写在开始标签中,以xxx="xxx"这样的形式出现,一个标签中可以有N个属性
- 属性也分两类：公有属性和私有属性
- 公有属性：class,id,title,style
- 元素：标签+属性+标签之间的内容
二、HTML的基本骨架
- 文档声明
<!DOCTYPE html>HTML5的声明- 告诉浏览器,以什么样的标准来解析我们写的代码
- HTML元素
- 是一个网页的根元素,一个网页只有这一个
- lang属性：指定网页的语言 zh-CN表示中文
- head元素
- 网页的头部：基本上在对网页的设置,都会在head实现
- title属性：指定网页的标题
- meat属性: charset="utf-8" 如果不指定,会出现乱码的情况
- body元素
- 网页的主要内容都是写在body里面
- 网页的主要内容都是写在body里面
<!-- 声明 html5 -->
<!DOCTYPE html>
<!-- 指定网页的语言 en表示英文 -->
<html lang="en">
<!-- 基本上在对网页的设置,都会在head实现 -->
<head>
<!-- charset="utf-8" 如果不指定,会出现乱码的情况 -->
<meta charset="UTF-8">
<!-- 指定网页的标题 -->
<title>Document</title>
</head>
<!-- 网页的主要内容都是写在body里面 -->
<body>
</body>
</html>
三、常用标签
- h系列-标题标签
- h1—>h6逐级递减
- p标签-段落标签
- 浏览器会自动适用换行
- 换行标签br/
- 强制换行
- 单标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>我是一个p标签</p>
<!-- 强制换行标签 -->
<br>
- 文本格式化
- 加粗
<strong>或者<b></b> - 倾斜
<em></em>或者<i></i> - 删除线
<del></del>或者<s></s> - 下划线
<ins></ins>或者<u></u>
- 加粗
- 无语义标签
- div
- span
- 图片标签img/
- 属性
- src：图片的路径（来源）
- alt：当图片加载失败的时候会显示alt里面的内容
- title：当前鼠标悬停在图片上显示的文字
- width：图片的宽度
- height：图片的高度
- border：图片的边框
- 属性的特点
- 属性之间部分先后顺序
- 属性名与属性值之间以键值对的形式存在
- 属性名与属性值之间以等号分割 属性值要以引号包裹;
- 属性
- 路径和连续
- 注释与特殊字符
四、列表类标签
-
无序列表
<ul><li></li></ul> -
有序列表
<ol><li></li></ol> -
自定义列表
五、表格类标签
- 属性
- border表格的边框 默认为0
- width:宽度
- height:高度
- cellspacing：单元格与单元格之间的距离
- cellpadding：单元格与单元格之间的距离
- colspan：列合并
- rowspan：行合并
- 标签
- 表格
<table></table> - 行
<tr></tr> - 单元格
<td></td> - 自动居中 加黑 加粗 表头
<th></th> - 表格的标题 写在内部 显示外部 居中
<caption></caption> - 结构头
<thead></thead> - 结构体
<tbody></tbody> - 结构底
<tfoot></tfoot>
- 表格
<table width="75%" style="text-align:center " height="300px" cellpadding="0" cellspacing="0">
<caption style="font-weight: bold; font-size: 24px;" >影院电影放映列表</caption>
<tr style="background-color:rgb(245, 245, 245)">
<th>放映时间</th>
<th>语言版本</th>
<th>放映厅</th>
<th>售价（元）</th>
<th>选座购票</th>
</tr>
<tr style="background-color:rgb(243, 236, 236)">
<td>13:15 <br><span style="font-size:12px">15:00散场</span></td>
<td>国语3D</td>
<td>2号厅</td>
<td style="color:red ;">¥48.5</td>
<td>选座购票</td>
</tr>
<tr style="background-color:rgb(245, 245, 245)">
<td>13:15<br><span style="font-size:12px">15:00散场</td>
<td>国语3D</td>
<td>2号厅</td>
<td style="color:red ;">¥48.5</td>
<td>选座购票</td>
</tr>
<tr style="background-color:rgb(243, 236, 236)">
<td>13:15<br><span style="font-size:12px">15:00散场</td>
<td>国语3D</td>
<td>2号厅</td>
<td style="color:red ;">¥48.5</td>
<td>选座购票</td>
</tr>
<tr style="background-color:rgb(245, 245, 245)">
<td>13:15<br><span style="font-size:12px">15:00散场</td>
<td>国语3D</td>
<td>2号厅</td>
<td style="color:red ;">¥48.5</td>
<td>选座购票</td>
</tr><tr style="background-color:rgb(243, 236, 236)">
<td>13:15<br><span style="font-size:12px">15:00散场</td>
<td>国语3D</td>
<td>2号厅</td>
<td style="color:red ;">¥48.5</td>
<td>选座购票</td>
</tr>
</table>
六、表单类标签
- input属性
- 文本框 text
- 密码框 password
- 单选按钮 radio
- 复选框 checked
- 普通按钮 button
- 重置按钮 reset
- 提交按钮 submit
- image 属性 src
- 文件按钮 file 上传图片
- name属性
- 发送后台...
- name的标识 对于单选按钮只能选择一个
- value:文本框默认显示文字
- checked：默认选中 可以写一个属性 也可以 属性名 = 属性值
- label用法
<label></label>包住的 点击文字鼠标焦点自动到表单里面
- 用户留言 文本域：textarea
- 下拉列表
<select>
<option>请选择</option>
<option>bj</option>
<option>cx</option>
</select>
- selected：下拉列表的默认选中
- form表单
- 主要作用：是收集用户信息 发送后台
- action：提交后台的地址
- method="get/post" 提交（传输）后台的方式
- name =" a" 告诉服务器 由那个表单提交过来的
<h4>十秒加入开心网，找到全部好友</h4>
<ul>
<li>手机号码：<input type="text"></li>
<li>创建密码：<input type="text"></li>
<li>真实姓名：<input type="text"></li>
<li>身份证号：<input type="text"></li>
<li>性别：<input type="radio">男 <input type="radio" checked>女</li>
<li>生日：<select><option>1990</option></select>年<select><option>01</option></select>月<select><option>01</option></select>日</li>
<li>我现在：<input type="radio">在工作<input type="radio">在上学<input type="radio">其他</li>
<li>居住地：<select><option>郑州</option></select></li>
<li><input type="checkbox">同意<a href="">开心网服务条款</a></li>
<li>爱好：<input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">双色球</li>
<li>描述：<textarea name="" id="" cols="30" rows="10"></textarea></li>
<li> <input type="button"value=立即注册><input type="button"value=立即登录></li>
</ul>
