HTML：html前端初学者基础

最新推荐文章于 2022-02-11 19:33:33 发布

Ykkkf

最新推荐文章于 2022-02-11 19:33:33 发布

阅读量204

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_53283519/article/details/110921569

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是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="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="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="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="image/11.jpg" > </td>
    	<td><img src="image/12.jpg"  width="158px" height="221px"></td>
    	<td><img src="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 最关键是标签，其作用是指示将出现的内容。

Ykkkf

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML：html前端初学者基础

什么是HTML？HTML 是用来描述网页的一种语言。超文本标记语言（英文：Hyper Text Markup Language）
复制链接

扫一扫

专栏目录