HTML 基础

来源：互联网发布：python for 无限循环编辑：程序博客网时间：2024/06/06 21:40

一、HTML简介

HTML是什么

HTML就是描述网页的一直语言

HTML指的是超文本标记(Hyper Text Markup Language)
HTML不是一种编程语言,而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)
HTML使用标记标签来描述网页

超文本标记语言

语言:人与计算机交互的工具
标记:就是标签,不同的标签就会有不同的效果和功能
超文本:超越普通文本的范畴,比普通文本强大,可以实现普通文本不能实现的效果,包含超链接的文本就是超文本

HTML的作用

HTML可以书写网页,展示信息
注意:所有的浏览器内置HTML解析器,对HTML标签代码进行解析

HTML的书写规范

<html>    <head></head>    <body>        今天是10月1日,<br/>        然而我却在<font color="green" size="5">敲代码</font>!!!<html>

显示效果 :

今天是10月1日,

然而我却在敲代码!!!

HTML有一个良好的结构
HTML的标签是以尖括号包裹关键字成对出现有开始标签有结束标签支持正确的嵌套
空标签,又叫自闭标签
大部分标签都存在属性属性的格式:属性 = “属性值” 多个属性之间用空格隔开
HTML不区分大小写建议使用小写

二、HTML的基本标签

结构标签

<title>结构标签</title><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 rel="stylesheet" type="text/css" href="./styles.css"><!--     结构标签:        <html>:html的根标签        <head>:网页的标题:<title>结构标签.html</title>               和SEO搜索优化相关 :                <meta http-equiv="description" content="this is my page">                <meta http-equiv="content-type" content="text/html;charset=UTF-8">                和编码相关:                <meta http-equiv="content-type" content="text/html;charset=UTF-8">                指导浏览器对html解析时使用的编码格式                引入css文件        <body>:            属性:text:body中文本的颜色                 bgcolor:背景颜色                 background:背景图片--></head><body text="red" bgcolor="black" background="../imagess/bg.jpg">This is my HTML page. <br/>

排版标签

<!--     排版标签        换行标签:<br/>        水平线标签:<hr/>            属性:width:线的宽度                 align:水平对齐方式 默认居中                    属性值:left center right                 size:线的高度                 color:颜色        段落标签:<p> 特点:段与段之间有空行 占据一整行                属性:align:对齐方式 默认居左对齐                    属性值: left center right--> 卧春（我蠢）<br/> 陆游<br/> <hr width="200" align="left" size="5" color="red"/>暗梅幽闻花，（俺没有文化，）<br/>卧枝伤恨底。（我智商很低。）<br/>遥闻卧似水，（要问我是谁，）<br/>易透达春绿。（一头大蠢驴。）<br/><p align="center">岸似绿，（俺是驴，）<br/>岸似透绿，（俺是头驴，）<br/></p>岸似透黛绿。 （俺是头呆驴。）<br/>

显示效果 :

卧春（我蠢）
陆游

暗梅幽闻花，（俺没有文化，）
卧枝伤恨底。（我智商很低。）
遥闻卧似水，（要问我是谁，）
易透达春绿。（一头大蠢驴。）

岸似绿，（俺是驴，）
岸似透绿，（俺是头驴，）

岸似透黛绿。（俺是头呆驴。）

块标签

<!--    块标签:        <div>:行级快标签            属性:align:div内的内容的对齐方式        <span>:行内块标签    作用:div:div+css的网页布局         span:进行网页的友好提示--><div align="center">div1</div><div>div2<div/><span>span1</span><span>span2</span>

显示效果 :

div1

div2

span1span2

文字标签

<!--    文字标签        <font>:基本文字标签            属性:color:颜色                 size:大小                    最大:7                    最小:1                    默认:3                 face:文字类型        <h1>-<h6>:标题标签            内置样式:字号 加粗 字体            随之数的变大 字号变小--><font color="red" size="2" face="黑体">字体标签</font><br/><font color="red" size="3" face="黑体">字体标签</font><br/><font color="red" size="4" face="黑体">字体标签</font><br/><font color="red" size="5" face="黑体">字体标签</font><br/><font color="red" size="6" face="黑体">字体标签</font><br/><font color="red" size="7" face="黑体">字体标签</font><br/><font color="red" size="8" face="黑体">字体标签</font><br/><font color="red" size="9" face="黑体">字体标签</font><br/><font color="red" face="黑体">字体标签</font><br/><h1>标题标签</h1><h2>标题标签</h2><h3>标题标签</h3><h4>标题标签</h4><h5>标题标签</h5><h6>标题标签</h6>专题:颜色和尺寸的写法<body bgcolor="#E7AE10">    <!--        颜色的写法:            单词:red black green blue yellow            RGB: 三原色 rgb(0,0,0) 0-255            16进制:#000000 #ffffff #cccccc #ccc        尺寸的写法:            像素: px 200px                百分比: 50% 占据父级元素的百分比            区别:百分比会随着父级元素尺寸的变化而变化    -->    <hr width="200px" align="left" size="5" color="red"/></body>

显示效果 :

