Html基础笔记

最新推荐文章于 2024-08-03 22:09:54 发布

NapKinG111

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量742

点赞数 12

分类专栏：前端文章标签： html 笔记前端学习

本文链接：https://blog.csdn.net/2301_80931793/article/details/139100778

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Html超文本标记语言

(HyperText Markup Language)

超文本

指的是网页中可以显示的内容(图片,超链接,视频,)

标记语言

标记–>标签(标注)

例如:买东西的时候—>商品具有标签,看到标签就知道商品的属性(价格,材质,型号等,)

标记语言就是提供了很多的标签,不同的标签具有不同的功能,最终运行时,由浏览器对标签进行解析,最终呈现出不同标签的样子

安装前端开发工具

在dcloud.io中下载HbuilderX并安装

Html基础结构


<!-- 声明html语言的版本 htmls -->
<!DOCTYPE html>
<!-- html标签是标记语言的根标签 -->
<html> 
<!-- head头标签 -->
	<head>
		<!-- 设置字符集标签 -->
		<meta charset="utf-8" />
		<!-- 标题标签 -->
		<title>
			百度一下,你就知道
		</title>
	</head>
	<!-- body是html文件的主体内容标签 -->
	<body>
		<b>
			网页的内容都写在body里
		</b>
	</body>
</html>

标签结构：

闭合标签

<!--闭合标签（封闭的区间）-->
<开始标签>
标签体
</结束标签>

单行标签

<!--换行标签-->
<body>
  <b>
    你好
    <!--换行标签-->
    <br/>
    我叫a
  </b>
</body>

标签的属性

标签的属性：可以通过改变标属性，设置标签显示的格式

属性必须写在开始标签中

属性格式：属性名 = ” 值 “

一个标签中可以写多个属性

<!--设置字体颜色为红色，字体大小为7-->
<font color = "red" size = "7">
  百度
</font>

常用标签

标题标签

<!--align设置文本在网页中的位置-->
<!--center设置居中-->
<h1 align = "center">一级标题</h1>
<!--right设置居右-->
<h2 align = "right">二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

<p>
  p表示一个段落  段落与段落之间有间隔
</p>
<p align = "center">
  一个段落占一行
</p>

列表

无序列表

<!--设置列表前为正方形-->
<ul type =  "square">
  <li>列表项1</li>
    <li>列表项2</li>
  <li>列表项3</li>
</ul>

有序列表

<!--设置数字为罗马数字-->
<ol type = "I">
  <li>列表项1</li>
    <li>列表项2</li>
  <li>列表项3</li>
</ol>

超链接

<!--target = "_blank"在新窗口打开目标网页-->
<a href = "www.bilibili.com" target = "_blank">哔哩哔哩</a>
<!--target = "_self"默认值,在当前窗口打开一个新网页-->
<a href = "www.bilibili.com" target = "_self">哔哩哔哩</a>

图片标签

<!--html中插入的图片都是图片的地址-->
<img src = "图片地址"/>
<img src = "图片地址" border = "1"/>
<a href = "www.bilibili">
  <img src = "图片地址"/>
</a>

特殊符号转义

在网页中有一些符号不能直接显示

需要通过其他的符号进行代替,这些代替的符号就是转义符

&lt ; 是< >是>

&lt;b&gt;------>效果等同于<b>
&nbsp;&nbsp;&nbsp;&nbsp;  等效于四个空格
&reg;是商标符号圈R
&copy;是版权符号©

表格

表格的基本结构

<!--table是表格标签-->
<!--border = 1 表示边框宽度  width = 400表示表格的宽度-->
<table border = "1" width ="400">
			<!--tr表格行-->
			<tr>
			  <!--th是单元格(表头 加粗 居中)-->
			  <!--可以给每个单独的单元格设置宽度,只要给第一列的单元格设置宽度,一整列单元格都会变化-->
				<th wtdth = "150">姓名</th>
				<!--给单元格第一个元素设置高度,一整行的高度都会变化-->
				<th height = "50">语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>
			<!--td是普通单元格-->
			<tr>
				<td>张三</td>
				<td>90</td>
				<td>80</td>
				<td>70</td>
			</tr>
		</table>

上表结果如下

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

表格的属性

width:表格的宽度

height:表格的高度

cellspacing:单个单元格和单元格之间的间距

cellpadding:内容到单元格边框的距离

align: left/center/right 设置单元格内容的水平位置

valign: top/middle/bottom 设置单元格的垂直位置

colspan:跨多列合并,从哪个合并,就在哪个单元格中添加colspan,要记得删除多余的单元格

rowspan:跨多行合并,从哪个合并,就在哪个单元格中添加rowspan,在其他行中删除多余的单元格

表单

<body>
		<!-- action = "后端地址" -->
		<!-- method = "提交数据方式 get/post" -->
		<form action="" method="get">
			<!-- input单行输入框
			type = "text"文本
			name = "自定义的名字" 向后端提交的键
			placeholder = "提示信息"
			readonly = "readonly" 不能修改,但是可以提交
			disabled = "disabled" 禁用组件,不能修改也不能提交 
			type = "password" 密码区域
			type = "radio"单选框 多个选项的name必须相同才能互斥单选
			选择性组件必须要给默认的value,比如选择性别
			type = "checkbox"多选框 多个选项的name相同
			<select name = "">下拉选择框
			<option value = "610100">西安</option>选项
			</select>
			<textarea name = "adress" ></textarea>多行文本域
			type = "file" 文件选择框
			
			<input = "submit"/>提交按钮
			<input type="reset" value="重置"/> 重置按钮,点击后重置表单内容
			<input type="button"/> 创建一个按钮,可以给按钮添加事件来完成某一个操作
			-->
			
			账号:<input type="text" name="account" value="" placeholder="请输入账号"/><br />
			密码:<input type = "password" name="password"/><br />
			<!-- 单选 -->
			性别:<input type="radio" name="gender" value="男"/>男
			<input type="radio" name="gender" value="女"/>女<br />
			<!-- 多选 -->
			课程:<input type="checkbox" name="course" value="java"/>java
			<input type="checkbox" name="course" value="c++"/>c++
			<input type="checkbox" name="course" value="mysql"/>mysql<br />
			<!-- 选择框 -->
			籍贯:<select name = "province">
				<option value="610100">西安</option>
				<option>咸阳</option>
				<option>汉中</option>
			</select><br />
			<!-- 文本框 -->
			地址:<textarea name = "address" cols="30" rows="5"></textarea><br />
			<!-- 附件 -->
			附件:<input type="file"	name="file"/><br />
			<!--  -->
			<!-- submit提交按钮-->
			<input type="submit" value="保存"/>
			<!-- 重置按钮 -->
			<input type="reset" value="重置"/>
			<!-- 按钮 -->
			<input type="button" value="登录" onclick="alert(1111)"/>
		</form>
	</body>

创建的表单内容如下

在这里插入图片描述

NapKinG111

关注

12
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Html基础笔记

标记语言就是提供了很多的标签,不同的标签具有不同的功能,最终运行时,由浏览器对标签进行解析,最终呈现出不同标签的样子。rowspan:跨多行合并,从哪个合并,就在哪个单元格中添加rowspan,在其他行中删除多余的单元格。colspan:跨多列合并,从哪个合并,就在哪个单元格中添加colspan,要记得删除多余的单元格。例如:买东西的时候—>商品具有标签,看到标签就知道商品的属性(价格,材质,型号等,)指的是网页中可以显示的内容(图片,超链接,视频,)标签的属性：可以通过改变标属性，设置标签显示的格式。
复制链接

扫一扫

专栏目录