加载中...

HTML

hypertext markup language 超文本标记语言

w3c是什么

Web技术领域最具权威和影响力的国际中立性技术标准机构。

w3c标准：
结构化标准语言(HTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript)

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta标签是给搜索引擎查找、分类等用的 -->
    <meta charset="UTF-8">
    <meta http-equiv="" content=""><!--模拟一个 HTTP 响应头 -->
    <meta name="keyworks/desription" content="">
    <title>Document</title>  <!-- 文档的标题 -->
</head>
<body>
    
</body>
</html>

块元素

h1~h6 标题标签
p 段落标签
div 区隔标记

行内元素

<img src="路径" alt="名" title="悬停文字" wight="宽">

<a href="地址" target="_blank / _self"></a>

<!-- a之**锚标签**, name做标记 -->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>

列表

<ol有序> - <li>
<ul无序> - <li>
<dl自定义> - <dt列表名称> - <dd列表内容>

表格table

<table border="1px">
    <th colspan="3">111</th>          // 表头 table head
    <tr>                              // 表行 table row 
        <td rowspan="2">跨行</td>     // 表数据 table data 
        <td>333</td>
        <td>333</td>
    </tr>
</table>

表单form

<div style="margin: 100px 100px;border: 1px red dashed">
  <form action="" method="get">
    <label for="mark">点我</label>   <!-- label增强鼠标可用性，for属性是指向id标签的-->
    <p>账号: <input type="text" name="user" value="111" pattern="~$"></p>
    <p>密码: <input type="password" name="user" required placeholder="请输入密码"></p>
    
    <p>性别：<!-- input中type="radio"，单选框-->
      <input type="radio" name="sex" value="1">男
      <input type="radio" name="sex" value="2">女
    </p>
    
    <p>爱好：<!-- input中type="checkbox"，多选框-->
      <input type="checkbox" name="hobby" checked>篮球
      <input type="checkbox" name="hobby">足球
      <input type="checkbox" name="hobby">羽毛球
    </p>
    
    <p>国家 <!-- select标签+option标签，下拉选择框-->
      <select name="national" >
        <option value="China">中国</option>
        <option value="American">美国</option>
        <option value="Japan">日本</option>
      </select>
    </p>
      
    <p>说明 <!-- textarea标签，文本框-->
      <textarea name="detail"  cols="30" rows="10"></textarea>
    </p>
      
    <p>文件：<!-- input中type="file"，文件上传框-->
      <input type="file" name="files" hidden>
    </p>
    <p>
    <input type="url" name="url">
    <input type="number" name="numb" step="2" min="0" max="10">  
    <input type="range" name="volume" >
    <input type="search" name="volume" >
    </p>

<!--只读 readonly-->
<!--禁用 disabled-->
<!--隐藏 hidden-->
      
<!--验证-->
<!--提示输入信息 placeholder-->
<!--必填验证  required-->
<!--正则表达式 pattern=""-->



    <p>
      <input type="submit" value="提交">
      <input type="reset" value="清空">
    </p>
  </form>


</div>

特殊符号

&gt; 大于 、 &lt; 小于 、 &eq; 等于
<br/>  换行标签
<hr/>  水平线
posted @ 2023-06-13 18:39  1502god  阅读(19)  评论(0)    收藏  举报
-->