【HTML基础】

原创于 2024-05-09 15:41:08 发布 · 449 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

前端专栏收录该内容

4 篇文章

订阅专栏

1.网站建站的流程

(1).域名的注册(网址)
(2).租用空间
(3).网站建设(a.确定网站的主题 b.搜集资料 c.规划网站 d.制作页面)
(4).网站推广
(5).网站维护

2.网页的组成部分

web 标准
结构		表现		行为---->ECMA
xhtml-----css		DOM
xml	  w3c		 ECMAScript	

HTML----相当于我们的毛坯房
CSS----网页的装修队
javascript----只能家居

===================================

3.HTML基础

3.1什么是网页

一个HTML文件,就是一个网页

3.2什么是网站

把所有的网站资源文件(HTML,CSS,JS,图片,视频等)整合到一起的(一个文件夹)

3.3什么是html

HTML 指的是超文本标记语言(Hyper Text Markup Language)

3.4什么是xhtml

XHTML指可扩展超文本标记语言(标识语言)(EXtensibe Hyper Text Markup Language) 是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格.

3.5HBuilder开发工具

ctrl+n: 新建文件     
ctrl+s: 保存
ctrl+r: 运行
ctrl+z: 撤销    
ctrl+c ：复制
ctrl+v :粘贴   
ctrl+x ：剪切    
ctrl+a ：全选
ctrl+shift+F:整理代码
ctrl+/：注释

ps:以上快捷键可能与输入法快捷键有冲突（工具->选项->常规->快捷键中可以自定义快捷键）

3.6建立站点

文件名规范：
   名称全部用： 小写英文字母、数字、下划线的组合， 其       中不得包含汉字、空格和特殊字符； 必须以英文字母开       头
目的：
   规划网站的所有内容和代码 整合资源

3.7Html文档的基本结构

HTML网页：
    <html>说明我们写的是标记语言 
    文件头部(描述区)：
          <head>
          <meta charset=“utf-8”/>编码格式(gb2312/gbk中文编码)
          <title>html5</title>文件标题（显示在状态栏上的内容） </head>
   文件主体(所有要写的内容)：
          <body> 内容 </body>
   </html>

3.8网页的调试工具

（1）PC端调试工具的使用 -浏览器          测试浏览器(chrome,ie,firefox)
（2）移动端调试工具chrome可以测试移动端页面（有很多模拟器）

3.9HTML标记语言的语法

<单词   年龄="30" 爱好="拍戏" 特征=“”></单词>

<单词 年龄="30" 爱好="吃饭"></单词>

1、常规标记： <标记名称 属性1名="属性1值" 属性2名="属性2值" ………… ></标记名>
2、空标记：<标记名 属性1名="属性1值" />
标记有两种形式，我们分别称双标记和单标记,或者叫普通标记和空标记；


说明：
1）写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；
2）标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内
3）一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序；
4）空标记是指没有结束标签的标记，必须使用"/" 关闭 例如：<hr />

3.10标题字体

语法:<h1></h1>

说明:文本标题共有6个(h1---h6)
<h1>一级标题</h1>(唯一性,放网站LOGO)
<h2>二级标题</h2>
....
<h6>六级标题</h6>

3.11字体标记

语法:<p></p>
说明:段落标记,标识一个段落(默认情况下段落与段落之间有段间距)

语法:<i></i> | <em></em>
说明设置文本字体的倾斜效果

语法:<b></b> | <strong></strong>
说明:设置文本字体的加粗效果

语法:<u></u>
说明:设置文本加下划线

语法:<br />
说明:空标记,用来设置字体换行

3.12字体字符

HTML中常用的转义字符:
&nbsp; 不换行空格
&gt; > 右尖括号
&lt; < 左尖括号

3.13列表(ul,ol,dl)

HTML中有三种列表，分别是：无序列表，有序列表，自定义列表

无序列表

<ul>

  <li></li>
  ．．．．
</ul>

有序列表

<ol>

<li></li>
．．．．．．

</ol>


扩展内容
知识扩展----有序列表的属性
1、type:规定列表中的列表项目的项目符号的类型
语法：<ol type="a"></ol>
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（I, ii, iii, iv）。
2、start 属性规定有序列表的开始点。
语法：<ol start="5"></ol>

自定义列表

<dl>

  <dt>名词</dt>

  <dd>解释</dd> (definition   description 定义描述)

．．．．．．

</dl>

3.14超链接和图像

