(Key!!!) HTML 重点标签！！

_Phonon
340 阅读6分钟

〇. 准备工作！！

程序员是不会直接用手点开HTML的，预览网页用http-server小工具！

yarn gloal add http-server
http-server . -c-1                 初始化预览网页，可用  hs . -c-1表示

一. a标签

属性：

  • href:
  1. 网址：
<a href="https://wikipedia.org/">维基百科</a>
<a href="http://wikipedia.org/">维基百科</a>
<a href="//wikipedia.org/">维基百科</a>             <!--无协议网址-->
  1. 路径，同一个大文件夹中的路径都可
<a href="/a/b/c/index.html">index.html</a>
  1. 伪协议
<a href="javascript:alert(0);"> javascript:代码;</a>
<!--点击后直接执行代码块-->

<a href="javascript:;"> 不会刷新和滚动的新链接</a>
<!--点击该链接，既不会刷新也不会页面滚动-->

<a href="mailto:489378072@qq.com"> 点击链接直接发送邮件 </a>

<a href="tel:13790000000"> 点击链接直接打电话</a>
<!--可用于简历中，用手机端打开直接拨号-->
  1. id （锚点）
<a href="#XXX"> 链接跳转到锚点位置 </a>
<!--页面会跳转到属性中有id="#XXX"的网页元素-->
  • target:
  1. 系统值

_blank 和 _self

<!--用新页面打开链接，_blank-->
<a href="http://baidu.com" target="_blank"> 百度 </a>
<!--用本页面打开链接，默认值，_self-->
<a href="http://baidu.com" target="_self"> 百度 </a>

_top和_parent, 一般搭配iframe实现嵌套窗口时使用

<a href="http://baidu.com" target="_parent"> 百度 </a>
<!--在所在窗口的上一层窗口打开-->
<a href="http://baidu.com" target="_top"> 百度 </a>
<!--在所在窗口的最外层窗口打开-->
  1. 指定窗口打开页面
<a href="http://baidu.com" target="fff"> 百度 </a>
<a href="http://google.com" target="fff"> 谷歌 </a>

两个链接都在名叫fff的窗口打开。首先点击链接百度，浏览器发现没有叫做fff的窗口，就新建一个窗口fff，在该窗口打开百度。然后，用户又点击链接谷歌，由于已存在fff窗口，浏览器就在该窗口打开谷歌，取代里面已经打开的百度。

验证：右键inspect → console→输入window.name
可查看当前网页名

二.table标签

  1. 相关标签
<table>
    <thead> </thead>            表头  
    <tbody> </tbody>            表内容
    <tfoot> </tfoot>            表尾，可有可无
</table>

<table>
    <thead> 
        <tr>            table row   表一行
            <th></th>   table head  最顶行空着
            <th>语文</th>
            <th>数学</th>
        </tr>
    </thead>
    
    <tbody> 
        <tr>            
            <td>小明</td>       table data  
            <td>96</td>
            <td>93</td>
        </tr>
        <tr>            
            <td>小红</td>         
            <td>100</td>
            <td>90</td>
        </tr>
    </tbody>            
    
    <tfoot> 
        <tr>            
            <td>总分</td>         
            <td>196</td>
            <td>183</td>
        </tr>
    </tfoot>            
</table>

2.table样式

  • table-layout
<style>
    table{
        table-layout:auto     <!--根据行列内容分割表格长宽，做不到均分-->
                    fixed     <!--尽量均分表格-->
        }
</style>
  • border-spacing $ border-collapse

一般表格都会加这两句话，使之看起来不会分离

<style>
   table{
       border-spacing:0;               <!--控制border间的距离--> 
       border-collapse:collapse;       <!--控制border是否合并-->
       }
</style>

三.img图像标签

1.作用：

发出 get 请求，展示一张图片(chrome开发者工具中可以看出)

2.属性：

  • alt:

当图片加载失败时，显示信息替代该页面

alt="图片加载失败，重新输入"
  • src:

=source,放入图片名字

<img src="./dog.png" > doggy </img>
  • height & width: 
height"400"
width= "400"

设置图片长度和宽度，一般来讲，作为前端工程师不能让图片变形

一般是width属性和height属性只设置了一个，另一个没有设置。浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800像素 x 800像素，width属性设置成200，那么浏览器会自动将height设成200。

3.事件

onload和onerror

<img id ="sbb" width="400" src="dog.png" alt="一只狗">
    <script>
        sbb.onload=function(){
           console.log("加载成功"); 
        }；   
        sbb.onerror=function(){
           console.log("加载失败");     <!--用户体验优化，加载失败，则以图片代替-->
           sbb.src="/404.png";
        }； 
    </script>
</img>

4.响应式 max-width:100%

使用这个操作，图片会随着页面的大小而变化

<style>
      img {
        max-width: 100%;     
      }
</style>

四. form标签

1. 作用

发送 get 或 post 请求，然后刷新页面

2. 属性

<form action="/xxx"         <!--控制转到的页面，与后端有关-->
autocomplete = "on"         <!--自动给出内容补全建议-->
method ="POST"              <!--设置方法-->
target ="_blank"            <!--新页面打开，target用法同上-->
>
<input type="text"  name="username">   <!--创建输入框框-->
<input type="submit"  value="走起">   <!--创建提交按钮，value值为自定义的值-->
</form>

提交按钮有两种方法可以表示: 

1.
<input type="submit"  value="走起">   <!--创建提交按钮，value值为自定义的值-->

2.
<button type="submit"> 走起 </button>

两者的区别： 2.中间除了可以用文字，还可以用其他元素如 图像 等设计按钮。

五.input标签

1. 
<input type="text">   <!--创建输入文本-->
2.
<input type="color">   <!--创建输入颜色-->
3.
<input type="password">   <!--创建输入密码，以·····代替-->
  1. radio单选
<input type="radio"  name="gender">男              <!-- 男 按钮-->
<input type="radio"  name="gender">女            <!-- 女 按钮-->

用name标记两个input，表示勾选内容唯一

  1. checkbox
<input type="checkbox"  name="hobby"> 唱
<input type="checkbox"  name="hobby"> 跳
<input type="checkbox"  name="hobby"> rap
<input type="checkbox"  name="hobby"> 篮球

表示勾选爱好内容

  1. file，上传文件
<input type="file">  上传文件
<input type="checkbox"  multiple>  上传多个文件

!!!注意事项：

  • 一般不监听input的click事件
  • form里面的input需要有name
  • form里要放入type=submit才能触发submit事件

6.其他标签

1.textarea 文本区域

<textarea style="resize:none;width:50%;height:300px">

</textarea>

2.select 选择内容

<select>
    <option value="1"> -请选择- </option>
    <option value="2"> 星期一 </option>
    <option value="3"> 星期二 </option>
    <option value="4"> 星期三 </option>
    <option value="5"> 星期四 </option>
    <option value="6"> 星期五 </option>
</select>

进度很慢，继续训练,加油干就完事了！

avatar
文章
阅读
粉丝