前端html
前端学习
前端三大技术核心 html 、CSS、js
一、HTML 网页主体内容
1.1、概念
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
现在发展到第五代了,我们又称为h5页面
-
他不是编程语言,而是一种标记语言,由各种标签组成 (HTML tag)
-
可以描述 文字,图形、动画、声音、表格、链接等
-
HTML 运行在浏览器上,由浏览器来解析
1.2、标准骨架
html文件 都有一个标准的骨架 即在创建一个html文件 会自动生成的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1.2.1 标签概念
我们分析 上面代码 可知:
- HTML 标签是由尖括号包围的关键词,比如
- 而且成对出现的 ,如 :<head> 内容.....</head>
- 第一个标签,我们称为开始标签(开放标签) 如:<head> ,第二标签 我们称为 结束标签(闭合标签) 如
1.2.2、骨架标签解析
<!DOCTYPE html>
第一行代码 是用来声明 这个是一个 html 文件
<html lang="en"> 内容 </html>
第二行代码 到最后一行
这是所有html 的内容 为最最外层的一个大标签
lang="en":向搜索引擎表示该页面是html语言,并且语言为英文网站 en 为 english , 也可以改为 即为中文网站
注:不代表里面都是中文 ,也可以不写 lang="en"
<head> 内容 </head>
头部标签:
它是所有头部元素的容器。在head标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题
文档头部包含的数据都不会真正作为内容显示
<meta charset="UTF-8">
<title >Title</title>
meta: 标签可以设置网页的字符集(utf-8 国际编码)
title :标签设置网页的标题
<body>
</body>
body : 身体主体,和head标签是同一级 ,所有网页显示的内容 都在 body标签之中
1.3、标题标签
你在浏览一个html界面时 ,如果是文字 一般你都会看到有标题
html 标题 分为六级 依次减小效果,每个标题都是独占一行空间
<h1> 标题 </h1>
<h2> 标题 </h2>
<h3> 标题 </h3>
<h4> 标题 </h4>
<h5> 标题 </h5>
<h6> 标题 </h6>
展示如下:
![标题](media\标题.jpg)
1.4、段落标签
有标题 即有段落
<p>
段落内容.....
</p>
合适内容使用合理的标签,就叫满足标签语义化;这样可以在搜索引擎排名中更靠前!点击率更高,带来更多的收益!
1.5、 注释
html 虽然不是编程语言 但人家也是标记语言,也是有注释
<!-- 在此处写注释 -->
浏览器不会显示注释,但是能够帮助记录您的 HTML 文档。
您可以利用注释在 HTML 中放置通知和提醒信息
1.6、空格与换行
在html 中
空格要用:
等于 一个空格
换行:
<br /> 也就是一个回车
路径
**相对路径**:从当前位置 或 任意相对位置开始 到目标 文件的路径
**绝对路径**:从根目录开始 到目标文件的路径
1.7、属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以 名称/值 对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
如:name 属性用于指定标签元素的名称。 <a> 标签内必须提供 href 或 name 属性
<a href="http://www.baidu.com">百度一下</a>
<a name="value">
1.7.1、id 属性
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记,不能在同一文档中的其他 name 或 id 属性中重复使用,但是可以在不同的文档中再次使用。
1.7.2、style 属性
样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。
背景颜色:background-color 属性为元素定义了背景颜色
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">这是一个标题</h2>
<p style="background-color:green">这是一段内容,这是一段内容</p>
</body>
</html>
字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
<html>
<body>
<h1 style="font-family:verdana">一个标题</h1>
<p style="font-family:隶书;color:red;font-size:20px;">一段内容</p>
</body>
</html>
文本对齐
<html>
<body>
<h1 style="text-align:center">这是一个标题</h1>
<p>内容lll手动释放速度士大夫士大夫地方</p>
</body>
</html>
更多属性:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
1.8、图像
当在html 插入一张图片时 ,要先把图片准备好 ,我们交给网页的 是这个图片所在的路径(位置)
<img src="C:\Users\huangwei\Desktop\test\test_img.jpg" width="104" height="142" title="鼠标悬停提示文字" alt=”图片未加载时候提示文字“ />
- image 就是图像,没有结束标签
- src 等于资源,后面指向 图片所在的位置
- width :代表宽度(横向距离)、height :代表高度(纵向距离);如果宽和高都不设置,图片会按照原本的大小去显示
- title : 鼠标悬停时候的提示文字
- alt :当图片未正常加载的时候,显示文字
1.9、超链接
在网页中 你会经常遇到超链接 , 用a标签表示
<a href="http://www.baidu.com"> 百度一下 点击这里 </a>
-
href属性 指向就是 要跳转的 地址(也可以是本地的地址)
-
a标签包裹的内容 就是显示在网页上的 链接标题
1.10、div 块
可定义文档中的分区或节(division/section)。
<h1>新闻网站</h1>
<p>一些 内容 一些内容</p>
...
<div class="news">
<h2>新闻标题1</h2>
<p>新闻内容 新闻内容 新闻内容</p>
...
</div>
<!-- 加颜色 设置了高和宽-->
<div style="background-color:red; height:100px;width:300px">
<h2>新闻标题2</h2>
<p>新闻内容 新闻内容 新闻内容</p>
...
</div>
1.11、form表单
form表单标签里面包括所有用户填写的表单数据,
比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
input标签的type类型:
type="text" 普通的输入框
type=”password” 密码框
type="radio" 单选框
checked="checked" 此属性可以表达默认选中状态
测试细节:
1、点击查看是否为单选效果
2、刷新的时候是否有默认选中的状态
3、点击文字是否可以进行切换
type="checkbox" 多选框、复选框
checked="checked" 默认选中
测试细节:
1、刷新的时候是否有默认选中的状态
2、点击文字是否可以进行切换
注意:一切测试要追溯到用户的需求
select标签嵌套若干option标签,每组option就是一个下拉菜单中的选项
selected="selected" 下拉菜单的默认选中
测试细节:
1、内容的顺序
2、默认选中的状态
3、内容的条数
textarea 文本域
测试细节:
1、测试三大主流浏览器外观大小是否一致
2、提醒程序员禁用拖拽大小的功能
type="button" 普通按钮,需要js配合才能实现其它效果
value属性设置按钮身上的文字
type="reset" 点击后可以让表单数据恢复默认值
value属性设置按钮身上的文字
type="submit" 点击后可以让表单提交给指定后台处理
value属性设置按钮身上的文字
点击后无论是否报错,都与我们无关,最终测试的时候,只要关注数据库中的内容是否正常添加即可
placeholder="请输入用户名" 文字提醒属性