html

最新推荐文章于 2025-05-16 14:01:28 发布

大华1号

最新推荐文章于 2025-05-16 14:01:28 发布

阅读量286

点赞数

分类专栏： web基础文章标签： html web前端开发

web基础专栏收录该内容

15 篇文章

订阅专栏

1.学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。

（1） HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

（2） CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

（3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

2.html文件的结构
代码讲解：

（1） <html></html>称为根标签，所有的网页标签都在<html></html>中。

（2）<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

（3）在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

①基本标签一：
<hx>:标题
<em>,<strong>:都表示强调，前者为斜体，后者为加粗
<span>:为文字设置单独样式
<q>:短文本引用，原文中不需添加双引号
<blockquote>:长文本引用，浏览器对<blockquote>标签的解析是缩进样式
<br/>:回车换行，在 html 中是忽略回车和空格的。与其它标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />
 :一个空格
<hr/>:分割横线，默认为灰色，样式线条比较粗
<address>:联系地址，默认为斜体
<code>,<pre>:前者可加入单行计算机专业的编程代码，后者可加入多行，当然，它不止可以加入代码，也可以加入其它的内容

②基本标签二：

<ul> <li>信息</li> <li>信息</li> ...... </ul>：无序标签，如新闻列表的实现

<ol> <li>信息</li> <li>信息</li> ...... </ol>:有序标签，如图书排行榜的实现

<div>:划分出独立的逻辑部分，相当于一个容器，可通过id属性给它命名

<table>:表格（table、tbody、tr、th、td）
当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
<tr>:表格的一行，所以有几对tr 表格就有几行。
<th>:表格的头部的一个单元格，表格表头。
<td>:表格的一个单元格，一行中包含几对<td>，说明一行中就有几列。

<table summary="表格简介文本">:添加摘要
<table> <caption>标题文本</caption> <tr> <td>…</td> … </tr> … </table>:添加标题，注：以上添加的摘要和标题都是不会显示在浏览器中的

③基本标签三：

<a>:链接网址，如<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
链接邮箱，注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。如：<a href="mailto:yy@imooc.com?subject=主题名称&body=邮件内容">

<img>:插入图片，<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

3.与浏览器交互，表单标签
网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法一：<form method="传送方式" action="服务器文件">
action表示浏览者输入的数据被传送到的地方

注意:
（1）所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。
（2）method:post/get的区别这一部分内容属于后端程序员考虑的问题。

补充：
Form中的get和post方法，在数据传输过程中分别对应了GET和POST方法。
二者主要区别如下：
（1）Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
如下形式：
http://www.imooc.com/test.asp?name=lilian&password=12345678
（2）Get是不安全的，因为在传输过程，数据被存放在请求的URL地址中，这样就可能会有一些隐私的信息被第三方看到。
（3）Get方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，根据微软方面的说法，微软对用 Request.Form()可接收的最大数据有限制，IIS4中为 80KB 字节，IIS5 中为 100KB 字节。
综上所述，请尽量用 Post 方法。

语法二：文本/密码输入框
<form> <input type="text/password" name="名称" value="文本" /> </form>
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)

语法三：文本域（支持多行文本输入）
<textarea rows="行数" cols="列数">文本</textarea>

语法四：单选/复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

语法五：下拉列表

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>

语法六：提交按钮，提交数据
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用

语法七：重置按钮，重置表单信息
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用

语法八：label标签
<label for="控件id名称">
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件,即自动选中和该label标签相关连的表单控件上，如

<form>
   <label for="male">男</label>
   <input type="radio" name="gender" id="male" />
   <!--标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。-->
</form>