HTML

HTML

HTML文件的基本结构

<html> html文件开始

<head> html文件的头部开始

……html文件的头部内容

</head> html文件的头部结束

<body> html文件的主体开始

…… html文件的主体内容

</body>html文件的主体结束

</html> html文件结束

 

<head>与</head>标记之间是网页的描述性信息；

<meta>标记：通过属性来定义文件信息的名称、内容等；

<title>标记用来定义网页文档的标题；

<body>又称为主体标记，用于定义文档的主体，网页中所要显示的内容都要放在这个标记内；

<body>属性：

  • bgcolor:网页背景颜色
  • background:网页背景

< html lang="en">
< head >
    < meta charset="UTF-8">
    < meta http-equiv="X-UA-Compatible" content="IE=edge">
    < meta name="viewport" content="width=device-width, initial-scale=1.0">
    < title >Document

< body >

 

 

html常用标记

块级元素：可以自动换行的标记，从另一行开始，高度，行高，顶部，底部边距都可以控制

  • 如<center>、<table>、<form>、<div>、<hr>、<ul>、<p>

行级元素：不能自动换行的标记，元素都在一行，高度，行高，顶部，底部边距不可改变

  • 如：<a>、<br>、<b>、<input>、<img>、<label>、<select>

标题字标记：<h>，自带样式

  • <h1>一级标题，<h2>二级标题...<h6>六级标题
  • 属性：align:left,center,right,justify

段落标记：

  • <p>：段落标记，相当于键盘enter
  • <br/>：换行标记，相当于shift+enter
  • <nobr>：不换行标记
  • 段落属性：align

特殊字符：

  • 空格字符：&nbsp
  • 版权号&copy

文字修饰标记：

  • 粗体标记<b>,<strong>
  • 斜体标记<i>,<em>
  • 下划线标记<u>
  • 删除线标记<s>
  • 字体标记<font>

超链接：<a >

相关属性：

  • href：指定链接地址
  • name：给链接命名
  • title：链接提示文字

图片标记：<img>

相关属性：

  • src：描述图片路径
  • lowsrc：设定分辨率比较低的图片
  • alt：设定图片的提示文字属性
  • width,height：设定图品的宽度和高度
  • border：图片的边框
  • align：对齐方式　　

列表标记：

无序列表<ul>：没有顺序的列表

有序列表<ol>：有顺序的列表

< ul >
        < li >我是无序列表
        < li >我是无序列表
        < li >我是无序列表
        < li >我是无序列表
        < li >我是无序列表
    

    < ol >
        < li >我是有序列表
        < li >我是有序列表
        < li >我是有序列表
        < li >我是有序列表
        < li >我是有序列表
        < li >我是有序列表

 

表格标记：

<table>：表格标记

<tr>：行标记

<td>：列标记

< table >
        < tr >
            < td >
        
        < tr >
            < td >
        
        < tr >
            < td >

边框属性：

  • border：表格边框
  • bordercolor：设置表格边框颜色

其他属性：

  • width,height：表格宽度，高度
  • bgcolor：表格背景色
  • background：表格背景图片

单元格间距属性：

  • cellspacing

单元格边距属性：

  • cellpadding

表格对齐：align

  • left，right，center　　

设置表头:

　　<tr>

　　 　　<th> 姓名 </th>

　　 　　<th>出生年月 </th>

　　</tr>

行标记<tr>属性：

  • bgcolor：行背景颜色
  • bordercolor：行的边框颜色
  • align：对齐方式（left,center,right）
  • Valign：行的垂直对齐方式top(居上)，middle(居中)，bottom(居下)
  • width，hright：宽度，高度

标记<td>的属性：

  • bgcolor：行背景颜色
  • bordercolor：行的边框颜色
  • align：对齐方式（left,center,right）
  • Valign：行的垂直对齐方式top(居上)，middle(居中)，bottom(居下)
  • width，hright：宽度，高度
  • rowspan：合并行
  • colspan：合并列

 

页面回到指定连接：

< a href="tips">
        < a id="tips">

　　

弹幕：

< marquee loop="1">123<marquee>

　

音频，视频：

音频:< audio src="World.mp3">
    视频：< video src="">

 

语义化标签：　　

  • <footer>网页的脚</footer>
  • <header>网页的头</header>
  • <nav>导航栏</nav>
  • <aside>侧边栏</aside>
  • <time>定义日期</time>

 

 

HTML表单

表单标记<form>：

< form action="aaa" method="post">

 

  • get提交数据显示在地址栏，不安全，地址栏长度有限
  • psot提交数据不显示在地址栏，封装一个请求体，无长度限制

标记<input>:

 

文本域：

< input tpye="text"  required="required" value="123" name="username" maxlength="20">
  • name文本域名称
  • maxlength文字输入最大字符数
  • size文字域宽度
  • value文本域默认值

 

密码：

密码：< input type="password" name="password" required="required" placeholder="密码不能大于">　
  • name文本域名称
  • maxlength文字输入最大字符数
  • size文字域宽度
  • value文本域默认值
  • placeholder文本框提示

 

按钮：

< input type="radio" checked name="gender" value="man">男
            < input type="radio" name="gender" value="woman">女　
  • 设置相同name属性可以进行单选
  • value设置默认值
  • checked默认选中

 

多选框：

爱好:< input type="checkbox" name="hobby" checked value="qi">下棋
  • checked默认选中　
  • value设置默认值

 

下拉菜单：

< select name="zhuzhi">
                < option value="menggu">内蒙古</option>
                < option value="jilin">吉林</option>
</select>

 

邮箱：

< input type="email">
  • 电子邮箱输入框，自动校验输入的是否是有效的邮箱

 

日期：

生日：< input type="date">

 

数字：

< input type="number" min="0" max="100" alt="薪水">
  • 只能输入数字
  • min，max是设置的最小最大值
  • alt提示

 

文件：

文件：< input type="file">

　　

颜色：

< input type="color">

 

隐藏：

< input type="hidden">
  • 隐藏输入的内容，在页面中是不可见的，可以用于收集或发送信息，以利于被处理表单的程序使用,它不会显示结果，只是用于传送数据的标记。

 

按钮：

< p >< input type="submit" value="提交">
        < p >< button type="submit" >提交
        < p >< input type="reset" value="重置">
  • 普通按钮button，在<button>内部，可以放置文本或图像。
  • 提交按钮submit
  • 重置按钮reset

 

文本域：

< textarea cols="30" rows="30">
  • 用来制作多行的文本块，可以在其中输入更多的文本。　

 

绑定标记：

< form >
  < label for="male">Male
  < input type="radio" name="sex" id="male" />
  < br />
  < label for="female">Female
  < input type="radio" name="sex" id="female" />
  • <label>标记的for属性应当与相关元素的id属性相同，即将for属性的值设置为相关元素的 id 属性的值。
  • 点击Male和Female时，可跳到<input>　　

　　

 

posted @ 2022-07-12 09:55  一只神秘的猫  阅读(53)  评论(0)    收藏  举报