首页 > 编程札记 > 编程

html基础及表单标签

阅读：评论：0

html基础及表单标签

文章目录

html基础
- - - 开发环境&生产环境
    - - 开发环境：
        生产环境：
    - 服务结构：
    - - B/S结构：浏览器-服务器结构
        C/S结构：客户端-服务器
        静态&动态网站
    - html基本布局
    - 标签
    - - 单标签
        格式化预览标签
        文本修饰标签
        上标、下标标签
        段落标签
        文字方向标签
        列表标签
        超链接标签
        锚点标签
        图片标签
        多媒体标签
        表格标签
        表单标签
        div标签，区域框标签
        点击事件---DOM

html基础

开发环境&生产环境

开发环境：

类似于xampp这种简单集成环境软件的运行环境，其特点是体积小，方便不断测试，（xammp：根目录为htdocs）

生产环境：

部署于服务器上面的环境，便于向用户提供服务。（linux 根目录为www，服务器使用的linux）

服务结构：

B/S结构：浏览器-服务器结构

C/S结构：客户端-服务器

B/S结构举例：
1. url（同一资源定位符）链接：.html?uid=10&name=xiaohai&age=24&sex=nv
2. 解释：
  
  ====为超文本传输协议，端口号80，开放式传输，没有做任何安全加密操作，常见还有 443端口，http+ssl加密传输，先通过ssl协商加密，再将http传输的内容进行加密。list.jd后面的/为list.html
  
  ==?==后面 uid=10&name=xiaohai&age=24&sex=nv为参数每个参数由&隔开
3. http：服务为无状态协议，不记录访问信息，每次访问，都需要服务器单独处理，并且下一次访问和上一次访问没有任何关系。
  
  为了使WEB应用有状态引入了（客户端）cookies，（服务器）session等机制。
  
  WEB应用=http（https）+cookies+session+一些辅助应用
响应代码：
1. 200：成功
2. 403：拒绝
3. 404：未找到
4. 500：服务器内部错误

静态&动态网站

静态页面是不能随时改动的，静态是一次性写好放在服务器上进行浏览的，如果想改动，必须在页面上修改，然后再上传服务器覆盖原来的页面，这样才能更新信息，比较麻烦，使用者不能随时修改。

动态页面使用网页脚本语言，比如php、asp、asp等，通过脚本将网站内容动态存储到数据库，用户访问网站是通过读取数据库来动态生成网页的方法。并且有前后端之分。

html基本布局

<!-- 这是一个注释 快捷键ctrl + /-->
<!-- 快捷键补全代码：html:5 ,按ctrl + e -->
<!DOCTYPE html>                          <!-- 这是告诉浏览器用最新的html标准来解析该文档 -->
<html lang="en">                         <!-- 说明语言是英文english --><head>                               <!-- 头部，告诉浏览器内容 --><meta charset="utf-8">          <!-- 告诉浏览器格式 --><title>练习一：基本操作</title>   <!-- 标题，浏览器可以看到的 --></head><body><!-- 这是用户可以看到的部分 --></body>
</html>

<h1>这是一级标题</h1>                      <!--标题标签，空格键只识别一个 -->
<h3>这是&lt;&gt;三级标题</h3>              <!-- &lt;表示小于<符号，&gt;表示大于>符号 -->
<h5>这是&nbsp;五级标题</h5>                <!-- &nbsp;表示空格 -->
<br>                                      <!-- 换行标签 -->
<hr>  						            <!-- 参考线标签 -->

格式化预览标签

<pre>                                     <!-- 怎么敲的就怎么显示 -->上左     右下
</pre>

文本修饰标签

<b>加粗字体</b>                        <!-- 加粗字体标签 -->
<strong>加粗二</strong>      
<i>斜体字体</i>                        <!-- 斜体标签 -->
<em>斜体二</em>
<u>下划线</u>                          <!-- 下划线标签 -->
<del>删除字体</del>                    <!-- 删除标签 -->
<abbr title="我是啊啾">HLY</abbr>      <!-- 隐藏文本标签 -->

上标、下标标签

X<sup>2</sup>=64                          <!-- sup是上标标签 -->
H<sub>2</sub>O                            <!-- sub是下标标签 -->

段落标签

<p>第一段</p>                              <!-- P段落标签 -->

文字方向标签

<bdo dir="rtl">从右到左</bdo>                  <!-- rtl指right to left显示 -->
<marquee direction="right">欢迎光临</marquee>  <!-- 向右滚动标签 -->

列表标签

<ol>                                       <!-- 有序列表标签 --><h5>我喜欢的英雄/h5><li>狄仁杰</li><li>后羿</li><li>鲁班</li>
</ol><ul>                                       <!-- 无序列表标签 --><h5>四大名著</h5><li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li>
</ul><dl>                                       <!-- 定义列表标签 --><dt>我喜欢的水果</dt><dd>柠檬</dd><dd>草莓</dd><dd>菠萝</dd>
</dl><details>                                  <!-- 详情概要标签 --><summary>这些水果口味有</summary><p>柠檬水</p><p>草莓蛋糕</p><p>波罗蜜</p>
</details>

超链接标签

<a href="">有问题找度娘</a>                    
<a href="./test_2.html">相对路径标签页</a>                           <!-- 相对路径 -->
<a href="/php_test/html_01/标签.html">绝对路径标签页</a>             <!-- 绝对路径 -->
<a href="" target="_blank">新窗口找度娘啊</a>    <!-- target属性 -->
<a href="" target="_self">原窗口找京东啊</a>         
<a href="" title="即将访问天猫">这里是天猫</a>   <!-- title属性 -->

