简单的HTML认识

HTML,全称为Hyper Text Markup Language （超文本标记语言）。

常用开发工具有：1.vs code（全栈开发）  2.hbulider（纯前台开发工具） 3.sublime（简易速度快） 4.Webstorm

 

标签：用<xx>（开始）  </xx>（结束）做标记，其中可放置文本内容或其他标签，可嵌套使用。

元素：标签和其内容称为元素。

属性：以 key=”value”的形式存放在标签内。

 

HTML标准文档结构是以html为根节点，其下包括head 和body 。

其中head为明示浏览器渲染的基本配置，body为渲染的主要内容。

 

快捷生成标签之间的关系

h1>h2  h1包含着h2

h1+h2  h1与h2同级

h1{ }   { }内可填内容

h$*6  其中$为可列序号，从1开始，*n 表示生成n个

 

核心标签：块标签，行内标签

 

块标签

<div></div>无语义标签块标签,一般作用容器用于页面布局。

 

<h1></h1>~<h6></h6> 表示标题，默认有六个级别的标题。h$*6(快捷)

 

 

ol  表示有序列表 ordered list li 表示列表项

<ol>

<li>第1项</li>

<li>第2项</li>

<li>第3项</li>

</ol>

 

ul 表示有序列表 unordered list li 表示列表项

<ul>

<li>第1列</li>

<li>第2列</li>

<li>第3列</li>

</ul>

 

dl 表示定义列表 defined list dt 表示定义标题 defined title dd 表示定义表示 defined description （其中dt和dd可以由任意多个）

<dl>

<dt>五岳</dt>

<dd>泰山，嵩山，华山，恒山，衡山</dd>

</dl>

 

 

Table 表格 其中border这个数值越大，边框就越粗。 border--设置或获取绘制对象周围边框的宽度。  colspan 向右占用若干列  rowspan 向下跨越若干行

<table border="1">

<tr>

<td>111</td>

<td>222</td>

<td>333</td>

</tr>

</table>

 

colspan:

<table border="1">

<tr>

<td colspan="2">z1</td>

<td>z2</td>

<td>z3</td>

</tr>

<tr>

<td>z1</td>

<td>z2</td>

<td>z3</td>

</tr>

</table>

 

rowspan:

<table border="1">

<tr>

<td rowspan="2">z1</td>

<td>z2</td>

<td>z3</td>

</tr>

<tr>

<td>z1</td>

<td>z2</td>

<td>z3</td>

</tr>

 

 

p 标签表示段落

br 标签用于换行

 

行内标签

a标签表示链接 其中herp表示连接地址

绝对路径:从盘符开始的路径就是绝对路径。

相对路径:没有盘符，从当前路径开始。当前操作的文件所在的路径就是当前路径，用.表示。

一般都用相对路径。

 

<a href="http://www.bilibili.com/">哔哩哔哩</a>

<a href="./test/test.html">test page</a>

 

img 表示图片 src 表示图片地址，alt表示图片加载失败后显示的文本，title表示鼠标悬停的显示文本。img可以设置尺寸。

 

strong/em/var 表示强调

 

from表单

用途：向后台提交数据。

<form action="###" method="POST">

action为提交数据的指向地址 method为传输方式有post/get

 

<!-- 单行文本输入框 -->

用户名:<input type="text" name="user" /> <br />

密码:<input type="pwd" name="pwd" /> <br />

 

<!-- 多行文本输入框 -->

<textarea cols="50" rows="10" name="info"></textarea>

 

<!-- 单选按钮 -->

<input type="radio" name="sex" checked value="男"> 男

<input type="radio" name="sex" value="女"> 女

<br />

checked 为设定默认选项

 

<!-- 多选 -->

喜欢的颜色:

<input type="checkbox" name="hobby" value="红色"> 红色

<input type="checkbox" checked name="hobby" value="黄色"> 黄色

<input type="checkbox" name="hobby" value="蓝色"> 蓝色

<input type="checkbox" name="hobby" value="绿色"> 绿色

<br />

checked 为设定默认选项

 

<!-- 下拉列表 -->

水果:

<select name="">

<option value="">请选择</option>

<option value="苹果">苹果</option>

<option value="香蕉">香蕉</option>

<option selected value="桃子">桃子</option>

</select>

selected 为设定默认选项

<!-- 按钮 -->

 

<input type="button" value="普通按钮" />

<input type="reset" value="重置" />

<input type="submit" value="提交" />

<!-- 隐藏域 -->

<input type="hidden" value="10">

</form>

 

 

调试工具：在浏览器中 右键->检查或查看元素 启动devTools, 快捷键为F12。

转载于:https://www.cnblogs.com/codelong/p/11296359.html