html

delayi
88 阅读2分钟

标签

  • html语言是解释型语言，不是编译型，浏览器是容错的

  • html页面中由一对标签组成：<html></html>

  • <html> 称之为 开始标签 </html>称之为 结束标签

  • 标签属性

    基本属性：bgcolor = “red”

    事件属性：onclick = “alert（‘你好！’）;”

  • 单标签<标签名/>

  • 双标签<标签名>....</标签名>

  • title 表示网页的标题

  • 可以在meta标签中设置编码方式

  • <br/>表示换行 。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面

  • <hr/>表示分隔符

标签语法

标签不能交叉，必须闭合。

属性值加引号

常用标签

font字体标签

<font color="red" face="宋体" size="70">字体标签</font>

特殊字符

>  ---->&lt
<  ---->&gt
空格 ---->&nbst
......

标签标签

image.png

超链接

href,链接地址

target,页面跳转目标_self 在本窗口打开,_blank 在一个新窗口打开

<a href="https://www.baidu.com" target="_self">百度</a>
<a href="https://www.baidu.com" target="_blank">百度</a>

列表标签

无序列表

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

有序列表

<ol type="">
  <li></li>
</ol>
type:disc(default) , circle , square

图片标签

<img src="图片路径" width="" height="" border="" alt="hhh"></img>
src="图片路径"
border:边框
alt:设置图片找不到时，显示的文本内容

javase路径：
  相对路径：从工程名开始算
  绝对路径：从盘符开始算
web中
  相对路径：. :表示当前文件所在目录
            ..：表示当前文件上一级所在目录
  绝对路径：https://ip:port/工程名/资源路径

表格

<table align="" border="" width="" height="" cellspacing="">
  <tr>
    <th>表头</th>
    <th>第一列</th>
    <th>第二列</th>
  </tr>
  <tr>
    <td align="center">第一列</td>
    <td>第二列</td>
  </tr>
</table>
tr:行
th:表头
td:列
border边框
cellspacing:单元格间距

<table align="" border="" width="" height="" cellspacing="">
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td colspan=""></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan=""></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
colspan,列合并
rowspan,行合并

iframe框架标签

内嵌窗口

<iframe src="" width="" height="" name="abc"></iframe>
<ul>
  <li><a href="" target="abc"></a>1.1</li>
</ul>
iframe,a搭配使用

表单标签

<form>
  名称:<input type="text" value="默认值"/><br/>
  密码:<input type="password"/><br/>
  性别:<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
  兴趣:<input type="checkbox"/>java<input type="checkbox"/>python<br/>
  国籍:<select>
    <option selected="selected">中国</option>
    <option>美国</option>
  </select>
  自我评价:<textarea rows="" cols="">默认值</textarea>
  重置:<input type="reset" value=""/>
  提交:<input type="submit"/>
  按钮:<input type="button"/>
  文件:<input type="file"/>
  <input type="hidden"/>
</form>
form:表单
input：输入框

type="text" 文件
type="password" 密码
type="radio" 单选框
type="checkbox" 复选框
type="reset" 重置
type="submit" 提交
type="button" 按钮
type="file"
type="hidden" 隐藏域，用户看不见，服务器能看见

value：默认值
name:进行分组
checked="checked" 默认选
select:下拉列表
option：列表选项
selected="selected" 默认选中

textarea 文本输入框
rows行数
cols 列数
起始结束标签之间的值为默认值

表单格式化

<form>
  <table>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
</form>

表单提交

<input type="text" name="aaa"/><br/>
<form action="" method="">
  <input type="text" name="aaa"/><br/>
  <input type="text"/>
  <select>
    <option value="aaa">11</option>
    <option>22</option>
  </select>
  <input type="checkbox" value="aaa"/>33
  <input type="checkbox"/>44
</form>
action 提交的服务器地址
method 提交的方式，默认GET或POST

提交没有成功原因
1.没有加name属性
2.单选，复选都要加value才能提交成功
3.表单项不在form中

GET 
1.浏览器地址=action属性+？+请求参数
    参数格式name=value&name=value
2.不安全
3.数据长度有限

POST
1.浏览器地址只有action
2.较安全
3.无数据长度限制

其他标签

<div>div</div>
<span>span</span>
<p>p</p>
div 默认占一行
span 长度是数据的长度
p 在段落前或后空一行
avatar
文章
阅读
粉丝