HTML：html前端初学者基础

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言（英文：Hyper Text Markup Language）。
HTML 文档包含了HTML 标签及文本内容。
HTML文档也叫做 web 页面。

HTML的主要作用:做数据展示

1.HTML的基础语法
实例

<!DOCTYPE html>
<html lang="en">
<head>   <meta charset="UTF-8">   <title>Document</title>
</head>
<body>

Doctype 文件头 ----页面的响应数据类型。
Head 表示html的头的部分，Meta —metadata 源数据，
Title 表示文档的标题。
Body 表示html的正文的部分，包含了许多页面的可见内容，各种div和标签。
Language —lang 语言 en 英文 zh-cn中文
UTF-8 ----Unicode码全世界的通用码

2.HTML的基本标签和属性
实例1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body bgcolor="#33ccff">
<div align="center"><h1>KK</h1><form action="2.html" method="get"><p>用户名：<input type="text" name="username"  value="请输入您的用户名" /> <br/></p><p>密码 ：<input type="password" name="pwd" /><br/></p><p>请选择您的性别：<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女
</p>
<p>
请选择你喜欢的书籍类型：<input type="checkbox" name="hobby" />都市言情<input type="checkbox" name="hobby" />武侠修仙 <input type="checkbox" name="hobby" />悬疑玄幻
</p>
<p>请选择你的城市：<select ><option value="重庆">重庆</option><option value="北京">北京</option><option value="上海">上海</option></select></p>

Hn标签表示文本的标题
N的取值范围 1-6 H1----H6
N的取值越大字体越小加粗
A标签可以进行页面跳转默认为get请求。
属性：Href=”url”。
url 表示路径
绝对路径：从盘符开始要描述的文件路径路径+文件的名称。
相对路径：当前源文件和目标文件的相对路径位置。
Form—表单，该标签一般不会单独使用，会和input标签联合使用。
属性：action=“url” ；name：表单名字；method:表示提交的方式；target：打开方式，和a属性相同；enctype：规定表单提交的数据的编码。
method又包含两个请求：
1.Get请求不安全会把name属性的值暴露在地址栏上地址栏默认大小为64kb。
2.Post请求安全不会再地址栏上暴露name属性的值。
P标签表示对行的控制。
div标签网页的分区的显示
Align标签 cente 表示居中 left 居左 right 居右
横线：hr/ ;空格：&nbsp ;换行: br/
上标：sup ；下标：sub

<input type=”  ” />

1.Text ----文本框
2.Password ----密码框
3.Submit ----提交按钮
4.Radio ----单选框
5.Checkbox ----多选框
6.Reset 重置按钮
7.Button 普通的按钮

实例2

<p>请选择你的爱好<select multiple="multiple"><option value="上号">上号</option><option value="干饭">干饭</option><option value="睡觉">睡觉</option><option value="学习">学习</option><option value="发呆">发呆</option></select></p><textarea cols="20"  rows="4">您好啊</textarea><p>

Select 标签表示选择框
1.select属性
name ：设置下拉菜单和列表的名称
multiple：设置可选择多个选项
size：设置列表中可见选项的数目
2.option属性
value：定义送往服务器的选项值
文本域：textarea rows 表示行数 cols 表示列数

<a href=”#D1”></a><a name=”D1”></a>

Font 标签可以控制字体的大小和颜色
size：控制大小； color：控制颜色
锚点：使网页的展示到达某一个定位的地点

实例3

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="data:image/14.jpg"   alt="帅哥" usemap="#one"><map id="one" name="one"><area shape="circle" coords="480,680,50" href="https://www.baidu.com/"></area></map></body>
</html>

Img标签表示页面上的图片
Src属性 ----source 指代的是图片的路径 url
Alt属性 —表示图像的替代文本
Map —地图计算机语言：带有可点击区域的图像映射
area 元素永远嵌套在 map 元素内部
area 元素可定义图像映射中的区域

<img src="data:image/1.jpg" alt="帅哥" width="100%" height="100%">

Width 宽度
Height 高度
该两个属性可以控制图片的大小单位可以使用XXpx 100%

3.HTML的表格布局和列表

1.表格布局：通过表格来对网站进行整体的布局。
主要使用的就是表格的标签。

