Html 超文本 标记语言

时间：2021-08-28 09:03:33

Html 超文本 标记语言

基本模板:

<!doctype html>  <!-- 文档声明 一个Html 文件就是一个文档 -->
<html lang="en">  <!-- lang="en" 表示浏览器的 翻译  -->
<head>  <!-- 标签中的内容不会显示到浏览器中 -->
    <meta charset="UTF-8">  <!-- 定义文档的编码类型 -->
    <link rel="shortcut icon" href="img/title.png" >  <!-- 页面标题中显示的 图标连接 -->
    <!--视口设置 支持移动端-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <!--
    content属性值 
     width:可视区域的宽度，值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
     maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
     user-scalable:是否可对页面进行缩放，no 禁止缩放  
    -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 
    兼容设置 Edge 模式通知 Windows Internet Explorer 以*别的可用模式显示内容，
    这实际上破坏了“锁   定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
    -->
    <!-- 上述4个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>标题</title>
</head>
<body> 
    <!-- 浏览器中显示的内容 -->

</body>
</html>

常用标签:

块:

  • div,p,h1~h6,ul,ol,dl,li,dd,dt,form,table,select,textarea

行内:

  • a,span,i,em,strong,b,br,hr,img,input,button,label
<!--行内标签: 在一行内显示-->
<!--块级标签: 独占一行-->


<h1></h1>---<h6></h6>  <!--h1 只允许页面中只有一个: 为了seo和爬虫-->
<u>下划线标签</u>  
<b> 粗体标签</b> 
<strong>加粗 强调</strong>
<em>斜体</em>
<br>  换行
<hr>  一条线
<!--空白折叠: 换行和空格折叠成一个-->
<pre>
   预定义标签
      保留换行样式
</pre>
<center>居中标签</center>
<span>行内标签 </span>
<a href='地址  #跳转顶部'>
    #跳转顶部  JavaScript:void(0) 阻止跳转
</a>
<i>图标标签</i>
<img src="图片地址" alt="加载失败显示" >
<p>独占一行  只能放字体 和img input  不能放块级标签</p>
<!-- 列表 -->
<ul> 无序列表
    <li>只能放 li  标签</li>
</ul>
<ol>
    <li>有序列表</li>
</ol>
<dl>
    <dt>顶头开始</dt>
    <dd>空两格开始</dd>
</dl>

<botton>按钮</botton>

table 表格

<!-- 表格 -->
<table>
    <thand>  <!-- 表头 -->
        <tr>
            <th></th>
        </tr>
    </thand>
    <tbody>  <!-- 内容 -->
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

form 表单 input 输入框

<form action='提交的地址'  method="post"  enctype="multiport/form-data">  
    <!--enctype="multiport/form-data" 提交文件时使用-->
    <label for='username'>账号!</label>  提示  for关联 input标签的 id 
    <input id='username' type='text' name='user' placaholder="请输入账号">
</form>

表单标签

  • input

    • type

      • text 普通的文本

      • password 密码

      • radio 单选 默认选中添加checked

        • 互斥的效果 给radio标签添加 相同的name

        • 默认选择: checked='checked' 可以简写

          name : 两个单选的 name 值一样 产生互斥效果 value= 单选的 值

      • checkbox 多选

        • 默认选择: checked='checked' 可以简写

      • button 普通的按钮

      • file 上传文件使用

        如果提交文件 form 表单的 method="post" , enctype="multiport/form-data"

      • reset 重置按钮

      • submit 提交 按钮

    • name 会被封装到请求体中的key

    • value 是标签显示的内容,会被封装到请求体中的value

textarea 文本输入

  • name
  • value
  • rows 行数 决定了它的高度
  • cols 列数 决定了它的宽度
<textarea cols='列数' rows='行数'>文本输入 </textarea>

select 选择输入框

  • name 会被封装到请求体中的key
  • 子元素一定是 option
    • value 是标签显示的内容,会被封装到请求体中的value
    • selected 默认选中的状态
<select name='hobby' id=''>
    <option value='1'>只能是 option </option>
</select>

默认选择  selected='selected'
设置  multiple 为多选框  默认单选
标签：

相关文章