基础介绍html入门

html的基本介绍

一. html的简介：
1.html是什么
html是用来描述网页的一种语言
简单的缩写为html，全拼（Hyper Text Markup Lunguage）
2.html的书写结构

<!DOCTYPE html>
<html>
这个标签是属于html页面的整个属性，知道游览器解析的标签。引入外部文件的标签
<head>
我们需要展示的信息
</head>
</html>

3.html标签的结构特点：
（1）html标签是以尖括号包裹关键字成对出现的，有开始开始标签和结束标签，支持正确的嵌套
（2）大部分标签有属性，格式，
（3）html不区分大小写

二.介绍html中的基本标签
1.文件标签

<html>
<head>
<title></title>:页面的标题
<head>
<boby>
属性：
text:文本的颜色
bgcolor：背景色
background:背景图片
</boby>
</html>

2.排版样式
1.注释样式 
2.换行标签 <br/>
3.段落标签<p></p>
4.水平线标签<hr/>
属性：
width:长度
size:粗度
color:颜色
aligan:对齐方式
尺寸的写法：
像素：px
百分比：占副标签的百分比
3.块标签
行级块标签<div></div>/div+css布局/
行内块标签<span></sapn>/* 进行友好提示*/
4.文字标签
基本文字标签<font></font>
属性：color：颜色
size：大小
face：字体类型
标题标签：<h1></h1><h2></h2>逐渐提升
5.列表标签
1.无序列表<u1></u1>
属性：type：（数字，字母，罗马数字）
start: 数字，代表首项开始位置

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

2.有序列表：<ol></ol>
属性：type：（数字，字母，罗马数字）
start: 数字，代表首项开始位置
6.图形列表<img/>
属性：
scr:图形地址
width：宽度
height：高度
border：变宽
align：对齐方式
alt：图片文字说明
7.链接标签<a></a>
跳转页面地址：href
名称，锚点：name
作用：
（1）页面跳转，调到外网必须添加协议
（2）访问锚点，回到锚点（顶部，底部，中间）
8.表格标签<table></table>
属性：
border：表格边框
width：表格宽度
height：表格高度
align：对齐方式
bgcolor：背景颜色
代表行：<tr></tr>
代表列:<td></td>
属性：
列合并：colspan
行合并：rowspan
<th></th>：相等于列，但内置样式居中
<caption></caption>：表头
表格的作用：
（1）：简单的实现一个表格样式
（2）：进行页面布局
示例

<table>
<td>表格标头
<tr><!--行-->
<captionn>表格标题</caption>
</tr>
</td>
</table>

三.html表单标签
1.form标签:<form></form>
属性：
name:表单名称
action：提交的路径地址
method：提交方式（post和get）
post：提交将数据封装在请求体中，不限制大小
get：将数据加在地址栏的后面，有限制大小
2.input标签：<input type="/">
type属性：
text:普通的文本输入框
name
password：密码输入框
radio：单选按钮
属性：
name：如果想让一组单选按钮互斥，就用指定同意name属性值，需要加value属性值；
checked：默认被选中
checkbox：复选框：
name：组的概念，需要加value的值
checked：默认被选中
file：上传文件的控件
button：普通按钮，没有任何内置的功能
submit：内置功能，点击会按照action地址提交
reset：重置，点击会清空之前填写的内容
image：图片按钮
属性：
src：加载图片
alt：图片的提示文字
hidden：隐藏表单
3.select标签
属性：
name：表单项的名称
option：可选项（下拉菜单之间的级联）
属性：value：表单项的值
selected：默认被选中
4.textarea：文本域标签
属性：
cols：列数
rows：行数
四.html框架标签及其他
1.框架标签
frameset：
属性：
rows：按行划分
cols：按列划分
frameset：
属性：
name：名称
src：加载页面的地址
2.其他标签：

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link>
   <link rel="stylesheet" type="text/css" href="./styles.css">
    href：引入css文件的地址

<script>
   <script type="text/javascript" src=""></script>
    src：js的文件地址

3.特殊字符
&nbsp:空格
&gt:大于号
&lt：小于号
&copy：版权符号
&reg：注册符号

html的基本介绍

猜你喜欢