侧边栏

HTML

什么是HTML

H(Hyper)T(Text)M(Markup)L(Language)是一种超文本标记语言,是由大量的标签组成的,每个标签都有开始标签和结束标签。

超文本:流媒体,图片,声音,视频

HTML制定者:

w3c:世界万维网l联盟。w3c指定了HTML规范,每个浏览器生产厂家都会遵守规范。HTML程序员也得按照这个规范去写代码。

w3school

w3cschool:为了方便中国web程序员的开发,为开发提供方便

第一个HTML程序

 <!--
 1.注释
 2.加上<!dectype html> 就是html5的语法,去掉表示html4.0
 
 -->
 <!dectype html>
 <html>
  <!--根 -->
  <head>
  <title>网页标题</title>
  <!--头-->
  </head>
 
  <body>
  网页的主题内容,Hallo World!
  </body>
 </html>

基本标签

 1.<p></pp> <!--段落标签-->
 2.<h1></h1><!--标题字:是html预留的格式,和world中的标题子相同 -->
 3.<br></br><!--换行标记,br标签是一个独目标签 -->
 4.<hr></hr><!--横线,独目标记 -->
 5.<pre></pre><!--预留格式,在源代码敲的格式,在网页中打开也会是同样的格式 -->
 6.<del></del><!--删除字 -->
 7.<ins></ins><!--插入字 -->
 8.<b></b><!--粗体字 -->
 9.<i></i><!--斜体字 -->
 10.<sup></sup><!--右上角加字 -->
 11.<sub></sub><!--右下角加字 -->
 12.<font></font><!--字体标签 -->

实体符号

 <!--实体符号特点是:以&开始,以;结束。&lt;是小于号, &gt; 是大于号 -->
 1.&lt;<!--&gt; 是大于号-->
 2.&gt; <!--大于号-->

表格

 <table border="1px"></table><!--表格,border表示设置表格的边框像素-->
 <tr></tr><!--表示行数-->
 <td></td><!--表示列数-->
 <th></th><!--自动加粗,自动剧中-->
 属性:
  border:设置像素
  width:宽度
  height:高度
  align:对其方式
  rowspan:合并列单元格
  colspan:合并行单元格
  thead,tbody,tfood拆分表格

背景颜色和图片

 背景:
    bgcolor:设置背景色
    background:设置背景图片
 图片:
  img:标签就是图片标签
  src:图片类路径
  title:设置鼠标悬停时显示的信息
  alt:加载图片加载失败后悬停的信息

超链接

 <!--超链接的特点,鼠标停留在超链接上面显示图标,点击超链接之后还能跳转页面-->
 <a></a><!--超链接-->
  href:hot references热引用,后面填的一定是资源的地址
  target:可取值
  _blank:新窗口
  self:当前窗口
  _parent:父窗口
  _top:顶级窗口
 超链接的作用:
  通过超链接可以从浏览器向服务器发送请求
  浏览器向服务器发送数据(请求:request)
  服务武器向浏览器发送数据(响应:response)

列表

 有序列表:有数字提示或者可以用type设置其他提示
  <ol></ol>里面签到<li></li>
 
 无序列表:无提示
  <ul></ul>里面嵌套<li></li>

表单

表单作用:

1.收集用户信息,表单展现之后,点击提交按钮提交数据给服务器

怎么画一个表单?

<form action = "http://192.168.111.3:3306/oa/save"></form><!--画一个表单,一个网页当中可以有多个表单-->

表单属性

1.action:action属性用来指定提交给那个服务器,action属性和超链接中的href属性一样都可以给服务器发送请求(request)
method:采用get方式方式提交时候,用户提交的信息会显示到地址栏上
		采用post方式提交的时候,用户信息不会显示到地址栏上
<body>
		<form action = "http://192.168.111.3:8080/oa/save">
		<!--画一个提交按钮,画一个按钮可以使用 input 输入域,type ="submit" 的时候表示一个提交按钮,具有提交表单的能力-->
         <!--对于按钮来说,按钮上的value用来显示按钮上的显示的文本信息-->
		<input type="submit" value="登录"/>
		<input type="button" /><!--普通按钮,不具备提交能力了-->
	</body>
    action?name=value&name=value&name=value...

重点强调

表单项有name属性的,一律会提交到服务器。

下拉列表

<body>
	<select multiple="multiple" size="1"><!--multiple="multiple"支持多选 size 设置多选的条数--->
		<option>湖大</option>
		<option>湖大</option>
		<option>湖大</option>
		<option>湖大</option>
	</select>	
	</body>

file和hidden控件

<body>
		<input type="file" /><!--选择文件-->
	</body>

readonly和disabled

<body>
	<form action="http://localhost:8080"></form>
	<!--readonly和disabled相同点:都是只读不能修改。
	但是readonly可以提交给服务器,disabled数据不能提交(即使有name属性)-->
		用户代码<input type="text" name="usercode" value="110" readonly />
		<br>
		用户姓名<input type="text" name="usercode" value="zhangshan" disabled />
		<br>
		<input type="submit" value="提交数据" />
	</body>

maxlength

<!--maxlength 设置文本框中可输入的字符数量-->
	<body>
		<input type="text" maxlength="13" />
	</body>

例子

	<body>
		<!--
		用户注册:
			用户名
			密码
			确认密码
			性别
			兴趣
			学历
			简介
		-->
		<form action="http://localhost:3303:lkj_mysqlOne" method="post">
		用户名:
		<input type="text" name="username"/>
		密码:
		<input type="password" name="userpaw" />
		<br>
		确认密码
		<input type="password" name="userpaw" />
		<br>
		性别
		<input type="radio" name="gender" value="1"/>男
		<input type="radio" name="gender" value="0"/>女<!--单选按钮必须手动指定-->
		兴趣:
		<input type="checkbox" name="interes" value="smoke"/>抽烟
		<input type="checkbox" name="interes" value="drink"/>喝酒
		<input type="checkbox" name="interes" value="fireHair"/>烫头
		<br>
		学历:
		<select name="grade">
			<option value="gz">高中</option><!--selected默认选择-->
			<option value="dz">大专</option>
			<option value="bk">本科</option>
			<option value="ss">硕士</option>
		</select>
		<br>
		简介:
		<textarea rows="10" cols="60" name="jianjie"></textarea>
		<input type="submit" value="注册"/>
		<input type="reset" value="清空"/>
		</form>
	</body>

HTML中元素的ID属性

<body>
<!--1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。
所以在同一个HTML文档中id值不能重复。
2.表单提交数据时候和name有关和id无关
-->
	<input type="text" id="username" name="username"/>
	<input type="text" id="password" name="userpwd"/>
</body>

div和span

1.div和span是什么?有啥用? div和span都可以称为图层。 图层的作用是为了保证页面可以灵活的布局。 图层就是一个一个的盒子,div嵌套div就是盒子套盒子 2.最早的网页都是采用table进行布局的,但是table有个弊端就是太死板不灵活。所以现代网页开发中都是采用div布局 3.默认情况下,div默认独自占用一行,span不会

 
posted @ 2022-04-29 10:37  lkjlwq  阅读(61)  评论(0)    收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css