Day01-html-2020707

HTML5学习 笔记

（B站up主：狂神说Java）共19part

HTML（超文本标记语言）

W3C（万维网联盟）

标准：

  • 结构化标准语言：html

  • 表现标准语言：CSS

  • 行为标准：JavaScript

注释<!-- -->

  1. ctrl+"/"

<meta>描述性标签

描述性标签，它用来描述网站的信息
一般用来做SEO
例：
<meta name="descripition" content="文本"

标题标签<h1>标题</h1>

  • 共六级h1-h6（大到小）

段落标签<p>段落</p>

换行标签<br/>

  • 这是一个：自闭合标签

水平线标签<hr/>

粗体标签<strong>粗体</strong>

斜体标签<em>斜体em

特殊符号& ;

  • 空格：&nbsp;
  • 大于：&gt;
  • 小于：&lt;
  • 版权号：&copy;

注：格式(特殊符号)：& ;

图像标签<img src="" alt="">

<img src="path" alt="text" title="text" width="x" height="y">
注解：
     src：图像地址（必填）
     	相对路径&绝对路径
     	../ 上一级目录
     alt：图像代替文字（必填）
     title：悬停文字
     width：宽度
     height：高度

链接标签<a herf="">文本</a>

<a href="path" target="目标窗口位置">文本或图像</a>
注解：
    href：链接路径、想跳转的页面（必填）
    target：链接窗口在哪打开
    	_self 自己窗口（本窗口）
    	_blank 新窗口

锚链接<a name="">``</a>``<a href="">``</a>

<a name="here"></a>
   用作标记,here为标记名
<a href="#here">点击跳转</a>
   在标记名前加井号，点击即可跳转到标记点"here"

功能链接<a href="mailto:">text</a>

  • 邮箱跳转

    <a href="mailto:123456@qq.com">点击跳转</a>

  • QQ跳转

    1. 百度搜索QQ推广
    2. 推广工具（tab栏）
    3. 输入信息
    4. 复制代码即可

块元素

无论内容多少，该元素独占一行（p、h1-h6……）

行内元素

内容撑开宽度，左右都是排在一行（a、strong、em……）

列表学习

  1. 有序列表（试卷、问答……）

    <ol>
	<li>这是第一个</li>
	<li>这是第二个</li>
	<li>这是第三个</li>
	<li>这是第四个</li>
</ol>

  2. 无序列表（导航栏、侧边栏……）

    <ul>
    <li>点</li>
    <li>点</li>
    <li>点</li>
    <li>点</li>
</ul>

  3. 自定义列表（公司网站底部）

    <dl>
    <dt>表头</dt>
    
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>
	注释：
    	dl:自定义列表标签
    	dt:列表名称
    	dd:列表内容

表格学习

  1. 注释：

    • 表格：table
    • 行：tr
    • 列：td

  2. 标签：

    <table border="1px">
    <tr>
    	<td>1列</td>
        <td>2列</td>
        <td>3列</td>
    </tr>
</table>

  3. 跨行：rowspan

  4. 跨列：colspan

视频和音频

  1. 注释：

    • audio：音频
    • video：视频
    • image：图像
    • resources：资源

  2. 视频标签:

    <video src="../" controls autoplay></video>
    注释：
    	src:路径
    	controls:播放器
    	autoplay:自动播放

  3. 音频标签：

    <audio src="../" controls autoplay></audio>
    注释：
    	Chrome浏览器需要添加:muted

页面结构

元素名 描述
header 头部
footer 脚部
section 主体
article 文章内容
aside 侧边栏
nav 导航栏

如何做好开发者？

  1. (使用者)
  2. (观察者)
  3. (分析者)
  4. (开发者)
  5. (开发者)要考虑(使用者)感受

iframe内联框架

  1. 标签

    <iframe src="path" name="mainFrame"></iframe>
    注释：
    	src:引用页面地址
    	name：框架标识名

  2. width：宽

  3. height：高

  4. 例子

    <iframe src="" name="hello" frameborder="0" width="1000px" height="1000px"></iframe>
<a href="https://www.baidu.com" target="hello">使用内联框架跳转</a>
    注释：
    	此处iframe作为窗口，被跳转链接引用
posted @ 2022-07-07 18:01  机智的冬瓜  阅读(32)  评论(0)    收藏  举报