HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41698013/article/details/79235899

1:文本形式

<html>

<head>

</head>

<body>

</body>

/html>

编译环境：记事本（最初使用，等熟练后可下载安装标本编译器写代码），运行方式：记事本上写好代码后，文件-另存为-文件名.html-文件形式（所有文件）-保存，在再保存的位置去打开，即可看到一个书写的网页。

基本语法：

<title></title>网页主题，<body></body>放置内容，<p></p>段落，<br></br>强制换行，<b></b>粗体，<i></i>斜体，<u></u>下划线，<s></s>删除线，<sup></sup>上标，<sub></sub>下标，<h#></h#>#表示1~6的数字（表示字体大小，数字越大，字体越小）。

字体大小编排：<font size=”#”></font>(#表示1~7的数字，数字越大，字体越大)

字体颜色：<font color=”red”></font>红色，<fontcolor=”#cccccc”></font>虚无黑色。

标题大小<h#></h#>

逻辑字体：<em></em>强调文字，<strong></strong>字体加重，<code></code>显示编程代码，<samp></samp>显示示例文字，<kbd></kbd>显示键盘文字，<small></small>缩小文字，<big></big>放大文字，<font></font>插入。

文字布局

换行控制：文字一<p>文字二（文字一与文字二之间隔一行），<br/>也表示空一行。

不换行控制：<nobr></nobr>只要是标记在里面的，无论多长，都在一行里。

文字对齐：不会单独使用，往往配合某些标记使用，例如：<p align=”#”></p>（#代码表示方位，left,right,center）,align可以放在<p></p>,<div></div>中。<center></center>也可以表示居中。

列表：无序列表<ul><li> </li></ul>（有点点）,有序列表<ol><li></li></ol>(有数字序号)

其他方式修饰文本

欲格式化文本<pre></pre>将代码看作文本，直接输出该部分内容，<xmp></xmp>将代码进行解释

2：图像有关语法

插入图像<img src=”cn.jpg”>（该标记放在<body></body>中）

设置图像宽度<img width=”200px” src=”cn.jpg”>

图像无法显示时就会向用户提供交互文本信息<img src=”cn.jpg” alt=”风景”f>

控制图像大小<img src=”cn.jpg” alt=”风景” width=”400px”height=”300px”>

图像的链接<a href=”http://www.baidu.com(超链接的地址)”><imgsrc=”cn.jpg(照片的名字)” alt=”风景”></a>

图像和文字对齐<img src=”cn.jpg” alt=”风景” align=”#”>(#表示方向，可以是top,right,bottom,left,middle,文本与图像的对齐方式)

图像的边框<img src=”cn.jpg” alt=”风景” border=”10px”>(10表示边框大小)

图像映射图<map></map>区域,<area>形状，后面紧跟shape,shape后面接rect,circle,poly中的一个，coords里面是像素，href是要链接的地址。

3：超级链接

最简单的文字链接<a href=”http://www.163.com”>163网站</a>

超链接网页的打开方式:

<a href="http://www.163.com"target="_blank">163网站--新浏览器打开</a><br>

<a href="http://www.163.com"target="_parent">163网站--父窗口中打开</a><br>

<a href="http://www.163.com"target="_self">163网站--同一框架或窗口中打开</a><br>

链接的注释<a herf="http://www.163.com" title="网易网站">163网站</a>，文本链接用title表示注释，而图像中用alt表示

图片链接<a herf="http://www.163.com"><imgsrc="cn.jpg"></a>

锚点链接:命名锚<a name=”锚点名”>锚点链接</a>，文字链接<a href=”#链接地址”>单击到连接地址</a>

邮箱地址链接<a href=”mailto:2926232924@qq.com”>作者的邮箱</a>

相对路径：这个文件所在位置与其他文件或文件夹的关系<a href=”index.html”>index.html</a>直接引用文件

<ahref=”../index.html”>index.html</a>引用上一级文件，<ahref=”../../index.html”>index.html</a>引用上上一级文件

绝对路径指带有域名文件的完整路径

超级链接单元链接实例：

4：表单

