html基础

最新推荐文章于 2024-06-24 01:45:00 发布

是草莓味的啊

最新推荐文章于 2024-06-24 01:45:00 发布

阅读量399

点赞数 1

分类专栏： Web前端文章标签： Web前端 html

本文链接：https://blog.csdn.net/weixin_43908649/article/details/104244188

版权

Web前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章目录

一.html简介

使用：HBuilder，左侧栏项目管理器打开：视图—显示视图—项目管理器

HTML称为超文本标记语言，是一种标识性的语言，它包括一系列标签，通过HTML标记对网页中的文本、图片、声音等内容进行描述。后缀为.html，.htm。可以用记事本打开编写。

文档类型标记：（针对html5）
根标记<html>、头部标记<body>

1.网页的基本组成

网站是由多个html写成网页组成，网页通常由图片，链接，文字，声音，视频等元素组成，以.html或.htm结尾

2.什么是html

超文本标记语言

3.常用浏览器

IE（微软），Edge（微软），火狐，谷歌，Safari（苹果系统），Opera浏览器
浏览器内核（渲染引擎）：读取网页内容，显示页面

在这里插入图片描述
4.web标准三大组成部分

W3C（万维网联盟）和其他标准组织制定的一系列标准的集合
为了解决不同浏览器显示页面或排版的差异
web标准最佳体验方案：结构、样式、行为相分离
结构写到html中，表现写到css中，行为写到js中

在这里插入图片描述

二.简单标签（双标记，单标记[空标记]）

标签的关系：包含关系（父子），并列关系

1.注释标签
，快捷键ctrl+/
2.设置文本的属性的标签：颜色，大小，字体
<font color="red" size="5px" face="楷体">这是第一个html</font>

html4中不被赞成使用，可以通过css来设置

3.标题标签，h1最大，h6最小
<h1></h1>，<h6></h6>，文字加粗，重要性依次递减
4.段落标签，会空一行，要是直接用<br/>换行不会空行
<p></p>
5.文本格式化标签
<b></b>或<strong></strong>加粗，<i></i>或<em></em>斜体
<u></u>或<ins></ins>下划线，<del></del或<s></s>删除
6.居中
<center></center>
7.段落标签
<p></p>
8.强制换行
<br/>（单标签），与段落标签的区别，行与行距离比较小，段落中间距离比较大
9.水平线
<hr/>（单标签）
10.基本骨架标签
<html></html> ：根标签
<head></head>：头标签，必须要设置的就是title标题标签
<body></body：包含所有文档内容
11.文档类型声明标签
<!DOCTYPE>：告诉浏览器使用哪种html版本来显示网页，要求必须处于<html>标签之前，本身不属于html标签
<!DOCTYPE html>：当前页面采用html5版本来显示网页

12.语言种类
lang="en"英文网页，lang="zh-CN"中文网页

13.字符集
<meta charset="UTF-8">，以便计算机能识别和存储各种文字，避免乱码，GB2312（简体中文）、BIG5（繁体中文），GBK（包含简体和繁体中文），UTF-8（万国码，包含全世界所有国家用到的字符）

三.图片标签

<img>
1.属性:

src(图片存放地址)两种路径:（必须要写的属性）
图片宽高:width，height，若不使用，显示原来宽高；使用一个，另一个等比放大缩小；两个都使用。
图片边框：border（默认无边框）
替换文本，图片找不到时显示的内容：alt=" "
提示文本，鼠标移动上去后显示的文字：title=""

<img src="url" height="" weight="" border="" alt="" title=""/>

目录文件夹：普通文件夹，放所有素材，包括图片，html，css，js等
根目录：打开目录文件夹的第一层就是根目录

绝对路径:从盘符开始定位，或完整的网络地址"http://www.itcast.cn/images/logo.png"
相对路径(用于引用文件与图片放在同一路径或者前一路径下)：./图片名或../图片名

四.列表标签

表格是用来显示数据的，列表就是用来布局的
列表的特点：整齐，有序，布局方便自由

1.有序列表<ol><li></li></ol>

ol属性:
type:1(数字),a(字母),I(罗马数字)
start:从哪开始

2.无序列表<ul><li></li></ul>

ul 中只能放 li 标签，其他标签不允许，但 li 里面可以放任何东西

属性:
type:disc(圆点，默认)，circle(圆圈)，square(方块)

3.快速生成无须有序列表

ul > li * 5 tab键
ol > li * 5 tab键

4.自定义列表

<!-- dl与dt和dd是包含关系，dt与dd是兄弟关系 -->
<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>

五.超链接标签

<a href="跳转目标" target="目标窗口打开方式">文本或图像</a>

目的：跳转
1.href:链接的路径
2.target:打开方式：
①._self:在自身页面打开(默认)
②._blank:新打开一个窗口

链接分类
1.外部链接 <a href="http://www.baidu.com">百度</a>
2.网页间的链接（内部链接） <a href="index2.html">首页</a>
3.空链接，未确定链接目标时使用 <a href="#">首页</a>
4.下载链接，如果href里面地址是一个.exe文件或者.zip压缩包，会下载这个文件<a href="img.rar">下载图片压缩包</a>
5.网页元素链接，文本，图像，表格，音频，视频都可以添加超链接

6.锚点链接（网页内的链接）

<!-- 定位锚点 -->
<span id="top"></span>
<a href="#peopleIntroduction">人物简介部分</a>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<!-- 设置一个锚点 -->
<span id="peopleIntroduction">人物简介</span>
<a href="#top">返回顶部</a>

