HTML学习笔记

顺晟科技

2021-08-23 11:04:55

179

html (hyper text markup language)知识点

html文档结构

<!-- 文档注释 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html> html5固定语法。
 文档注释
html root标签，通常指定属性 lang="en"
head body
title 在head内的标签，指定浏览器标题
meta 描述性标签，通常有至少有一个指定字符集UTF-8

标签类型

标签的右尖括号前可以有空格

标签也称为元素，有标签值，标签值可以是别的标签元素，可以有属性，多个属性用空格隔开，每个属性都有属性值

自闭合
- 如 <hr/> 斜杠和右括号中间不可有空格，斜杠前可有空格。
双标签
- 如 <h2>标题</h2> 右边的闭合标签斜杠两边都不能有空格。
- 结构： <标签名称标签属性=属性值标签属性=属性值>标签值</标签名称>
块元素
- 该元素独占一行如h, p标签
行内元素
- 如无换行标签，元素将排在一行，源码中换行不影响元素排列，如一些小的标签 a, strang, em ...

常用标签

h 标题通常有h1到h6 六级标题
p （part) 段落标签
a (anchor) 锚标签，用于跳转，超链接
br （break carriage return）换行
hr （horizontal) 水平分割线换行，不能放入p标签内

常见属性

title head中的标题作为浏览器标题，其他元素的标题为鼠标悬停时显示的文本内容
alt （alternatively）图片等资源未加载完成时用指定文本代替显示
name 标记元素的名称，表单提交时作为key提交，单选框用以分组，等等
id 标记元素的ID，作为文档里引用如<label for="eleId"> ，等等
width 宽度
height 高度
border 边界宽度，通常不使用，通过css实现
src （source）来源
href （hypertext reference）
target 指定链接打开的位置

常用特殊符号

由于html文档中一些字符为标记符号，这些字符作为普通字符时，需要其他表示方法

使用 &; 两个符号包裹英文单词

idea 编辑器中键入and符号后ctrl+回车可进行各种符号预览
  空格
> 大于 (greater-than)
< 小于 (less-than)
&eg; 大于 (equal or greater-than)
&el; 小于 (equal or less-than)

常规网页布局

网页布局使得文档结构清晰，可读性强，便于维护和扩展。

header：标题头部区域的内容
footer：标题脚部区域的内容，常见各大网站拉到最下方的区域
section：web页中一块独立区域
article：独立文章内容
code：独立代码内容
aside：相关内容或应用，常见于侧边栏
nav（navigation）：导航类辅助内容

`img` 图像标签

<img src="../resources/image/1.jpg" alt="高清大图" title="提示">

通常的属性有：src, title, alt

次要的属性有：width, height

常见的类型： jpg, gif, jepg, png, bmp(位图)

a (anchor) 标签，锚标签，链接标签

<a href="http://www....." target="_blank" >
  实体内容
</a>

实体内容点击即可跳转，实体内容可以是普通文本text，也可以是图片img元素

通常的属性有：href, target, title

次要的属性有：

常见的类型：
标记，使用井字符# ，跳转到标记语法为：链接#元素名称，href#name
根据href可以跳转到别的页面
如果跳转本页面的元素井号前面的链接地址可不填

可使用a标签标记一个位置 <a name="top">这里标记为顶部</a>

点击跳转为 <a href="#top">点我跳转到顶部</a>

功能性链接

如邮箱：<a href="mailto:ttaolu.163.com">发送邮件给我</a>

qq推广：

<a href="http://wpa.qq.com/msgrd?v=3&uin=469495751&site=qq&menu=yes" target="_blank">
  <img border="1" src="http://wpa.qq.com/pa?p=2:469495751:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

list 列表标签 order,unordered,definition

有序列表 ol (order-list)

<ol>有序列表
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
</ol>

无序列表 ul (unordered-list)

<ul>无序列表
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
</ul>

自定义列表dl (definition-list)

dt （definition-list-title）
dd （definition-list-data）

<dl>自定义列表
    <dt>列表头dt</dt>
    <dd>内容dd1</dd>
    <dd>内容dd2</dd>
    <dd>内容dd3</dd>
    <dd>内容dd4</dd>
    <dt>列表头dt333</dt>
    <dd>内容dd3331</dd>
    <dd>内容dd3332</dd>
    <dd>内容dd3333</dd>
</dl>

table 表格

行 tr ： table row

列 td ： table data, （数据）每一行存放的数据

table 的属性有

title
td 的属性有:

rowspan: 该数据跨几行，如果跨两行，则下一行的数据从第二列开始排列（列位置被占用）
colspan: 数据跨几行，如果跨两列，则该行剩下的数据全部往后一格

<table border="1px" title="学生成绩表格">
  <tr >
    <td colspan="3">学生成绩</td>
  </tr>
  <tr>
    <td rowspan="2">大乔</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>99</td>
  </tr>
  <tr>
    <td rowspan="2">周瑜</td>
    <td>语文</td>
    <td>89</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>102</td>
  </tr>

</table>

学生成绩表大乔语文 100 数学 99 周瑜语文 89 数学 102

audio 音频

常见属性：

src : 资源路径