超链接
语法：
<a href=“目标文件路径及全称或者连接地址” title=“提示文本”>链接文本或图片</a>

<a href="#">空链接</a>


说明：
href 部分中url后边跟的是链接页面的路径(包含文件名) title属性,加入这个属性后,当鼠标移动到热点时,则在鼠标下方显示title的内容;
target  属性参数定义了打开链接的目标窗口。
_blank -- 在新窗口中打开链接 页面（会保留原窗口）
_self -- 在当前窗口打开链接页面，此为默认值

插入图片
语法：
<img src=“图片的路径” border="边框" alt="图片替换文本" title="图片标题" width="" height=""/>

<img src="img/timg.jpg" title="风景" width="100" height="60" alt="图片加载失败" />  

说明：
	属性src表示图片的来源（存放路径）
	border属性标识了图片的边框 width和 height设定其图像在页面上显示的宽度和高度。
	title的作用: 鼠标悬停在该图片上时显示的信息，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的，图片标题；
	alt:当图片不显示的时候，提示的信息。用户体验较好

3.15相对路径与绝对路径

相对路径的写法

（同级）
1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名；
---------------------------------------------------
（上级找下级）
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下： 文件夹名/目标文件全称+扩展名；
---------------------------------------------------
（下级找上级）
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下： ../目标文件文件名+扩展名；

3.16路径的写法

1.相对路径链接(上级找下级)
<a href="news/news.htm">北京培训中心</a>
---------------------------------------------------
2.相对路径拼接(下级找上级)
<a href="../news.htm">新闻中心</a>
---------------------------------------------------
3.相对路径拼接(同级链接)
<a href="news.htm">新闻中心</a>
---------------------------------------------------
4.链接到其他站点的链接
<a href=“http://www.baidu.com”>百度</a>

3.17常用元素

语法：<div ></div>
称为区隔标记。作用：设定字、画、表格等的摆放位置。

语法：<span> </span>
说明：文本结点标签 可以是某一小段文本，或是某一个字。

3.18HTML中的注释

<!- -注释的内容- ->

3.19表格属性

语法

<table>
      <tr>
         <td></td>
      </tr>
</table>
---------------------------------------------------
<table border="1" bordercolor="red" cellspacing="0" cellpadding="10" align="center">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>身高</th>
				<th>体重</th>
			</tr>
			<tr>
				<td>tom</td>
				<td>18</td>
				<td>180</td>
				<td>80</td>
			</tr>
			<tr>
				<td>lilei</td>
				<td>19</td>
				<td>183</td>
				<td>82</td>
			</tr>
			<tr>
				<td>hanmm</td>
				<td>18</td>
				<td>170</td>
				<td>60</td>
			</tr>
</table>

注释

注：一对tr表示一行;一对td表示一个单元格（一列）
*表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"

5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式"    取值：left、right、center、 valign=“垂直对齐” top\bottom\middle  
8）合并单元格属性：(td)   合并列： colspan=“所要合并的单元格的列数"   合并行： rowspan=“所要合并单元格的行数”

3.20表单

表单的作用：用来收集用户的信息的;


1、表单框
   <form name=“表单名称” method=“post/get”  action=“路径"> </form>
2、表单控件
   <input type="" />

语法：
<input  type=“”  name=“”  value=“” size=“”  maxlength=" "    />

说明：
Input：标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。
name：属性标识表单域的名称；
type：属性标识表单控件的类型，大概有十几种；
Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。
maxlength：控制最多输入的字符数，
Size：控制框的宽度（以字符为单位）



1)文本框 <input type="text" value="默认值"/>

2)密码框 <input type="password" />

3)提交按钮 <input type="submit" value="按钮内容" />

4)重置按钮 <input type="reset" value="按钮内容" />

5)空按钮 <input type="button" value="按钮内容" />

6）单选按钮组 <input type=“radio” name=“ral” />男 <input type=“radio” name=“ral” checked=“checked”/>(默认选中)女

7）复选框组 <input type="checkbox" name="" /> <input type="checkbox" name="" disabled="disabled" />

*disabled="disabled" (禁用) *  checked="checked"   (默认选中)


表单域下拉列表（菜单）
语法：
<select >  
  <option>下拉选项1</option>
  <option>下拉选项2</option>     …………
</select>

表单域多行文本定义：
语法：
<textarea  name=""  cols=""  rows="" > </textarea>
说明：
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。

3.21post和get的区别

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。