html基础

最新推荐文章于 2024-12-16 16:52:23 发布

lenyu__

最新推荐文章于 2024-12-16 16:52:23 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

文章标签： HTML html基础 html标签

本文链接：https://blog.youkuaiyun.com/ychhh/article/details/84871257

一、html

1.1什么是html

html全称超文本标记语言不是编程语言而是一种标记语言，使用标记标签来描述网页。

三个要点：词汇语法语义

1.2html的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

标签	语义	语法
	HTML（网页）文件开始及结束	1. 成对出现 2. 分别位于文件的开始和结束位置
undefined	指明网页文件的头部	1. 成对出现 2. 嵌套于 html 标签内 3. 位于 body 标签之上
	定义页面有关信息，如页面编码、关键词、页面描述	1. 单标签，必须在 head 标签内 2. 利用属性值进行设置
	在浏览器标题栏显示的文档标题	1. 成对出现 2. 嵌套于 head 标签内
	指明网页文件体部	1. 成对出现 2. 嵌套于 html 标签内 3. 位于 head 标签之下

1.3html标签

html	head	body	title
br	h1	p	img
a	ul	ol	li
table	tr	th	td
form	input	select	option
textarea	span	div	…….

标签的分类：

双标签：代表标签作用范围

单标签：无需表达范围，仅在标签出现处有效

几种标签的用法：

<a herf="" target="_blank _self"></a>
<!--src为存储位置,alt为替换文本"
<img src="images/logo.gif" alt="我是logo" />
<ol>
	<li>有序列表</li>
	<li></li>
	<li></li>
</ol>
<ul>
	<li>无序列表</li>
	<li></li>
	<li></li>
</ul>
<table>
border：        表格边框的宽度（pixels）
bordercolor：表格边框的颜色
background：表格背景图
bgcolor：       表格背景颜色
cellpadding :  单元边沿与其内容之间的距离（pixels）
cellspacing :   单元格之间的空白（pixels）
width :      规定表格元素的宽度（pixels或%）
height :     规定表格元素的高度（pixels或%）
align：      表格的对齐方式（left  center  right）

<tr></tr>
<th></th>
<td></td>
</table>
文本框
<form>
     <input type = "text" name = "名称" value = "文本" />
</form>
密码框
<form>
     <input type = "password" name = "名称" value = "文本" />
</form>
单选框
<form>
<input type = "radio"  value = "Male"      name = "sex"  checked />男
<input type = "radio"  value = "feMale"   name = "sex"  />女
</form>
复选框
<form>
<input type = "checkbox"  value = "good1"  name = "goods" />    I have a bike 
<input type = "checkbox"  value = "good2"  name = "goods" />     I have a car 
</form>
文件控件
<form>
     <input type = "file" name = "files" />
</form>
按钮
<form>
     <input type="submit" value="提交" name="sub" />
     <input type="reset"    value="重置"  name="res" />
     <input type="button" value="按钮"  name="but" />
</form> 
多行文本框
<form>
    <textarea  name = "cat " rows = "3" cols = "30"> 
     The cat was playing in the garden.
    </textarea>
 </form> 
下拉列表
<form>
     <select name = "class">
          <option value = "one"  selected> 软件一班 </option>
          <option value = "two"> 软件二班 </option>
          <option value = "three"> 软件三班 </option>
       </select>
</form>