0.1 HTML

2023-07-25 本文已影响0人冰菓_

每个标签实体都有其特定的属性
效果不重要,语义最重要

注释

注释不能嵌套
快捷键 CTRL + /

<marquee loop="1">
    <h1>这是一个测试</h1>
    <!--这是一个测试 -->
    这是一个测试
    <input type="password">
</marquee>
  <input type="password">

文档声明

字符编码

声明解码和编码协议 chatset

设置语言

lang属性编写规范

块级元素和行内元素

块级元素独占一行
行内元素内,能写行内元素,但是不能写块级元素;
块级元素内,都能写

文本标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>

     <em>"i love you"</em>
     <strong>"i love you"</strong>
     <span>i love you</span>
</body>
</html>

图片标签

搜索引擎会通过alt属性得知图片的内容,在图片无法展示的时候,有些浏览器会呈现alt的属性

超链接

a标签
超链接锚点(页面顶部/刷新/其他页面的锚点/执行一段js/唤起功能应用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <a href="aa.jpg" target="_blank">"aa"</a>
   <p></p>
   <img width="100" src="aa.jpg">  <img width="100" src="aa.jpg">
   <p>""//////</p>
   <a href="#">回到顶部</a>
   <a href="">刷新页面</a>
   <a href="demo3.html#aaa">刷新页面</a>
   <a href="mailto:34@qq.com">发邮件</a>
   <a href="tel:10086">tel电话</a>
</body>

列表

有序/无序/自定义列表

表格

在table标签中设置的像素属性为至少概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="2" width="500"  height="200" cellspacing="0">
<!--表格标题      -->
      <caption>用户画像</caption>
<!-- 表格表头     -->
      <thead height="500" width="500"  align="left" valign="bottom">
      <tr>
          <th>用户ID</th>
          <th>用户性别</th>
          <th>用户级别</th>
      </tr>
      </thead>

<!-- 表格主体     -->
      <tbody>
      <tr>
          <td>00001</td>
          <td></td>
          <td>*****</td>
      </tr>
      <tr>
          <td>00002</td>
          <td>m</td>
          <td>&nbsp;</td>
      </tr>
      </tbody>

<!--表格标注      -->
      <tfoot>
      <tr>
          <td></td>
          <td></td>
          <td>2p</td>
      </tr>
      </tfoot>
  </table>

<table border="2" cellspacing="0">
    <caption>"课程表"</caption>
    <thead>
    <tr>
        <th>1.1</th>
        <th colspan="3">1.2</th>
        <th>1.5</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="3">2.1</td>
        <td >2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td rowspan="2">2.5</td>
    </tr>
    <tr>

        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        
    </tr>
    <tr>

        <td>4.2</td>
        <td>4.3</td>
        <td >4.4</td>
        <td>4.5</td>
    </tr>
    </tbody>
</table>
</body>
</html>

表单

button 默认是type="submit"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <form action="https://baidu.com/s" target="_blank">
     <input type="text" name="wd">
     <button>sousuo</button>
 </form>

<form action="https://search.jd.com/Search" target="_blank">
<label>
<span>账户:</span>
    <input type="text" name="zhanghu" value="mrz" maxlength="12"><br>
</label>
<span>密码:</span>
    <input type="password" name="pwd"><br>
    <span>性别</span>
    <span>男</span> <input type="radio" name="sex" value="male" checked>
    <span>女</span> <input type="radio" name="sex" value="female"><br>
    <span>爱好</span>
    <span>打篮球:</span> <input type="checkbox" name="hobby" value="打篮球" checked>
    <span>羽毛球:</span> <input type="checkbox" name="hobby" value="羽毛球">
    <span>打足球:</span> <input type="checkbox" name="hobby" value="打足球"><br>
<!--    文本域-->
    <label for="area"></label>
    <textarea id="area" cols="10" rows="3" name="msg"></textarea><br>
<!--下拉框-->
    <select name="from">
         <option value="徽" selected>安徽</option>
         <option value="沪" selected>上海</option>
    </select>

<!--    隐藏域-->
    <input type="hidden" name="hidden" value="hhhh"><br>
    <button type="submit">确认</button>
    <button type="reset">重置</button>
</form>
</body>
</html>

框架标签

<a href="https://taobao.com" target="1">taobao</a><br>
<iframe name="1" frameborder="0" width="1000"></iframe>

iframe

字符实体

&nbsp;
&lt;
&amp;nbsp;

&copy

全局属性

meta元信息

        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">