03_第一天(HTML扫盲)

学习方法:w3cschool HTML教程,网址如下:

https://www.w3school.com.cn/html/index.asp

HTML(英语:Hyper Text Markup Language,简称:HTML )也叫作超文本标记语言,是一种使用结构化 Web 网页及其内容的标记语言。

推荐刚开始学习使用记事本编写代码,为以后打好基础。
初学者有以下一些注意点:
1.不要直接使用一些编辑器直接生成html文件架构,请务必自己跟着教程手敲几遍。
2.不要忽略每一个标签,除非已告诉你,该标签废弃。
3.尽量记住所有的全局属性,以及常用标签的专属属性。
4.不要学过一遍就不再回头看,要经常写,才能记得牢固。
5.如后续想到更多,会进行补充…

以下是我记录的我学习过程中所遗漏或忽视过的标签。如不感兴趣可直接跳过。

  • doctype 规定了文档类型。
<-- 声明是html5的文档类型 -->
doctype html>
  • 文本格式化
<body>
        
        
        太吾村领头人
        <br>
        
        <em>着重文字em>
        <br>
        
        <small>小号small>
        <br>
        
        <i>斜体i>
        <br>
        
        <strong>加重文字strong>
        <br>
        
        <sup>上标sup>
        <sub>下标sub>
        <br>
        
        <ins>插入文字ins>
        <br>
        
        <del>删除文字del>
        <br>
        

        
        

        
        <code>
            int i=0;<br>
            int j=1;<br>
            print(i+j);<br>
        code>
        <br>
        
        <kbd>键盘输入kbd>
        <br>
        
        <pre>
            代码   空格
            啊啊啊
        pre>
        <br>
        

        
        
        <abbr title="United State America">USAabbr>
        <br>
        
        <address>
            Written by TaiWuCun 2022/3/23
        address>
        
        <bdo dir="ltr">从左到右bdo>
        <br>
        <bdo dir="rtl">从右到左bdo>
        
        <p>
            TaiWuCun say:
            <q>Hello World!q>
        p>
        
    body>

运行结果
03_第一天(HTML扫盲)_第1张图片

  • a标签,链接
<body>
    
    <a href="https://www.baidu.com/">百度a>
    
    <br>
    当前页: <a href="https://www.baidu.com/" target="">当前页打开a>
    <br>
    新建标签页: <a href="https://www.baidu.com/" target="_blank">新建标签页a>
    <br>
    
    <a href="#here">点击跳转到id为here的元素a>
    <div style="width:1px;height:800px">div>
    <div style="width:500px;height:800px" id="here">我的id是herediv>
body>

要注意的一点是,a标签可做锚点来作为本文档的书签,跳转至对应的元素处。

  • id分大小写,并且具有唯一性,给元素定义“身份证”
  • head标签

1.HTML 头部元素包含关于文档的概要信息,也被称为元信息(meta-information)。
2.可以添加在头部区域的元素标签为: title, style, meta, link, script, noscript 和 base

base标签的作用是,描述文档默认地址或默认目标(target)

meta标签的作用是,规定页面描述,关键词,文档作者、最后修改时间以及其他信息
文档描述

关键词

  • img图像标签

设置图像对齐方式

提示:在实际项目中,应较少的加载图片资源,比如icon图标可放置在一张图片上,通过定位来使用,减少资源请求

  • table表格标签

要注意,不管是td 或是 th标签,其外部都应有tr标签包裹

<table border="1">
<tr>
<th>row 1, cell 1th>
<th>row 1, cell 2th>
tr>
<tr>
<td>row 2, cell 1td>
<td>row 2, cell 2td>
tr>
table>
  • ul和ol列表标签

注意点:
1.ul和ol标签都有默认的padding和margin属性初始值,因此在使用过程中,如果发现样式有些不合你意,记得想到这一点。
2.ul显示的项是·
3.ol显示的项是1(阿拉伯数字)

  • dl,dt,dd自定义列表

这里我直接拿官方示例来演示
这个标签我其实不太常用,近乎于没用过

<dl>
<dt>Coffeedt>
<dd>- black hot drinkdd>
<dt>Milkdt>
<dd>- white cold drinkdd>
dl>

运行结果:
03_第一天(HTML扫盲)_第2张图片

  • 版权符号写法

html Copyright/© + [dates] + [author/owner]

你可能感兴趣的:(向‘前端工程师‘出发吧!,html)