w3c : 万维网联盟组织 用来制定web标准的机构(组织)
web标准 : 制作网页要遵循的规范
web标准规范的分类 : 结构标准 表现标准 行为标准
结构 : html 表现 : css 行为 : javascript (js)
HTML : 指的是超文本标记语言 (Hyper Text Markup Language), 2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成 .
XHTML : 指可扩展超文本标记语言(标识语言)(EXtensible HyperText Markup
Language)。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
HTML5 : 指的是HTML的第五次重大修改(第5个版本)
XML : 可扩展标记语言。(主要用于数据的处理与表达)了解。
单标签:
<标签名 属性=属性值 属性=属性值 />
双标签: 、、、
<标签名 属性=属性值 属性=属性值> 任何内容
包含关系:像head标签和title标签
平行关系:像head标签和body标签
DOCTYPE、doctype、DocType都是一样的, 但是一般的标签我们都小写.
<html>
<head>
<title>www.baidu.com是百度官网title>
<meta charset="utf-8" />
<base href="http://www.w3school.com.cn/tags" />
head>
<body>
hello world
body>
html>
<h1>一级标签h1>
<h2>二级标签h2>
<h3>三级标签h3>
<h4>四级标签h4>
<h5>五级标签h5>
<h6>六级标签h6>
注意:
注意:html里面的文本中直接打的空格和回车是无效
<p>段落文本内容p> :一个p标签的内容就是一个段落,段落间会多空出一行
<br/> :强制换行,换行后不会多空出一行
:代表一个空格
<p> html是超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容 p>
<p> html是超文本标记语言,<strong>标准通用标记语言下的一个应用strong>。 “超文本”就是指页面内可以包含图片、<strong> <em>链接em> strong>,甚至音乐、程序等非文字元素。<i>超文本标记语言i>的结构包括“头”部分(英语:Head)、<font color="red">和“主体”部分font>(英语:Body),其中“头”部提供关于网页的信息,<br/>“主体”部分提供网页的具体内容 p>
size:字体大小
color:颜色 可以是颜色对应的英语单词、RGB的十六进行值(255,0,0)-> #ff0000 (0,255,0)->#00ff00
<font size="4" color=#541D1D face="幼圆">html是:超文本标记语言font>
加粗:
<b>加粗内容b>
<strong>加粗内容strong>
倾斜:
<i>i>
<em>em>
水平线:
<hr/>
注意 : 所有的列表标签都是配合li标签使用的
<ul>
<li>数学li>
<li>语文li>
<li>英语li>
ul>
<ol>
<li>数学li>
<p>数学是一门令人头疼的学科p>
<li>语文li>
<li>英语li>
ol>
<dl>
<dt>水果:dt>
<dd>葡萄dd>
<dd>苹果dd>
<dd>西瓜dd>
<dt>蔬菜:dt>
<dd>白菜dd>
<dd>萝卜dd>
<dd>茄子dd>
dl>
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的的图片必须放在站点下
1.title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML
的绝大多数标签都支持title属性,title属性就是专门做提示信息的.
2.alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它
会直接输出在原本加载图片的地方。
语法: <a href="目标文件路径及全称/链接地址">链接文本/图片a>
<a href="https://blog.csdn.net/hanbo6" target="_blank">韩波的博客a>
属性: target:页面打开的方式
_self(默认值):在当前页面里面打开链接
_blank:在新的窗口中打开链接
作用: 显示数据
组成: table > tr > td = td
<table>
<tr>
<td>内容td>
<td>内容td>
.........
tr>
table>
(1).数据表格的相关属性
width="表格的宽度"
height="表格的高度"
border="表格的边框"
bgcolor="表格的背景色"
cellspacing="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的空隙"
bordercolor=”表示边框颜色”
水平对齐方式:align="left/center/right"
(2).合并单元格属性:
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;
表单的作用:用来收集用户的信息的;
a.表单框
<form name="表单名称" method="post/get" action="">form>
b.文本框
<input type="text" placeholder="请输入用户名" value="默认值" maxlength="10"/>
c.密码框
<input type="password" />
d.提交按钮
<input type="submit" value="按钮内容" />
e.重置按钮
<input type="reset" value="按钮内容" />
f.单选框/单选按钮
<input type="radio" name="ral"/>
<input type="radio" name="ral" />
注意:单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。
g.复选框
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" />
(disabled="disabled" :禁用)
(checked="checked" :默认选中)
h.下拉菜单
<select name="">
<option>菜单内容option>
select>
selected:设置默认选中
<optgroup label="四川省">设置分组
例如:
<select>
<optgroup label="四川省">
<option>成都option>
<optionselected="selected">内江option>
<option>广安option>
<option>德阳option>
optgroup>
<optgroup label="新疆">
<option>伊犁option>
<option>吐鲁番option>
optgroup>
select>
i.多行文本框(文本域)
<textarea name="textarea" cols="字符宽度" rows="行数">textarea>
j.按钮
<input name="'" type="button" value=“按钮内容” />
(他和submit的区别是 ,submit是提交按钮 起到提交信息
的作用,button只起到跳转的作用,不进行提交。)
<div>div>
文档区域,文档布局对象
div是区块,分割的意思
作用:用来把页面划分出不同的区域
div标签是无语义标签,可以用来做分组用。分组后一个div对应的组会占单独的一行.
<span>span>
文本结点(某一小段文本,或是某一个字)
span是无语义的标签,用来分组的。一个span不会单独占一行.
例如:
<p>他有双<span style="color:blue">蓝色span> 的眼睛。p>