二.1Web初识---1.1HTML

比眉伴天荒 2022-09-26 00:20 133阅读 0赞

# Html固定结构 #

<html>

</html>

<html></html>：根标签

<head></head>：头部标签

可包含以下标签

<meta>

<link>

网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

<body></body>：主体标签

代码注释格式：****

# **认识HTML网页标签** #

**标签的用途和标签在浏览器中的默认样式！**

<body> </body>下面:

<h1>一级标题</h1> 有h1、h2、h3、h4、h5、h6六个级别的挑剔；默认加粗；

<p>段落文本</p> 默认段前断后有空白，可用css样式删除；

<span> </span> 为部分文本设置样式

<style>

span\{

color:blue;

</style>

<q></q>：简短文本引用，重点在于引用语义；默认样式是双引号；

<blockquote></blockquote>：对长文本的引用；默认左右有缩进；

<address></address>：定义地址；默认样式是稍大斜体；还可以用于定义文章作者身份和签名；

<br/>：换行；

输入空格(要加分号)： &nbsp;

添加分割线：<hr/>

<code> </code> ：添加单行代码；默认小号；

<pre></pre>：添加多行代码段；

信息列表设置如下，默认在前面加黑色圆点：ul无序，ol自动添加序号

<ul>

<li>第一个列表信息</li>

<li>第二个列表信息</li>

</ul>

<div> </div> ：作为容器，确定逻辑部分；

<div id=”learning struct”></div> 给div模块命名；

# 创建表格 #

创建表格的四个元素：table、tbody、tr、th、td

1. 整个表格以<table> 标记开始、</table>标记结束；

2. 是表格内容全部下载完后同时显示，用<tbody></tdoby>

3. <tr></tr>表示行

4. <td></td>表格的一个单元格，每行有多少单元格就用多少个<td></td>表示，也可以表示列数；

5. <th></th>表格的头部的一个单元格，表格表头；

以上建立的表格默认无边框

<!DOCTYPEHTML>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>认识table表标签</title>

</head>

<body>

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

加边框（用css为表格）

table tr td,th{border:1px solid #000;}

</style>

一般我喜欢讲上面的style放入<head></head>里面，实现**样式和内容的分离**，在<body></body>只放内容的骨架；

为表格添加摘要和标题：

<tr>

…

</tr>

…

</table>

摘要部分不会显示在表格上，只是帮助搜索引擎更好的检索表格或者为特殊用户提供更好的帮助；

表格的标题名字才能显示出来；

# 实现超链接 #

语法：<a href=”目的网址” title=”鼠标滑过显示的文本”> 链接文本</a>

注意：不要把href错写成了herf，当年我也手贱烦了这个毛病；

如果链接需要在新的浏览器中打开，则把浏览器修改为如下格式：

实现超链接发送邮件，即点击超链接时候，同时进入发送邮件功能，使用mailto写法，第一个参数后面用？后面的额参数都使用&链接：

为网页内容插入文本：

语法：<img src=”photo address” alt=”下载失败的替换文本” title=”提示文本”>

# 传送数据（form：get/post） #

要实现网站与用户的交互，可使用表单form把输入的数据传送到服务器端

<form    method="post/get"   action="save.php">

</form>

所有要传送的表单控件内容要在<form></form>之间罗列出来；

表单传送数据get和post方法大比拼：

get方法：从服务器上获取数据；

把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；

服务器端用Request.QueryString\[\]获取变量值；

传送数据量小，一般不超过2kb；

post方法：向服务器上传送数据；

将表单内各个字段和对应内容放置在html header内传送到action所指的url中；服务器端用Request.Form\[\]来获取提交数据；

传送数据量大，一般没有限制；

get方法效率高，安全性低；

post方法效率低，安全性高；

查询时候用get，增删改时用post;

如果服务器端得不到中文字符，试着就该一下web.config

# 文本/密码输入框 #

输入控件要放在表单<form></form>中

<form>

</form>

# 多行文本输入框 #

语法：<textarea rows=”行数” cols=”列数”> 文本</textarea>

实例：

<form  method="post" action="save.php">

</form>

# 单选框、复选框 #

实例：

</form>

如果是单选框的话，需要注意将名字设置成相同的才起到单选的作用；

# 下拉列表框 #

语法：<optionvalue=’提交给服务器的值’> 显示文本值</option>

设置默认选项：

<option value=’提交给服务器的值’ Selected=”selected”> 显示文本值 </option>

下拉列表框实现多选：

主要是在下拉列表框标签里面添加 属性multiple=”mutiple”，在windows系统里面用Ctrl+单击实现多选，在mac系统里面使用command+单击：

<formaction="save.php" method="post" >

</select>

</form>

# 提交按钮 #

\--提交数据

主要是上面的输入类型需要变化type=”submit”；

重置按钮—重置表单信息

主要是上面的输入类型需要变化type=”reset”

# 标签的使用 #

在点击标签的时候，同时将焦点聚集在标签所代表的选项或者输入框上；

语法：<labelfor=”空间id名称”>

实例：

<form>

<label for="email">输入你的邮箱地址</label>

</form>

二.1Web初识---1.1HTML

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关初识HTML

相关 JAVA WEB篇1——初识JAVAWEB

相关 HTML初识+标签

相关初识HTML(二)---认识HTML文件

相关二.1Web初识---1.1HTML

相关 HTML初识

相关 <html>1.1初识html

相关初识HTML

相关初识HTML和WEB标准

相关 HTML-初识jQuery