设置空的表单<form></form>,表单中有两个属性会常用到，action,method.action表示表单提交后发送的URL地址，发送的方式用method表示，可选择的擦书有GET(传输量比较小)和POST(传输量比较大)，<inputtype=”#”>（#可以是text文本,password密码,checkbox多选框,radio单选框,hidden隐藏,submit提交按钮,reset重置按钮）

<input type=”text”>文本，<inputtype=”password”>密码

<input type=”radio” name=”#”>￥单选框，<inputtype=”checkbox” name=”#”>￥复选框，#表示选项集的名称，￥表示选项名称，选中的项目用#+checked表示

<select><option>#</option></select>下拉列表，#表示下拉列表中的项目，可以多项option，<option selected>#</option>表示该项已选中。

文本域<textarea></textarea>，比如<textareaname=book rows 6 cols=60></textarea>(rows表示显示的行数，cols表示显示的列数)

按钮<input type=”submit” value=”提交”>

5：表格

基本语法<table></table>,<tr></tr>表示行每出现一个表示表格的一行,<th></th>表示表头显示列,<td></td>表示表元显示每个方格，border表示边框

跨多行表元<table rowspan=3></table>

跨多列表元<table colspan=3></table>

<table border=1 width=300 height=200>边框大小，表格宽度，表格高度，

表格内文字对齐：<tr align=”#”></tr>,<thalign=”#”></th>,<td valign=”#”></td>,#表示left,center,right

表格在网页中对齐<table align=#></table>

6:框架：<frameset></frameset>,<frame></frame>

垂直分栏（列）<frameset cols=”50,50”>

水平分栏（行）<frameset rows=”50,50”>

不可调节框架大小<frame noresize=”noresize” src=”http://www.hao123.com”>

当浏览器不支持框架是用<noresize>浏览器不支持框架</noresize>

设置框架边框<frameset frameborder=#>,#表示框架大小，0和no表示没有边框，

设置滚动条<frame src=”http://www.hao123.com” scrolling=”no”>,no表示无滚动条，不进行说明时用默认的auto，网页自带的滚动条

导航框架<frame src=”http://www.sina.com” name=”myframe”>

导航链接<a href=”http://www.sina.com.cn”target=”myframe”></a>

内联框架插入在<body></body>之中，<iframe src=”http://www.sina.com.cn” />

7：移动的字体和图片,<marquee></marquee>,在<>body></body>中放入<marquee></marquee>,输入文字表示要移动

文字的移动方向<marquee direction=”#”>,#表示left,right

图片的移动<marquee></marquee>中加入图片<img src=”#”>,设置图片像素<marqueewideth=”600px” height=”200px” bgcolor=”#cccccc”（背景颜色，#cccccc表示黑色，red表示红色）>

设置对象移动：

文本移动的方向<marquee direction=#></marquee>,#可以是left rightup down

文本的滚动循环<marquee direction=left behavior=# loop=$></marquee>,#可以是scroll（循环移动），slide（只移动一个回合），alternate（来回移动），$可以是数字表示循环次数。

文本的移动速度:<marquee scrollamount=#></marquee>#表示数字（加快速度），<marqueescrolldelay=#></marquee>#表示数字（延时速度），<marqueewidth=200 height=200 bgcolor=pink direction=down></marquee>设置移动区域。

8：网页多媒体 <embedsrc=url>,url表示多媒体的路径,loop表示播放次数，autostart表示是否自动播放

隐藏面板的设置<embed src=url hidden=”#”>#可以是true表示隐藏，false表示不隐藏

设置面板大小<embed src=”空空如也.MP3” width=# height=#>

对齐方式 align,center居中,left居右左,right，居右,top，控制面板的顶部与当前中的最高对象的顶部对齐,bottom控制面板的地步与当前行中的对象对其,baseline控制面板的地步与文本的基线对齐,texttop控制面板的顶部与当前行的最高的文字顶部对齐,middle控制面板的中间当前行的基线对齐,absmiddle控制面板的中间与当前文本或对象的中间对齐,absbottom控制面板的底部与文字的底部对齐

HTML学习总结