六.表格标签

用于展示数据，可以使用element-ui生成个性化表格

<!--两行两列-->
<table>
	<!-- 表格的头部区域 -->
	<thead>
		//第一行用th,是表头,字体自动加粗并且居中显示
		<tr>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<!-- 表格的主体区域 -->
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

在这里插入图片描述

<table>的属性：
①.宽高：width，height
②.边框：border
③.表格与表格之间的距离：cellspacing
④.表格与元素（文字）间的空白部分：cellpadding
⑤.表格水平位置（单元格整体居中）：align(left,center,right)
⑥.表格颜色：bgcolor
⑦.规定外侧边框的哪个部分是可见的：frame
⑧.规定内侧边框的哪个部分是可见的：rules
<td>的属性:
①.设置当前单元格横跨的列数，合并列：colspan=“列数”
②.设置当前单元格横跨的行数，合并行：rowspan=“行数”

快速生成4行4列边框为1且居中的表格
table[border=“1” align=“center”]>tr4>td4

七.表单标签

<form></form>
1.作用：收集用户信息
2.表单结构：表单控件（<input>），提示信息，表单域（使用form标记来定义表单域）
<form action="url地址" method="提交方式" name="表单名称"></form>
3.属性:

①.action:提交的路径(action=“form_action.asp”)，默认提交到当前页面
②.method:请求方式，get(默认，显示到地址栏，大小有限制)，post(不会显示到地址栏，没有大小限制，一般使用)

如果需要把表单中的数据以键值对的形式提交到服务器，就需要在<input/>外面包裹<form></form>，提交按钮的事件也是绑定到form中提交的。如果只是显示不提交数据可以不写<form>。

4.元素:

①文本框<input type="text" name="username">
属性：name(定义表单提交到服务器端的表单名称，必须有name属性后台才可以接收数据，例username=“ddd”)，id
value(文本框默认值)，size(文本框长度)
maxlength(可输入最大长度)，readonly(只读)(readonly=“readonly”)

②密码框密码<input type="password">
属性:name,value,size,maxlength

③单选框<input type="radio">
属性:name,value,checked=“checked”(默认被选中)
快捷键：input[type=“radio”]*2

④复选框滑雪<input type="checkbox">
属性:name,value,checked

注意：单选按钮和复选按钮中的name一定要相同,value可以不一样

⑤下拉列表

<select>
		<option value="北京" selected="selected"(默认被选中)>北京</option>
		<option value="上海">上海</option>
		<option value="南京">南京</option>
</select>
//快捷生成：select>option*2

⑥其他元素，name，value给默认按钮上显示的内容

<input type="button" value="跟我来" name="button">//普通按钮,没有任何功能
<input type="submit" value="提交" name="submit">//提交按钮,提交到form里面的action路径里
<input type="reset" value="重置" name="reset">//重置按钮
<input type="file" name="file">//上传文件
<input type="hidden" name="hid" value="999">//隐藏字段//在输入界面看不到,只有在提交的页面才可以看到
<input type="image">//用图片代替普通按扭
<textarea cols="5" rows="5"></textarea>//多行文本框，五行五列的文本域，在写文字的时候不要留空间，不然到浏览器中会显示出来

八.分组标签（盒子标签）

1.块级元素<div></div>(可做其他html元素的容器)，div（division 分割分区）
2.内联元素（行级元素）<span></span>(可做文本的容器)，span（跨度跨距）
3.区别:
①.div是一个块级元素，独占一行.span是行内元素，不独占一行,文字多大就占多大;
②.div可以包含span、段落、图像等，span不可以包含div；
③.span元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width

九.特殊字符

&nbsp(空格),&gt(大于),&lt(小于),&copy(版权@),&reg(商标圈R）

在这里插入图片描述

十.练习


<!DOCTYPE html>
<html>
	<!--html标签可以嵌套,不可以交叉-->
	<head>
		<meta charset="utf-8"/>
		<title>我是标题</title>
	</head>
	<body>
		<form action="http://www.baidu.com">
		<table border="1" bgcolor="#FFC6CA" width="800px" height="300px" align="center" cellspacing="0">
			<tr>
				<td>用户名</td>
				<td><input type="text" name="text1"></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td><input type="password" name="okpassword"></td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input type="text" name="text2"></td>
			</tr>
			<tr>
				<td>性别</td>
				<td><input type="radio" name="sex" value="man" checked="checked">男<input type="radio" name="sex" value="woman">女</td>
			</tr>
			<tr>
				<td>籍贯</td>
				<td>
					<input type="checkbox" name="birthplace" value="hn">河南
					<input type="checkbox" name="birthplace" value="sh">上海
					<input type="checkbox" name="birthplace" value="bj" checked="checked">北京
					<input type="checkbox" name="birthplace" value="nj">南京
				</td>
			</tr>
			<tr>
				<td>爱好</td>
				<td>
					<select>
						<option value="lq" selected="selected">篮球</option>
						<option value="zq">足球</option>
						<option value="pq">排球</option>
						<option value="ymq">羽毛球</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>头像</td>
				<td><input type="file" name="file"></td>
			</tr>
			<tr>
				<td>简介</td>
				<td><textarea value="我是:"></textarea></td>
			</tr>
			<tr>
				<td>生日</td>
				<td><input type="text" name="text3"></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="注册"><input type="reset" value="重置"><input type="button" value="我是按钮"></td>
			</tr>
		</table>
		</form>
	</body>
</html>