HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/kentlhxy/article/details/114765718

HTML

HTML:超文本标记语言,是静态网页,用于在浏览器上显示数据

id:表示唯一的,不允许重复 class:样式,允许重复

常用的标签

<!-- 注释内容 --> :注释标签
<html> :HTML根标签
<head> :HTML头部标签
<title> :页面标题
<body> :HTML主体部分
<style> :样式
<script> :用于写JavaScript或引入JavaScript 文件
<h1>到<h6>:定义标题一到标题六 ,由大到小
<p>:定义段落
<div>:定义文档中的结构 ,为HTML提供结构
<span> :也是定义结构 ,默认不换行
<br/> :单标签, 换行
<hr/> :单标签 ,定义一条水平线
    
<span></span> 标签不会导致换行
<div></div> 会换行
<p></p> 会产生一个段落

a标签

超链接作用

a标签
1.href跳转的地址,可以跳到项目的资源
2.target 是跳转的方式
 _self 在当前页面打开
 _blank 重新打开窗口
<a href="" target="_self "> 我是超链接</a>

作为锚点(页内跳转)

<a href ="#a"> 第一</a><br/>
<a href ="#b"> 第一</a><br/>
<a href ="#c"> 第一</a><br/>
    //定位到a位置
    <a name="a" > ..... </a>

列表标签

有序< ol >
无序标签< ul >
自定义标签< dl >

有序 //order list           
    <ol>
      <li>第一</li>
      <li>第二</li>
    </ol>
无序 //unorder list 
    <ul> <li> 无序</li> </ul>
列表
    <dl>
       <dt> ...</dt> //定义列表项的标题
       <dd> ...</dd> //定义普通列表项
    </dl>

图片标签img

img src ="" alt="" height="" >
src :该属性指定图片文件所在位置
alt: 该属性指定一段文本 .用于图片显示不了的时候提示
height :指定图片高度,可以是 像素或百分比 一般是整体对称的,指定一个height(width也会变)

表格标签

属性

border :指定表格边框的宽度
cellpadding:指定单元格与单元格间的边框间距
cellspacing:单元格之间的间距
width:指定表格的宽度

<table>
    <tr>  //行 
       <td> </td>  //列   //  <th></th> 把内容加黑加粗,内容居中
    </tr>
    </table>

表单标签

属性

action:设置数据提交的地址(表单提交的地址)
method:表单提交时的请求类型 POST ,GET(默认)
enctype:数据加密,提交数据的编码类型
application/x-www-form-urllencoded :表示使用Encoder 进行编码处理,默认值
multipart/form-data : 表示数据换成字节流只有在 文件上传的时候使用
text/plain 表示对提交的数据不做任何处理

<form action="" method="" enctype=""> 
    <input type="text" name="name"/> <br/>
<input type ="submit" value="提交"/>
</form>

input标签

type属性输入指定标签的类型

text,文本信息显示在框中
password :密码输入框 ,密码以圆点形式
radio 单选框
checkbox 复选框
hidden :隐藏域 ,用于隐式向后台传输数据
submit :提交表单中的数据内容
button: 无动作按钮
file :文件上传域 ,会生成一个文本框和浏览按钮
reset :重置按钮 ,将表单写的内容设置为初始值

input其他属性

name:指定input标签的名字,必须要有那么才能提交数据
value:指定input标签的初始值
checked:设置单选框.复选框的初始状态是否选中
disable:设置input标签加载时禁用此标签; 不能提交到

<form action="" > 
    //隐藏域
    <input type="hidden" name="id" value="abc"/> <br/>
    
   账号: <input type="text" name="username"/> <br/>
   密码: <input type="password" name="password"/> <br/>
    
    //check 默认选中
   性别: <input type="radio" name="sex" value="1" check/> 男  <input type="radio" name="sex" value="0"/> 女<br/>
    
      //应该是同一个name
   爱好: <input type="checkbox" name="hobby" value="money"/> /> money<br/>
<input type ="submit" value="提交"/>
</form>

select标签

下拉框标签 ,只要使用option标签作为子标签

属性

multiple=“multiple” 表示可以选中多个
size=" " 表示显示几个
selested 代表默认选中

<select name="country">
    <option value="">---请选择---</option>
    <option value="zh" selected="selected">广州</option>
    <option value="en">英国---</option>
</select>

textarea标签

文本域标签:用户录入多行多列数据

<textarea cols="33" rows="33">要显示的内容</textarea>

(二十四)HTML基础

HTML

常用的标签

a标签

列表标签

图片标签img

表格标签

表单标签

input标签

select标签

textarea标签