前端学习笔记 - html

文章目录

    • 标签
    • 文档结构
    • 注释
    • head标签
      • title标签
      • meta标签
        • http-equiv属性
        • name属性
      • 其他标签
    • body标签
      • 常用标签1
        • 标题标签 - h1~h6
        • 段落标签 - p
        • 超链接标签 - a
        • 列表标签 - ul, ol
        • 盒子标签 - div
        • 图片标签 - img
        • 其他标签
          • 换行标签
          • 分割线
          • 特殊符号
      • 常用标签2
        • 表格
        • 表单
    • 标签分类

标签

1. <> 包起来的都是标签, 如: 

2. 写法有两种 1.

2. 3. 标签可以嵌套 4. 标签内不区分大小写, 即

是一样的


文档结构



<html>
	<head>
		头部信息内容
	head>

	<body>
		页面主体内容
	body>
html>


注释



head标签

<head lang='en'>
	<title>标题信息title>
	<meta charset='utf-8'>
	<link>
	<style type='text/css'>style>
	<script type='text/javascript'>script>
head>

title标签

显示在浏览器标签栏的内容

meta标签

http-equiv属性

name属性


其他标签

link:
	 
	
	
	
style:
	
	
script:
		
	

body标签

常用标签1


标题标签 - h1~h6

h1

h2

h3

...

段落标签 - p

<p>这是个段落p>

超链接标签 - a

<a href='#' target='_blank' title='tips'>超链接文字a>

1. href: 超链接地址
	1. href='javascrip:;'表示什么都不做
2. target
	1. _blank: 在新标签打开新的地址
	2. _self: 在本标签打开新的地址
3. title: 鼠标悬停时显示信息

列表标签 - ul, ol

通常和li标签连用
ul 无序列表
<ul type='circle'>
	<li>1li>
	<li>2li>
	<li>3li>
ul>

ol 有序列表
<ol type='disc'>
	<li>1li>
	<li>2li>
	<li>3li>
ol>

type: 列表标识
	1. disc 实心圆
	2. circle 空心圆
	3. square 实心矩形
	4. none 不显示标识

盒子标签 - div

将html页面分块 方便布局
<div>块1<div>
<div>块2<div>
<div>块3<div>

图片标签 - img

图片加载失败时显示

其他标签

换行标签
分割线
特殊符号
内容 代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
版权 &copy;
注册 &reg;

常用标签2

表格

table: 表格
thead: 表格头
th: 表格头(默认加粗居中)

tbody: 表格体
tfoot: 表格底
tr: 表格行
td: 主体单元格

rowspan: 合并行(竖着合并)
colspan: 合并列(横着合并)

表单

1. 属性
	1. action: 定义提交地址
	2. method: 定义提交方式
		1. get
			默认, 明文提交, 安全性低
			大小限制, 最大为2k
		2. post 
			隐式提交, 安全性高
			无大小限制
	3. enctype
		1. 编码类型
		2.  application/x-www-form-urlencoded
			允许普通字符, 特殊字符, 无法提交文件
		3. multipart/form-data
			允许提交文件 
		4. text/plain
			只允许提交普通字符. 特殊字符和文件无法提交
2. 表单控件
	1. textarea文本域
		作用:
			允许用户录入多行数据到表单控件中
		属性:
			cols: 指定文本域列数
			rows: 指定文本域行数
	2. select和option选项
		select:
			size>1, 则为滚动列表, 否则为下拉选项
			multiple设置多选, 该属性出现在
			2. text
				明文显示用户输入的数据
				
			3. password
				密文显示用户输入的数据
				
			4. radio
				单选按钮
				
			5. checkbox
				多选按钮
				
			6. submit
				提交按钮
				
			7. file
				上传文件
				
		2. value
			控件的值, 就是提交给服务器的数据
		3. name
			空间的名称, 服务器用
		4. disabled 
			出现在标签中, 表示禁用
	4. label功能 

标签分类

1. 行内元素
	1. display: inline
	2. 和其他元素在一行内
	3. 宽,高,边距不可设置, 宽高即是它包含的文字或图片的宽高
	
	, , 
, , , ,
语文成绩 数学成绩
张三 90 99
李四 88 90
成绩单
,
,
  • 3. 行内块元素 1. display: inline-block 2. 和其他元素在一行内 3. 宽,高,边距可设置 ,

    你可能感兴趣的:(H5)