学习资料:《HTML菜鸟教程》
学习目标:熟悉HTML的语法即可
开发环境:VSCode + Chrome + Plugin:Open In Default Browser
进度:2021.6.1 完成HTML的语法熟悉
HTML简介
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> HTML教程 Fighting!!! </title>
</head>
<body>
<h1> 标题 </h1>
<p> 段落 </p>
</body>
</html>
代码解析
- <!DOCTYPE html> 声明是HTML5文档。有助于浏览器正确显示内容,告知浏览器用了哪种HTML版本,doctype不区分大小写
- <html> 是HTML页面的根元素
- <head>包含文档的meta data和title data
- <body>包含元素的可见内容
什么是HTML?
- 超文本标记语言 Hyper Text Markup Language
- 不算严格的编程语言,没有if-else
HTML标签(元素)
- 带尖括号的文本内容,例如<html></html>
- <p></p>
HTML标签和属性(以key = "value" / 'value' 的形式出现)
- 大小写不敏感,尽量采用小写
- 常见的属性
- class:为元素定义一个类
- id:元素的唯一id
- sytel:样式
- title:额外的信息,但这个和标签title是同名的,应该是同名功能不同
- 常见的标签和一些tips
- <a> href必须得加http/https,否则链接失效。属性定义在标签内,标签之间,代表超链接的名字
<a href = 'https://www.BAidu' target = "_blank"> 百度链接 </a>
- 如果是超链接名字里有双引号,那必须最外层用单引号,例如:name='John "ShotGun" Nelson'
- target可以代表打开的方式,_blank代表另起一页
- <h1></h1>是最大的标题,font标签的size为6是最大的字体。 不要通过标题来生成加粗/大号字体
- <hr>可以生成水平线
- <br>可以换行
- <!-- 注释 -->
- <p></p>会自动在行位添加换行符
- 连续的空格,只会当做一个空格
- 文本格式化标签
- strong 和 b 等价,都是加粗。出现的原因,是在一些场合,strong和em有加重语气
- em和i等价,都是斜体
<!DOCTYPE html> <html> <head> <!-- <meta charset = "utf-8"> --> <title> HTML教程 Fighting!!! </title> </head> <body> <b>加粗!</b> <br> <em>定义着重文字</em> <br> <i>定义斜体</i><br> <small>定义小号字</small><br> <sub>下标</sub><br> <sup>上标</sup><br> <ins>插入字</ins><br> <del>删除字</del><br> <!-- 计算机输出标签 --> <code>计算机代码</code><br> <kbd>键盘码</kbd><br> <samp>计算机代码样本</samp><br> <var>定义变量</var><br> <pre>预格式文本</pre><br> <!-- HTML 引文, 引用, 及标签定义 --> <abrr>定义缩写</abrr><br> <address>地址</address> <bdo dir = "rtl">123456</bdo> <!-- 以下均是一些文本格式,无特殊要考虑的地方 --> </body> </html>
-
head中有许多标签
-
<title>在HTML页面中是必须的
-
<base href = "xxx"> 如果其他地方的href没value,就会用base的href-value
-
<link>用于链接到样式表,有点像头文件引用
-
<style>通过样式来渲染HTML文档
-
<meta>描述基本的元数据。元数据不显示在浏览器上,但会被浏览器解析。可以作为引擎搜索的关键词
-
<script>用于加载js脚本语言
-
- <a> href必须得加http/https,否则链接失效。属性定义在标签内,标签之间,代表超链接的名字
HTML CSS【以内联样式举例】
- CSS生效的三种方法
- 内联样式:给HTML的style属性设值
- 内部样式表:在HTML文档<head>区,使用<style>元素来包含CSS(HTML全局)
- 外部引用:引用外部CSS文件【这种最好,外部引用,改变外部文件,可以改所有】
- 背景色,边距,字体颜色
<p style = "color:red;margin-left: 20px;background-color: black;">哈哈</p>
- 列举一些属性
- font
- color
- font-size
- text-align:对齐方式
- 后面在CSS专栏里会更具体地学习,这里但当涉猎
HTML图像
<img src = "http://www.runoob/images/pulpit.jpg" alt="haha" width="900px" height="900px" >
- <img>没有闭合标签
- src是url
- alt是图片加载失败后的tips
- width和height分别代表宽高(px)
- <area></area>标签,可以定义图片可点击区域以及跳转页面
HTML表格
<table border="1">
<th> 表头1 </th>
<th> 表头2 </th>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
- <table></table>实现表格
- border属性定义边框大小
- <th></th>代表表头
- <tr>代表一行
- <td>代表一行中的某个数据
- 因为table是父元素,所以子元素所有的节点都有属性border = 1
HTML列表
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
- 有序列表与无序列表
HTML布局
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:99px;float:left">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:right;">
内容在这里
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob
</div>
</div>
- <table></table>表格不是布局工具
- <div></div>直接整个块,然后div里的属性可以影响里面的元素
- 通过div标签和float属性进行HTML排版
HTML表单
<form>
First name : <input type = "text" value="ee">
<br>
Password : <input type = "password">
<br>
<input type = "radio" name ="sex" > Happy0
<br>
<input type = "radio" name = "sex1"> Happy1
<br>
<input type = "radio" name= "sex" > Happy2
<br>
<input type="checkbox" > bick0 <br>
<input type="checkbox" > bick1 <br>
</form>
<form name="input" action="your html path" method="get">
<input type="text" name="usewerwerrddewrewrwr">
<input type="submit" value="Submit">
</form>
- input标签中,type属性的常见类型
- password
- text
- radio:单选,name相同只有一个会被勾选
- checkbox
- 通过action可以将数据发送到your html path
HTML框架
<iframe loading="lazy" src="http://www.baidu" width="2000" height="2000"></iframe>
- iframe框架可以在浏览器中同时显示多个页面
HTML脚本
<script>
document.write("<p> this is a paragraph </p>");
</script>
<noscript>
sorry,your browser does not support js!
</noscript>
<p id="oo"> hello !!!!</p>
<script>
function MyOnclickFunc(){
document.getElementById("oo").innerHTML = "click change the text";
}
</script>
<button type = "button" onclick = "MyOnclickFunc()" ></button>
- script用于定义客户端脚本语言,例如JS
- <noscript>用于当浏览器禁止脚本语言时候的 try out
- 通过button,指定onlick属性值,可以触发JS事件
HTML字符实体
- HTML中某些字符是预留的。 就像C++中,有些字符是预留字符一个道理
- 表达方式:&entity_name &#entity_number
更多推荐
《HTML菜鸟教程》学习
发布评论