前端学习第一阶段——HTML
基于一定基础上的巩固及深入学习---DAY-1 HTML
一. HTML是一种超文本标记语言(由各种标签组成)
二. 常用浏览器(读取网页内容):
IE,火狐,谷歌,Edgo,Safai,Opera
三. Web标准(W3C)
包括结构,表现和行为
标准
结构结构用于对网页元素进行整理和分类(HTML)
表现表现用于设置网页元素的版式,颜色,大小等外观样式(CSS)
行为行为是指网页模型的定义及交互的编写(JS)
四. 语法规范
- 标签
1.1 双标签
1.2 单标签
- 标签关系
2.1包含关系(父子) 2.2并列关系(兄弟)
//文档声明类型
//定义当前文档显示语言(en英文网站,zh-CN中文网站)//规定html所使用的字符编码
Document - 锐客网
六. HTML常用标签
- 标题标签
-//共六级,每个标题独占一行
一级标题
- 段落和换行标签
- 文本格式化标签
Strong/b,em/i,del/s(删除线),ins/u(下划线) - 盒子标签
独占一行 一行可以放多个
- 图像标签
5.1 图片标签
单标签
属性:
src图片路径 title鼠标放到图像上显示的文本 alt替换文本(当图片不能正常显示时) width宽(px) height高(px) border边框粗细(px)
可以有多个属性,不分先后,属性与属性之间用空格隔开
5.2 路径标签
5.2.1 相对路径
以引用文件所在位置为参考,建立的目录路径
例如:
下一级:/ 上一级:../
5.2.2 绝对路径
目录下的绝对位置,通常从盘符开始
例:D:\git\2021\rendc\day16\1-一元运算符.js
- 超链接标签
6.1 a标签
文本或图像
【前端学习第一阶段——HTML】属性:
herf:链接url
target:url打开方式。_self默认值,_blank在新窗口打开
6.2 链接
外部链接:http://www.baidu.com
内部链接:day1.html(同级)
空链接:#
下载链接:.exe/.zip
网页元素链接:将超文本内容作为链接
锚点链接:快速定位到页面位置
文本或图像
文本或图像
- 注释标签
html: CSS:/*这是一行注释*/ JS://这是一行注释
- 特殊字符标签
常用:   空格 <>大于号 ><小于号
- 表格标签
9.1 表格作用
显示,展示数据
9.2 基本语法
9.2.1 标签
定义表格的标签
定义表格中的行,必须在table里 定义表格中单元格,必须在tr中 表头table head,文字会加粗居中
表格可分为三个区域
例:
编号 姓名 性别 生日 1 tom 男 2021-03-01 jacky 男 2021-03-01 vicky 女 2021-03-01
9.2.2 表格属性(不常用,后用CSS)
alignvalue=https://www.it610.com/article/left,center,right 对齐方式 border是否有边框,默认无 cellpadding规定单元边沿与内容间的空白,默认1 cellspacing规定单元格间的空白,默认2 width表格宽度
9.2.3 合并单元格
跨行合并:rowspan=“合并个数”,写到上侧 跨列合并:colspan=“合并个数”,写到左侧
- 列表标签
用于布局,整齐有序
10.1 无序列表
并列,ul只能嵌套li,li中可以嵌套所有元素
- 1
- 2
10.2 有序列表
按照一定顺序排列
- 1
- 2
10.3 自定义列表
用于对术语或名词进行解释和描述,没有任何符号
- 关注我们
- 新浪微博
- 官方微信
- 表单标签
用于收集用户标签
由表单域,表单控件和表单信息构成
11.1 表单域
包含表单元素的区域
属性:
action指定接收并处理表单数据的服务器程序的url地址 method设置表单数据的提交方式,取值get,post name指定表单名称,区分一个页面中多个表单域
表单元素,单标签
单选框:radio 复选框:checkbox 提交按钮:submit 重置按钮:reset 按钮:button 文件上传file
name: 定义input元素名称,单选按钮、复选按钮应拥有相同名称 value:规定input元素的值 checked: 规定input元素首次加载中默认选中 maxlength: 规定最大字段中字符最大长度
标签用于绑定一个表单元素,点击label标签内的文本时,浏览器就自动将焦点选择相对应的元素上,增加用户体验。
推荐阅读
- 开学第一天(下)
- 由浅入深理解AOP
- 继续努力,自主学习家庭Day135(20181015)
- python学习之|python学习之 实现QQ自动发送消息
- 我要我们在一起(二)
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 新年第一部电影,一本满足
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- 列表标签