html新手入门笔记

最新推荐文章于 2022-10-27 09:51:50 发布

小小草帽

最新推荐文章于 2022-10-27 09:51:50 发布

阅读量294

点赞数 3

分类专栏： html 文章标签： html html5 web

本文链接：https://blog.csdn.net/weixin_44623662/article/details/110405143

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.html语法

由一个一个的标签组成，由尖括号组成，例如

<img> <br> <button>

图片、换行、按钮
大多数标签都是成对的，例如

<p></p>  <a></a>

都是有闭合标签的，少数标签没有闭合标签，例如

<br> <img>

2.一个网页的基本结构

<html>
	<head>
		网页文档定义（例如标题，css引入，JS程序引入，视口设置，编码设置，搜索关键字设置）
	</head>

	<body>
		网页的内容
	<body>
</html>

网页文件名称必须是英文字母或数字组成，html不区分大小

<!DOCTYPE html>

//DTD文档定义：告诉浏览器当前的HTML采用的是哪种语法（html4.01，html5，xhtml），这个是html5的定义

<meta charset="utf-8">

//表示当前使用的编码，代表网页的字符编码是哪一种语言。设置网页编码。

3.字符集编码：

Asc码：0~127代表128个字符
GB2312 大陆简体中文  支持6000多个汉字
GBK 同上支持20000多个汉字
BIG5 繁体中文
unicode编码 （全球统一编码）具体是utf-8最常用

4.属性：

属性是对标签的具体设置<标签属性名称=“属性值”>

5.WEB颜色表示的三种方式：

英文单词：例如red、yellow、pink等
16进制表示：#FFFFFF白色~#000000黑色，可以简写为三位，例如#0ce==#00ccee
	常用可以使用：网站配色工具
RGB三原色表示：0~255表达颜色，html不支持，CSS支持

6.html注释：

<!--注释文字内容-->    快捷键ctrl+/

7.语法提示

alt+/

8.特殊字符（实体字符）（替代字符）：

<用&lt;替换
>用&gt;替换
半角空格用&nbsp;替换
“用&quot;替代
&用&amp;替代

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		按钮的标签是&lt;button&gt;
		<br>
		你好&nbsp;&nbsp;&nbsp;&nbsp;世界
		<br>
		<input value="hello&quot;world" />
		<br>
		双引号需要写成&amp;quot;
		<br>
		&copy;
	</body>
</html>

9.文字标签：

<font>设置字号size1~7，默认3，颜色color  ,字体 face
<b><strong>加粗
<i><em>倾斜
<u>下划线
<sup><sub>上标和下标

10.段落标签

<h1>~<h6>标题文字
<p>段落 align 对齐方式 left center right
<br>换行标签

11.超级链接

<a>

href 链接URL地址   #表示空链接（假链接）
target 设置打开方式  默认窗口_self   新窗口_blank  父窗口_parent    最外层窗口_top

12.锚点链接：

链接到网页的一个具体的位置
定义锚点的两种方式：

		1 用<a name ="自定义名称">
		2 用 ID 作为锚点
	链接到锚点：<a href="#锚点名称">

13.id属性和name属性的区别：

	只有少数的元素有name属性，例如a , img, frame, 表单元素， 	id是每个元素都有的
	name允许同一个网页出现相同名称，id在同一个网页中必须是	唯一的

14.图片标签：

<img>

src图片路径
alt替代文字
width 宽度，单位可以是像素或百分比，百分比是外层容器的百分比
height 高度，

15.路径表示法：

物理路径：例如c:\images\1.jpg  //不好用，写死了
绝对路径：完整的url地址，例如 http://www.sohu.com/Images/1.jpg
相对路径：
	相对于当前位置：./当前位置（默认）../上一级位置
	相对于根目录：必须用斜杠开头  例如/images/1.jpg  根目录	是由服务器配置决定的

16.水平线（分割线）

<hr>

width 宽度
size 高度
align 对齐
color 颜色
noshade单一属性，设置无影阴，只需要设置属性名，不需要属性值，代表是和否（true，false）

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<hr />
		<hr width="50%" align="left" color="orange" size="20">
		<hr width="300" size="20"  noshade/>
	</body>
</html>

17.预格式化：

<pre>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>		
	<pre>
		public static void main(){			
			System.out.println("hello,world");
		}
	</pre>
	
	</body>
</html>

把源代码格式直接显示在浏览器中

18.自定义列表：

dl标签：列表
dt标签：标题
dd：内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<dl>
			<dt>web基础</dt>
			<dd>html4</dd>
			<dd>css2.1</dd>
			<dd>css3.0</dd>
			<dd>javascript</dd>
			<dd></dd>
			<dt>web高级编程</dt>
			<dd>jquery</dd>
			<dd>h5</dd>
			<dd>vue</dd>
			<dd></dd>
			<dd></dd>
		</dl>
	</body>
</html>

19.无序列表：

ul：无序列表
li：列表元素

有序列表：ol：有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type = "square">
			<li>javase</li>
			<li>oracle</li>
			<li>javaee</li>
			<li>ssm三大框架</li>
				<ul>
					<li>spring</li>
					<li>springMVC</li>
					<li>mybatis</li>
				</ul>
		</ul>
	</body>
</html>

20.块级元素：（block）：

一个元素默认占据一行，可以甚至宽度高度，例如div p h1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px solid #000;
				width: 200px;
				height: 200px;
				background: orange;
				text-align: center;
				line-height: 200px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div>这是内容1</div>
		<div>这是内容2</div>
		<div>这是内容3</div>
		<div>这是内容4</div>
		<div>这是内容5</div>
	</body>
