HTML基础

html

浏览器内核

ie-Trident
firefox-Gecko
Safari-Webkit
Chrome-Blink
360/uc/qq-Webkit/Blink

web标准

结构(Structure)-html
表现(Presentation)-css
行为(Behavior)-javascript

vscode常用插件

chinese language pack for vs code

open in browser

anto rename tag

live server

文档类型声明标签

<!doctype html> 声明位于文档中的最前面的位置

lang语言类型种类

en 英文
zh-CN 中文

字符集

标签语义

标题标签

-

由大到小

这是一级标签

*段落标签、换行标签

段落标签 paragraph

这是段落标签

换行标签 break


新闻案例

文本类型化标签

或者

特殊标签-盒子（布局）

和
表示分割、分区，一个盒子独占一行

表示跨距，一行可以放多个盒子

*图像标签 单标签

相对路径和绝对路径

alt="替换文本" 图像显示不了时显示文字

title="鼠标悬浮提示文本"

width、height、border 宽度、高度、边框

*链接标签

_self 当前窗口打开， _blank新窗口打开

内部链接、外部链接、空链接#、下载链接、网页元素的链接

*锚点链接 href="#11" id="11"

注释和特殊字符

注释：<!— 注释的内容 —> 快捷键 ctrl + /
特殊字符：   < < > > & & ￥ ¥ ......

圣诞节案例— 段落标签，换行标签，图片标签，链接标签

表格标签

在table标签中加属性border来添加边框

table写样式 border-collapse: collapse来进行边框合并

<table border="2px" >
        <tr>
            <th>代码</th>
            <th>名称</th>
            <th>最新</th>
        </tr>
        <tr>
            <td>1</td>
            <td>农银</td>
            <td>1.075</td>
        </tr>
        <tr>
            <td>27</td>
            <td>广发</td>
            <td>0.903</td>
        </tr>
    </table>

小说排行榜案例—表格标签

列表标签

<ul> #无序列表
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ol> #有序列表
  <li>1<l/i>
  <li>2</li>
  <li>3</li>
</ol>

<dl> #自定义列表
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>联系我们</dd>
</dl>

表单标签

 <from action="url地址" method="提交方式" name="表单域的名称"> #表单域
  <input type="text" />  #表单元素
  <select> #选择框
    <option>1</option>
    <option selected="selected">2</option>
  </select>
  <textarea clos="50" rows="5">
     文本内容
  </testarea>
</form>
posted @ 2022-03-24 11:43  clp66  阅读(69)  评论(0)    收藏  举报