前端学习第一阶段——HTML
WYHwind -基于一定基础上的巩固及深入学习---DAY-1 HTML
一. HTML是一种超文本标记语言(由各种标签组成)
二. 常用浏览器(读取网页内容):
IE,火狐,谷歌,Edgo,Safai,Opera
三. Web标准(W3C)
包括结构,表现和行为
标准
结构 结构用于对网页元素进行整理和分类(HTML)
表现 表现用于设置网页元素的版式,颜色,大小等外观样式(CSS)
行为 行为是指网页模型的定义及交互的编写(JS)
四. 语法规范
标签1.1 双标签
<html>
<head></head>
<body></body>
</html>
1.2 单标签
<br/>
标签关系
2.1 包含关系(父子)
2.2 并列关系(兄弟)
五. 基本结构
<!DOCTYPE html>//文档声明类型
<html lang="en">//定义当前文档显示语言(en英文网站,zh-CN中文网站)
<head>
<meta charset="UTF-8">//规定html所使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
六. HTML常用标签
标题标签<h1>-<h6>//共六级,每个标题独占一行
<h1>一级标题</h1>
段落和换行标签
<p></p>
文本格式化标签Strong/b,em/i,del/s(删除线),ins/u(下划线)
盒子标签
<div>独占一行
<span>一行可以放多个
图像标签
5.1 图片标签
<img src = “图像url”>单标签
属性:
src图片路径
title鼠标放到图像上显示的文本
alt替换文本(当图片不能正常显示时)
width宽(px)
height高(px)
border边框粗细(px)
可以有多个属性,不分先后,属性与属性之间用空格隔开
5.2 路径标签
5.2.1 相对路径
以引用文件所在位置为参考,建立的目录路径
例如:<img src = “baidu.gif”>
下一级:/ 上一级:../
5.2.2 绝对路径
目录下的绝对位置,通常从盘符开始
例:D:\git\2021\rendc\day16\1-一元运算符.js
6.1 a标签
<a href="tiaozhuan" target = "目标窗口的弹出方式" >文本或图像</a>
属性:
herf:链接url
target:url打开方式。_self默认值,_blank在新窗口打开
6.2 链接
外部链接:http://www.baidu.com
内部链接:day1.html(同级)
空链接:#
下载链接:.exe/.zip
网页元素链接:将超文本内容作为链接
锚点链接:快速定位到页面位置
<a href="#two">文本或图像</a>
<h3 id="two">文本或图像</h3>
注释标签
html: <!—这是一个注释-->
CSS: /*这是一行注释*/
JS: //这是一行注释
特殊字符标签
常用:
  空格
< >大于号
> <小于号
表格标签
9.1 表格作用
显示,展示数据
9.2 基本语法
9.2.1 标签
<table>定义表格的标签</table>
<tr>定义表格中的行,必须在table里</tr>
<td>定义表格中单元格,必须在tr中</td>
<th>表头table head,文字会加粗居中</th>
表格可分为<thead><tbody><tfoot>三个区域
例:
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>tom</td>
<td>男</td>
<td>2021-03-01</td>
</tr>
<tr>
<td>jacky</td>
<td>男</td>
<td>2021-03-01</td>
</tr>
<tr>
<td colspan="2">vicky</td>
<td>女</td>
<td>2021-03-01</td>
</tr>
</tbody>
<tfoot></tfoot>
9.2.2 表格属性(不常用,后用CSS)
align value=left,center,right 对齐方式
border 是否有边框,默认无
cellpadding 规定单元边沿与内容间的空白,默认1
cellspacing 规定单元格间的空白,默认2
width 表格宽度
9.2.3 合并单元格
跨行合并:rowspan=“合并个数”,写到上侧
跨列合并:colspan=“合并个数”,写到左侧
列表标签用于布局,整齐有序
10.1 无序列表
并列,ul只能嵌套li,li中可以嵌套所有元素
<ul>
<li>1</li>
<li>2</li>
</ul>
10.2 有序列表
按照一定顺序排列
<ol>
<li>1</li>
<li>2</li>
</ol>
10.3 自定义列表
用于对术语或名词进行解释和描述,没有任何符号
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
</dl>
表单标签
用于收集用户标签
由表单域,表单控件和表单信息构成
11.1 表单域
包含表单元素的区域
<form>将表单元素信息提供给服务器</form>
属性:
action 指定接收并处理表单数据的服务器程序的url地址
method 设置表单数据的提交方式,取值get,post
name 指定表单名称,区分一个页面中多个表单域
<input type=“text”>表单元素,单标签
单选框:radio
复选框:checkbox
提交按钮:submit
重置按钮:reset
按钮:button
文件上传file
name: 定义input元素名称,单选按钮、复选按钮应拥有相同名称
value:规定input元素的值
checked: 规定input元素首次加载中默认选中
maxlength: 规定最大字段中字符最大长度
<lable>标签用于绑定一个表单元素,点击label标签内的文本时,浏览器就自动将焦点选择相对应的元素上,增加用户体验。