title：悬停提示

controls ：控制台

autoplay ：自动播放

loop：循环播放

muted：静音

<audio src="../resources/media/audio/G.E.M.邓紫棋-来自天堂的魔鬼.mp3" controls autoplay loop title="邓紫棋-来自天堂的魔鬼"></audio>

video 视频

常见属性：参考音频

<p>
    <video width="500" height="300" title="花朵视频" controls autoplay>
        <source src="../resources/media/video/flower.mp4" type="video/mp4">
        <source src="../resources/media/video/flower.mp4" type="video/ogg">
        <source src="../resources/media/video/flower.mp4" type="video/webm">
        <!-- 以下两个不行 -->
        <!--    <source src="../resources/media/video/flower.mp4" type="video/avi">-->
        <!--    <source src="../resources/media/video/flower.mp4" type="video/application/octet-stream">-->
    </video>
    <br>
</p>
<p>
    <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵视频2" autoplay loop></video>
    <br>
</p>
<p>
    <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵视频3" autoplay loop></video>
    <br>
</p>

无法播放问题：
- windows系统设置问题-windows功能未启用或MIME类型未配置
  
  control-程序-卸载程序-侧边栏的启动或关闭windown功能
  
  专业版打开Windows功能：运行-OptionalFeatures
  
  勾选两项：
  
  Internet Information Services/Web 管理工具/IIS 管理控制台 (勾选)
  Internet Information Services/万维网服务 (勾选)，该选项不用进行展开了
  
  按下win键-输入IIS打开控制台
  
  专业版打开IIS控制台：运行-inetmgr
  
  双击MIME类型-检查.mp4是否有配置，如无，右侧操作栏点击添加-输入扩展名.mp4和mime类型video/mp4
  
  其他参考命令：
  
  本机的IIS服务重启，停止，启动: iisreset, net stop iisadmin /y, net start iisadmin
  
  重启或者停止w3服务: net start w3svc, net stop w3svc
- 视频本身问题-由视频本身无法被浏览器解析的情况
  
  通过各种转码软件重写视频源件
  
  放弃该视频，更换其他视频

iframe 内联框架

<p>
    <iframe src="//player.bilibili.com/player.html?aid=804847829&bvid=BV1ay4y1V7XG&cid=387543623&page=1"
            scrolling="no" border="0" frameborder="no" framespacing="0" width="900" height="600"
            title="B站小视频" allowfullscreen="true"></iframe>
</p>
<p>
    <iframe name="iframe2" src="https://www.bilibili.com/" width="300" height="200" frameborder="0"
            title="B站首页"></iframe>
</p>
<p>
    <!-- 内联框架跳转 src属性可以省略也可以为空src=""，src为其他时，点击跳转就会覆盖原iframe的内容 -->
    <iframe name="iframe3" width="300" height="200" frameborder="1" title="什么都没有"></iframe>
    <a href="https://www.cnblogs.com/ttaolu/" target="iframe3" title="博客">跳转至我的博客</a>
</p>

form 表单

属性

name: 表单名称
method: 表单提交时，表单中的元素内容以键值对置入url（get ），元素的键值对内容以data方式发送(post)
action: 表单提交位置，提交时表单中的元素内容信息发往地址，可以是网站、请求处理地址

表单元素（标签）

label 元素
- for 属性：指定其他元素id
select 元素
- 属性：name，id，
- 包含元素：option
  - option 属性有： value，selected 并可指定option 标签的值，用于提示用户该选项文本描述信息
textarea 元素
- 属性：name，id，value，placeholder，cols，rows
input 元素
- type 属性
  - text 文本框
  - password 文本框
  - number 文本框
  - search 文本框
  - url 文本框
  - email 文本框
  - checkbox 复选框
  - radio 单选框，单选框多个元素分为一组，指定元素的name属性为相同即可，即相同name的radio元素为一组
  - submit 按钮
  - reset 按钮
  - button 按钮
  - image 按钮
  - file 文件选择按钮，
  - hidden
  - range 滑块
- name 属性，表单元素key
- id 属性，表单元素id，用于识别
- value 属性，表单元素的值，很多元素有默认值，一个元素只有一个值，但是可以多个元素有相同的name，以达到一个key多个value
  
  如是k1=v1&k1=v2&k1=v2，这里三个元素name都为k1，有三个值分别未v1,v2,v2
- title 属性，悬停提示，鼠标悬停到该组件时显示的文本，常用于文本框
- placeholder 属性，用户提示，常用于文本框，内容为空时，文本框内显示文本提示用户输入什么信息
- maxlength 属性，文本框限制用户输入的字符个数
- accpet 属性，可接受value的类型，
  
  可指定后缀".png",
  
  可指定类型"image/*",
  
  可指定多个，用逗号分隔"image/gif,image/jpg", ".csv,.jmx"
  
  可同时指定类型和后缀，用逗号分隔"image/*,.md"
- required 属性，非空验证，提交时，如果该元素未被选中或为空未输入，无法进行提交，注意单选框只需指定一个元素即可，指定多个效果相同，
  
  表示该单选框组内必须有一个元素被选中
