2020-11-29

最新推荐文章于 2020-12-08 00:13:02 发布

toShine…

最新推荐文章于 2020-12-08 00:13:02 发布

阅读量180

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_50910046/article/details/110312910

版权

本文详细介绍了HTML的基础知识，包括超文本和标记语言的概念，HTML的基本结构，以及和标签的用途。重点讲解了HTML中的标题、段落、布局、列表、文本、超链接、图片、表格和表单等常用标签的用法，为初学者提供了全面的学习指导。

摘要由CSDN通过智能技术生成

初学HTML

1. 认识html

1.1 超文本标记语言

超文本:指页面内可以包含图片,链接,甚至音乐,程序等非文字元素
标记语言:描述html的语法格式,采用标签的方式描述网页内的元素

1.2 Html基本结构

<html>
		<head>
		<body>
		hello world!
		</body>
		</head>
</html>

2 Html详解

2.1 head 标签

头标签不会出现在网页显示区域
包含:
title标签:用来声明网页的标题
meta标签:HTML 网页文档的属性,例如作者,日期,网页描述
style标签:用来内嵌 css 样式
link标签：用来引入css样式文件
script标签：用来引入javascript程序。

2.2 html中的特殊字符

特殊字符

2.3 Body标签

所有标签都是忽略大小写的,但是推荐用小写.
标签的闭合特性
闭合标签(双标签):例如

非闭合标签(单标签):例如

2.3.1布局标签
标题标签

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

段落标签

<body>
<p>段落</p>
</body>

div标签:一般配合css对网页内两大区域进行布局.

<body>
<div>这是一个div空白块元素</div>
</body>

span标签:一般用来包裹非特殊显示文本进行.

<body>
<div>这是一个span空白行内元素</div>
</body>

列表标签分类:
自定义列表
有序列表
无序列表
自定义列表

<dl>
<dt>标题1</dt>
<dd>这里是一段内容</dd>
<dt>标题1</dt>
<dd>这里是一段内容</dd>
</dl>

有序列表

<ol type="a">
<li>用户管理</li>
<li>部门管理</li>
<li>岗位管理</li>
</ol>

无序列表

<ul type="circle">
<li>用户管理</li>
<li>部门管理</li>
<li>岗位管理</li>
</ul>

文本标签

<font color="red" size="0~7"></font>
<b></b>加粗
<i></i>斜体
<br />换行

超链接标签

<a href="http://www.baidu.com">百度一下</<a>>

href 可以去两种类型
绝对路径:完整的网页访问路径,与当前网页无关

<a href="http://192.168.20.141:8080/myproj/test.html">我的页面</a>

https:// XXXX : port /XX/XX.html
协议名地址端口资源路径

相对路径:需要访问的网页资源与当前网页资源路径的相对位置

<a href="../chapter5/iframe.html">
使用相对路径访问本域内的网页资源
</a>

“.”–代表目前所在的目录。
“…”–代表上一层目录。
“/”–代表根目录。
超链接的打开方式：被访问的网页以哪种方式打开，使用target属性设置。

<a href="xxx"  target=”xxx”>点我看看</a>

_blank:在新窗口中打开链接文档
_self:默认，在当前浏览器窗口中打开被链接文档。
_parent:在父框架中打开被链接文档。
_top:在当前网页的最顶层框架中打开被链接文档。
framename：在指定的框架中打开被链接文档

锚记连接

<a href="#jump">点我看看</a>
---<p id="jump">我是该区域的相应内容</p>

图片标签img

<img src="coder.jpg" width="100px" height="100px" alt="图片"/>```
Src      图片路径 Width   图片宽度 Height   图片高度 Alt      图片说明

表格标签
Table       表格
Tr          行
Td          单元格（列）
Th          列头
Thead       表区域（头）
Tbody       表区域（体）
Tfoot        表区域（脚）
Caption      表名

border: 边框厚度
bgcolor：背景颜色
cellpadding： 边框到内容的间距
cellspacing：边框到边框的间距
bordercolor：边框颜色
Rowspan 合并行
Cellspan 合并列

```html
<table width="200px" height="150px" border="1px" align="center">
			<tr>
				<td>1.1</td>
				<td>1.2</td>
				<td>1.3</td>
			</tr>
			<tr>
				<td>2.1</td>
				<td>2.2</td>
				<td>2.3</td>
			</tr>
			<tr>
				<td>3.1</td>
				<td>3.2</td>
				<td>3.3</td>
			</tr>
		</table>

表单标签
Input标签

<input  type=”xxxx”/>

type的属性值：
Text 文本框
Password 密码框
Radio 单选按钮
Checkbox 多选按钮
File 文件框
Color 颜色框
Date 日期框
Button 空白按钮
Submit 提交按钮
Reset 重置按钮

Select标签下拉菜单

<select>       
<option>选项1</option>
<option>选项1</option>
</select>

Textarea标签多行文本框

<textarea></textarea>

Form表单（用户填写的数据需要通过表单标签提交）

<form action=“http://www.sohu.com” method=“post”>  </form>

Action属性代表提交的地址
Method属性代表提交的方式get post
get与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。
在发送密码或其他敏感信息时绝不要使用 GET ！
POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
需要提交的数据必须要加上name值,不然无法提交.
id属性值在一个html中不能重复,作用就是为了方便后面的JavaScript对节点进行增删改.

div和span有什么用?
div和span都可以称为"图层"
图层的作用是为了保证页面可以灵活布局
图层就是一个一个盒子,div嵌套div就是盒子套盒子
div和span可以定位,只要定下div的左上角的x轴和y轴坐标即可
div和span区别:div独自占用一行(默认情况下) span不会独自占用一行

toShine…

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-11-29

HTML1. 认识html1.1 超文本标记语言超文本:指页面内可以包含图片,链接,甚至音乐,程序等非文字元素标记语言:描述html的语法格式,采用标签的方式描述网页内的元素1.2 Html基本结构<html> <head> <body> hello world! </body> </head></html>2 Html详解2.1 head 标签头标签不会出现在网页显示区域包含:title标
复制链接

扫一扫