字体

字体

字体

字体

字体

字体

字体

字体

字体

标题

列表标签

<!--     列表标签        <ul>:无序列表            属性:type:列表项前的小标记            属性值:disc square circle            <li>:代表列表项        <ol>:有序标签            属性:type:列表签的顺序标记                 start:从哪个位置开始 值:就是数字            属性值: 1 A I i a            <li>:代表列表项        作用:实现简单的清单            可以实现横向菜单和纵向菜单<ul type="circle">    <li>无序列表</li>    <li>无序列表</li>    <li>无序列表</li>    <li>无序列表</li></ul><hr/><ol type="a" start="2">    <li>无序列表</li>    <li>无序列表</li>    <li>无序列表</li>    <li>无序列表</li></ol>

显示效果 :

无序列表
无序列表
无序列表
无序列表

无序列表
无序列表
无序列表
无序列表

图形标签

<!--    图形标签        <img>            属性:src:图片的路径                width:宽度                height:高度                border:表框                alt:图片的文字说明                align:对齐方式                    属性值:    left right                              top middle bottom 相邻内容的位置--><img align="top" src="../imagess/demo.jpg" width="520px" height="350px" border="4" alt="嘿嘿嘿"

链接标签

<!--    链接标签        <a>            属性:href:页面跳转的路径                name:a标签的名称 锚点                targrt:打开方式                    属性值:_blank _self                注意:如果href跳转的是互联网上的资源的话,必须加协议            作用:实现跳转                定位锚点--><a href="http://www.baidu.com" target="_blank">百度</a><br/><a href="图形标签.html" target="_blank">mm</a><br/><a href="www.baidu.com" target="_blank">百度2</a><br/><a name="top"></a><br/><a href="#top">return top</a><br/>  <a href="#middle">return middle</a><br/>

显示效果 :

百度

mm

百度2

return top

return middle

表格标签

<!--    表格标签        <table>            属性:border:边框                width:宽度                align:对齐方式 left center right                    bgcolor:背景颜色            <tr>:表格中的行                <td>:代表行中的单元格                    属性:colspan:列合并                        rowspan:行合并                <th>:代表行中的表头单元格        作用:实现一个简单的表格            可以实现页面布局--><table border="1" width="50%" align="center" bgcolor="red">    <caption>我是表格1</caption>    <tr>        <th>1-1</th>        <th>1-1</th>        <th>1-1</th>    </tr>    <tr align="center">        <td>2-1</td>        <td>2-2</td>        <td>2-3</td>    </tr>    <tr>        <td>3-1</td>        <td>3-2</td>        <td>3-3</td>    </tr></table><table border="1" width="50%" align="center" bgcolor="green">    <caption>我是表格2</caption>    <tr>        <th>1-1</th>        <th>1-1</th>        <th>1-1</th>    </tr>    <tr align="center">        <td rowspan="2">2-1 3-1</td>        <td colspan="2">2-2 2-3</td>    </tr>    <tr>        <td>3-2</td>        <td>3-3</td>    </tr></table>

显示效果 :

我是表格11-11-11-12-12-22-33-13-23-3我是表格21-11-11-12-1 3-12-2 2-33-23-3

三、表单标签

<form>:仅仅代表一个表单    属性:name:表单名称        action:表单提交地址 将表单数据提交给服务器        method:提交方式 默认的提交方式get                      提交方式:get post            form.html?username=yuf&password=123&gender=male$hobby=basketball&hobby=java&city=nt            get提交格式:使用?将表达数据接在地址后面 显示在地址栏中            post提交:会将表单的数据封装到http请求中        问题:get提交与post提交的区别?        1、get将数据在地址栏中显示post不显示        2、get提交相对不安全post相对安全            3、get提交有大小限制 大小依据浏览器的不同post提交没有大小限制<input>    属性: name:表单项的名称         value:表单项的值         type:表单的类型 不同属性值会呈现出不同的表单项            属性值:                text:普通的文本输入框                password:密码框 特点:掩码                radio:单选按钮 注意 如果实现单选效果name值必须相同 代表一组                      checked="checked":默认被选中                file:上传文件                submit:提交按钮 内置提交功能                button:普通按钮 没有内置功能 一般结合js使用                reset:充值按钮 就是内置恢复表单默认值的功能                image:图片按钮 提交按钮 内置提交功能 src:加载图片<select>: 代表一个下拉框选项 仅仅代表下拉选项        属性:            name:select的名称        自标签:            <option>:代表select下的一个选项            属性:value:选项的值                selected="selected"默认被选中            注意:在数据提交时 是select的name属性值灯具被选中的option的value的值<textarea>:文本域    属性:        clos:列数         rows:行数        默认内容卸载textarea的标签体中

四、框架标签

<frameset rows="120,*">    <fram name="top" src="top.html">    <frameset cols="150,*">        <fram name="left" src="left.html">        <fram name="right" src="right.html">    </frameset></frameset>

五、特殊字符

 &nbsp; 空格 &gt;   大于号 &lt;   小于号 &cope; 版权符号 &reg;  注册商标

0 0