实例1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body bgcolor="#F0FFFF" link="orange" vlink="red">
<div align="center">
<h1><img src="data:image/123.png"><font color="sky blue">动漫网</h1></font><input type="text" name="username"  value="搜索你喜爱的动漫"  /><input type="button"/value="搜索"><hr/><table width="800px"><tr><td>最近热门动漫</td><td>热血</td><td>运动</td><td>恋爱</td><td>冒险</td><td style="padding-right:60px;padding-left:120px;"><a href="2.html">更多&gt&gt</td></tr></a></table> <hr/><table width="800px"> <tr><td><img src="data:image/11.jpg" > </td><td><img src="data:image/12.jpg"  width="158px" height="221px"></td><td><img src="data:image/13.jpg"  width="158px" height="221px"></td></tr><tr align="center"><td >缘之空</td></tr></table></body>
</html>

Table标签表示表格
Tr ：表行
Th ：表头
Td ：表元
Broder：表格边框；caption：表格标题

2.无序列表

实例2

<ul><a href="#ww"><li type="square">疾风之刃</li></a><li type="circle">刀锋意志</li>
</ul>

type属性值：
disc：原点
square：正方形
circle：空心圆
适应场景：论坛新闻项展开闭合导航

3.有序列表

实例3

<ol><a href="#ww"><li>疾风之刃</li></a><li>刀锋意志</li></ol>

type属性值
1：数字1、2
a：小写字母a、b
A：大写字母A、B
i：小写罗马数字
I：大写罗马数字
reversed属性
reverse：反转

3.定义列表

<dl><b><dt>今天</dt></b><dd>the shy</dd><dt>明天</dt><dd>The rookie</dd>
</dl>

常用于图文混编

4.HTML的常用但意义不明的标签

nav 导航
slide侧栏
header头部
footer底部等等
目的：增加代码的可读性
label 标记标签通常和表单中的文本框
span 用于修饰文本

HTML总结

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 最关键是标签，其作用是指示将出现的内容。

HTML：html前端初学者基础相关推荐

推荐Web前端初学者应该知道的书籍和网站
互联网的快速发展和激烈竞争,使得用户体验成为一个重要的关注点,导致专业Web前端工程师成为热门职业.各大公司对Web前端工程师的需求量都很大,要求也越来越高,优秀的Web前端工程师更是稀缺.因此想要学 ...
前端初学者开发学习视频_初学者学习前端开发的实用指南
前端初学者开发学习视频 by Nikita Rudenko 通过尼基塔·鲁登科(Nikita Rudenko) 初学者学习前端开发的实用指南 (A practical guide to learnin ...
Web前端初学者，需用了解的7大HTML知识点
HTML是web前端开发基础,关于HTML,这里有几个很重要的知识点,在日常开发常常用到,并且在大家面试的时候也会问的,记住这7个重要知识点,助你在面试时优先录用. 1.网页结构网页结构一般都包含文 ...
分享 40 个免费的前端初学者视频教程
来源 | https://javascript.plainenglish.io/top-40-free-programming-courses-for-beginners-bc39253e784c 今 ...
前端零基础入门_000_前言
适合人群本课程适合下面人群: 1)在校学生,想学习前端开发.将来从事前端开发工作.教程详细系统的讲解了前端基础,还讲解了相关的原理. 2)在职人士,想转行前端.教程提供了大量的案例实践,方便快速上手 ...
Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
顾川的前端学习笔记--前端开发基础
阶段一前端开发基础初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器盒模型 CSS三大特性浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图案 ...
蛋花花给前端初学者的三点建议
蛋花花给前端初学者的三点建议!互联网发展非常的快,互联网周边产业也随之兴起,最近互联网前端这块非常火,目前工资水平给的也高,在市场上也属于稀缺人才,据蛋花花了解现在各个行业转行做web前端的很多,今天 ...
蛋花花给前端初学者的几点建议
蛋花花给前端初学者的几点建议!互联网发展如今非常的快,现在前端非常的火,很多人都开始学习前端.蛋花花身边也有不少朋友看到前端市场非常好,前端工资水平高都转行了.目前前端初学者非常多,蛋花花现在给前端初 ...

HTML：html前端初学者基础

HTML：html前端初学者基础相关推荐

最新文章

热门文章