锚点标签

<a name="one">这是一个锚点</a>                <!-- 锚点开始 -->
<pre>随便写点
</pre>
<a href="#one">回去</a>                      <!-- 锚点终点 -->

图片标签

<!--图片标签-->
<img src="./images/a.jpg" width="2px" height="1px" title="这是一只猫妈妈"> <!--图片超链接-->
<a href="" target="_blank">                          <img src="./images/c.jpg" width="2px" height="1px" title="访问百度"><!--图片局部链接，引用map并命名area-->  
<img src="./images/g.jpg" width="200px" height="150px" usemap="#map"/>
<map name="map">  <!--图片划分区域,rect为矩形--><area shape="rect" coords="0,0,100,150" href="" title="百度"><area shape="rect" coords="101,0,200,150" href="" title="京东">
</map>

多媒体标签

<!-- 音乐标签 audio ,autoplay自动播放，controls控件-->
<audio src="./media/music.mp3" autoplay="autoplay" controls="controls"></audio><!-- 视频标签 video -->
<video src="./media/croods-02.mp4" controls="controls" width="4px" height="3px"></video><!-- 多媒体通用标签 embed -->
<embed src="./media/music.mp3" width="400px" height="300px"></embed>

表格标签

<!--设置表格，border边粗细，cellspacing指单元格与边界距离，cellpadding指单元格距离文字大小,align是表对齐格式-->
<table border="1" cellspacing="5px" cellpadding="10px" align="center">  <caption>学生信息表</caption>                 <!--表头--><tr align="center">                          <!--单元格设置和字体位置--><th width="100px">姓名</th>              <!--th表示加粗--><th width="100px">电话</th><th width="100px">学号</th></tr><tr align="center"><td width="100px">张杰</td>              <!--td表示内容不加粗--><td width="100px">110</td><td width="100px">520</td></tr>
</table><!--合并单元格-->
<table border="1" cellspacing="5px" cellpadding="10px" align="center">  <caption>学生信息表</caption>  <tr align="center"> <th width="100px">姓名</th>  <th colspan="2" width="100px">电话</th>      <!--colspan横向合并填充，不会被补齐--></tr><tr align="center"><td width="100px">星星</td>  <td width="100px">112</td><td width="100px">522</td></tr><tr align="center"><td width="100px">张杰</td><td rowspan="2" width="100px">110</td>       <!--rowspan竖向合并填充，不会被补齐--> <td width="100px">520</td></tr><tr align="center"><td width="100px">啊啾</td>  <td width="100px">521</td></tr>
</table>

表单标签

<!--提交表单方式有：post、get-->
<form action="./基本布局.php" method="post">  <!--文本框提交类型有：text、password-->    
用户名：<input type="text" name="user" value=""/>      
密码：<input type="password" name="upass" value=""/> <!-- 提交按钮 -->
<input type="submit" value="登录"> <!-- 可以将表单内的所选属性提交 -->
<input type="button" value="提交按钮"> <!-- 通过javascript来实现提交动作 -->
<input type="image" width="60px" height="100px" src="./images/f.jpg" title="提交"> <!-- 通过点击图片来实现提交 --><!-- 数字输入框，step是变化值间距 -->    
<input type="number" step="1" min="0" max="10" />
</form><!--单选框，name要一致，value参数-->
性别：男<input type="radio" name="sex" value="1">       女<input type="radio" name="sex" value="0"><!--复选框，name为数组存储，value参数，check为自动选择属性-->
你喜欢的运动有：                              跑步<input type="checkbox" name="sports[]" value="run" /> 骑行<input type="checkbox" name="sports[]" value="bike" checked="checked" /> 羽毛球<input type="checkbox" name="sports[]" value="playball" /> <!-- 下拉框 -->
你居住的城市在：
<select name="city"><option value="BJ">北京</option><option selected value="NX">宁夏</option>       <!-- selected默认选择--><option disabled value="GZ">广州</option>       <!-- disabled不能选择-->
</select><!-- 文本域,文本输入框，大小可变 -->
<textarea name="text"></textarea>

div标签，区域框标签

// onmouseover鼠标移动到元素处标签（事件），onmouseout鼠标脱离元素标签
<div onmouseover="mOver(this)" onmouseout="mOut(this)"; width:300px; height:200px; padding:200px;>苏伏复活了吗</div>

点击事件—DOM

<h3 onclick="this.innerHTML='今天风儿有点喧嚣'">有点尴尬</h3>   <!-- 通过点击文字-->   
<!-- 通过传入元素到函数，实现修改元素内容-->
<h4 onclick="func(this)" >死狐狸去哪了</h4> 
<script type="text/javascript">function func(id){id.innerHTML='当然去找萧人鱼吃了'}
</script><!-- 通过鼠标移动，实现修改元素内容-->
<h4 onmouseover="mOver(this)" onmouseout="mOut(this)">苏伏复活了吗</h4>
<script type="text/javascript">function mOver(obj) {obj.innerHTML = '想知道就去看第二季吧'}function mOut(obj){obj,innerHTML = "苏伏复活了吗"}
</script>

本文发布于:2024-02-04 00:22:17，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170698453952053.html

上一篇：万能计算机作文,万能作文

下一篇：并查集（思路加简单例题）

标签：表单标签基础 html

留言与评论（共有 0 条评论）