- patten 属性，正则验证，提交时，用正则表达式验证输入框合法性，无法进行提交
- readonly 属性，使该元素只读，不可修改
- disabled 属性，使该元素不可互动，如无法输入，点击等
- hidden 属性，用于隐藏该元素
- selected 属性，用于单选或复选框被选中，默认未选中，下拉列表框选项，默认项，如果指定多个都被选中，那么取最后一个
- checked 属性，单选、复选框默认为未选中，该属性指定选中
- multiple 属性，启用复选功能，常用组件类型为为 file
- size 属性，初始宽度，根据类型type的不同，单位有字符char(如文本框)，像素px(如各种按钮大小)
- rows 属性用于多行文本框（文本域），指定文本框行数
- cols 属性，用于文本框，

<h1>用户注册</h1>
<form action="1.learn.html" method="get">
    <label>名字：<input type="text" name="userName" title="请输入用户名" placeholder="你好啊，朋友"/></label>
    <br>
    <label>密码：<input type="password" name="passWord"/></label>
    <p>
        <input type="submit" name="signIn" value="注册B站账户">
        <input type="reset" name="reset">
    </p>
</form>
<hr>
<!--登录界面2-->
<h1>用户登录</h1>
<form action="2.list.html" >
    <label>名字：<input type="text" name="userName"/></label>
    <br>
    <label>密码：<input type="password" name="passWord"/></label>
    <p>
        <input type="submit" value="登录到w3c" name="login">
        <input type="reset" name="reset">
    </p>
</form>
<hr>
<h2>单选框</h2>
<form name="单选框表单" method="get" action="1.learn.html">
    <!--  如果都是checked， 那么最后的将覆盖之前的，也就是只有最后一个生效。-->
    <p>单选框：
        <input type="radio" name="sex" value="male" required>男
        <input type="radio" name="sex" value="female" required>女
    </p>
    <p>单选框：
        <label><input type="radio" name="sex1" value="male" required >男</label>
        <label><input type="radio" name="sex1" value="female" required>女</label>
    </p>
    <input type="submit">
    <br/>
</form>
<hr>

<form action="1.learn.html">
    <p id="gg">多选框表单:
        <!--    <label for="gg">game over:</label> required 属性 必须选中 -->
        <label><input type="checkbox" name="hobby" value="sleep">吃饭</label>
        <label><input type="checkbox" name="hobby" value="code">睡觉</label>
        <label><input type="checkbox" name="hobby" value="game">敲代码</label>
        <label><input type="checkbox" name="hobby" value="chat">打游戏</label>
        <label><input type="checkbox" name="hobby" value="chat">打游戏</label>
    </p>
    <input type="submit">
</form>
<hr>

<form action="1.learn.html">
    <p>
        <label for="stat">选择:</label>
        <select name="location" id="stat">
            <option value="china">中国</option>
            <option value="us" selected>美国</option>
            <option value="wai">外国</option>
            <option value="wai">外国</option>
        </select>
    </p>
    <p>
        <label for="textarea">说明：</label>
        <br>
        <textarea name="say" id="textarea" cols="30" rows="10" placeholder="请输入你的意见！"></textarea>
    </p>
    <p>
        <label for="idFile">选择你的头像</label>
        <input type="file" name="sFile" id="idFile" multiple accept=".png">
        <input type="button" name="upload" id="idUpload" value="开始上传">
        <label for="idUpload">上传</label>
    </p>

    <p><input type="submit"></p>

</form>

浏览器快捷键

Ctrl + U 查看网页源代码（*****）
F12 显示/隐藏开发者工具（*****）
Ctrl + Shift + I 审查元素(opean drawer) 同上
Shift + F5 去缓存刷新（*****）
Esc 停止加载（*****）
Shift + Esc 任务管理器
F6 选中地址栏
F5 刷新（重新载入）
Ctrl + H 显示历史记录
Ctrl + Shift + Del 清理上网痕迹
Ctrl + Click 新标签打开不跳转
Ctrl+Shift + Click 新标签打开并跳转
Alt + Click 图片快速保持图片

Idea 编辑 html 技巧
tab自动完成标签，如输入h1后按一下tab

上一篇：powershell:Measure 下一篇：如何使JavaScript类可移植到

网站建设

Html

HTML学习笔记

html (hyper text markup language)知识点

html文档结构

标签类型

常用标签

常见属性

常用特殊符号

常规网页布局

`img` 图像标签

a (anchor) 标签，锚标签，链接标签

list 列表标签 order,unordered,definition

table 表格

audio 音频

video 视频

iframe 内联框架

form 表单

属性

表单元素（标签）

浏览器快捷键

Idea 编辑 html 技巧

Html

HTML学习笔记

html (hyper text markup language)知识点

html文档结构

标签类型

常用标签

常见属性

常用特殊符号

常规网页布局

img 图像标签

a (anchor) 标签， 锚标签，链接标签

list 列表标签 order,unordered,definition

table 表格

audio 音频

video 视频

iframe 内联框架

form 表单

属性

表单元素（标签）

浏览器快捷键

Idea 编辑 html 技巧

`img` 图像标签

a (anchor) 标签，锚标签，链接标签