</html>

21.内联元素：（inline）：

多个元素可以在一行，不能设置宽度高度，例如：a span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				border: 1px solid #000;
				width: 200px;
				height: 200px;
				background: orange;
				text-align: center;
				line-height: 200px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<span>这是内容1</span>
		<span>这是内容2</span>
		<span>这是内容3</span>
		<span>这是内容4</span>
		<span>这是内容5</span>
	</body>
</html>

22.内联块（inline-block）：

多个元素可以在一行，可以设置宽度和高度例如：img button input

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				border: 1px solid #000;
				width: 200px;
				height: 200px;
				background: orange;
				text-align: center;
				line-height: 200px;
				border-radius: 50%;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<span>这是内容1</span>
		<span>这是内容2</span>
		<span>这是内容3</span>
		<span>这是内容4</span>
		<span>这是内容5</span>
	</body>
</html>

23.网页布局就是盒子模式：

所有的盒子就是一个容器（div span p h1 table）
Table布局：都是用表格进行排版
CSS+div：div做盒子模型，配合css排版

24.网页布局原则：

从上向下从左向右从外向内

25.表格标签：

table标签：表格 width height 宽度高度 border 边框 bgcolor 背景颜色 align 对齐 cellpadding内边距 cellspacing外边距
tr：行
td：单元格 width height bgcolor align colspan单元格跨列 rowspan 单元格跨行
thead标签：表格头部部分
tbody标签：表格内容部分
th标签：标题单元格

		table[border=1][width=500]>tr*3>td{内容$}*3   快捷键

合并单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="500">
			<tr>
				<td colspan="2">内容1</td>
				
				<td>内容3</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td rowspan="2">内容3</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				
			</tr>
		</table>
	</body>
</html>

设置表格边框线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>     /* 设置表格边框线 */
			table td,table th {
				border:1px solid #000;
			}
			table {
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<table width="500" border="0" align="center" cellpadding="20" >
			<thead>
				<tr height="35">
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr align="center">
					<td>101</td>
					<td>tom</td>
					<td>27</td>
				</tr>
				<tr align="center">
					<td>101</td>
					<td>tom</td>
					<td>27</td>
				</tr>
				<tr align="center">
					<td>101</td>
					<td>tom</td>
					<td>27</td>
				</tr>
				<tr align="center">
					<td>101</td>
					<td>tom</td>
					<td>27</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

26.表单标签：form

action：设置提交到后台的url地址。
method:设置提交数据的方式（发送网络请求的方式）。
***get：***发送数据的方式是追加在url后面，url？参数名称=参数值&参数名称=参数值不安全，受到url长度的限制，传递的数据量小，默认编码iso-8859-1 西欧编码，传递中文困难。
***post：***发送的数据放到请求正文中，比较安全，传递的数据量几乎无限制，传递中文方便，可以自由设置编码（只有一种情况发送post请求，必须form表单且必须method=post，其他情况一律都是get请求）。

27.单行文本框

<input type="text">

name 文本框名称
id 文本框id
size 宽度（单位字符）
maxlength 限制最多字符
value 默认值
readonly 只读（单一属性）
disabled 禁用（数据不能提交到后台）

28.密码框

 <input type="password">

属性同上

29.文本区域：

<textarea></textarea>

rows 行高
cols 列宽

30.单选：

<input type="radio">

value  内置默认值
name：同一组单选按钮，name必须相同
check 默认选中

可以使用label标签把文字和单选或复选按钮关联在一起

31.复选按钮：

<input type="checkbox">

属性同上

32.列表框：

 <select><option>

selected 默认选中

33.文件域：

<input type="file">

上传文件的表单form必须设置enctype=“multipart/form-data”,表示以二进制文件的形式提交数据

隐藏域：

<input type="hidden">

34.三种按钮：

提交按钮<input type="submit">
重置按钮<input type="reset">
普通按钮<input type="button"> 一般用于调用js程序
<button>按钮文字</button>在表单中默认是提交按钮    <button type="button">普通按钮</button>

34.fieldset标签：

表单轮廓

35.框架结构：

把浏览器窗口拆分，一个浏览器可以同时显示多个网页，一个框架集frameset可以包含多个frame一个完整的框架结构窗口，需要N+1个网页，需要一个框架也本身，框架页本身不能有body

36.框架标签

框架集<frameset>
	cols 列设置（左右拆）
	rows行设置（上下拆）
	frameborder 显示边框，0不显示
框架<frame>
	src 引用网页的路径
	noresize 不允许用户调整边框大小
	name:框架名称
	scrolling：滚动条设置，auto自动  yes必须有，  no 必须没有

37.浮动框架

<iframe>:在网页中嵌入一个窗口

width宽度
height高度

38.滚动字幕：

<marquee>

direction:方向，默认left right up down
Scrollamount:运动的像素数
scrolldelay：延迟时间

小小草帽

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html新手入门笔记

html语法由一个一个的标签组成，由尖括号组成，例如图片、换行、按钮大多数标签都是成对的，例如都是有闭合标签的，少数标签没有闭合标签，例如一个网页的基本结构网页文档定义（例如标题，css引入，JS程序引入，视口设置，编码设置，搜索关键字设置） <body> 网页的内容<body>网页文件名称必须是英文字母或数字组成，html不区分大小 //DTD文档定义：告诉浏览器当前的HTML采用的是哪种语法（html4.01，html5，xhtm
复制链接

扫一扫