HTML笔记

1、HTML 标签

<h1> 表示一个大标题;

<p> 表示一个段落;

<a> 表示一个连接

<br/> 标签: 表示换行(这是一个没有关闭标签的空元素),但是最好使用<br/>

<b> 标签:表示粗体文本

<em> 标签:定义着重文字

<i> 标签:表示斜体

<small> 标签:表示小号字

<strong> 标签:表示加重语气

<sub> 标签:表示下标字

<sup> 标签:表示上标字

<ins> 标签:表示插入字

<del> 标签:表示删除字

<code> 标签:表示计算机代码

<kbd> 标签:表示键盘码

<samp> 标签:表示计算机代码样本

<var> 标签:定义变量

<pre> 定义预设文本

<abbr> 标签:表示缩写

<address> 标签:表示地址

<bdo> 表示文字方向

<blockquote> 标签:表示长的引用

<q> 标签:表示短的引用语

<cite> 标签:定义引用、引证

<dfn> 标签:表示定义一个定义项目

2、HTML 属性

class: 表示html元素定义一个或多个类名(classname)(类名从样式文件引入),class=“xx”,引号内可以填入多个class属性

id:表示元素的唯一id ,只能填写一个,多个无效

style:表示规定元素的行内样式

title:描述元素的额外信息(作为工具条使用)

3、HTML 标题

  • 1、标题: <h1><h6>,其中<h1></h1>为最大的标题<h6></h6>为最小的标题
  • 2、水平线: <hr>在页面创建水平线
  • 3、注释 :
  • 4、链接:<a href="链接地址">具体链接(文本、图片、数字等内容)</a>

4、HTML 头部

元素:标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接

<link>元素:定义了文档与外部资源之间的关系,通常用于连接到样式表

<style>元素:定义了html文档的样式文件引用地址,也可以直接添加样式来渲染html

<meta>元素:描述了一些基本的元数据,通常用于指定网页的描述,关键词,文件最后修改的时间,作者等其他数据<meta>一般放置在 <head>区域

<script> 元素:定义脚本文件

元素:定义文档的标题 <h4 id="5、HTML-样式-CSS"><a href="#5、HTML-样式-CSS" class="headerlink" title="5、HTML 样式 CSS"></a>5、HTML 样式 CSS</h4><ul> <li>内联样式:在HTML元素中使用style属性</li> </ul> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">style</span>=<span class="string">"color:blue;margin-left:20px;"</span>></span>这是一个段落<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure> <ul> <li>内部样式表:在HTML文档头部区域使用<style>元素来包含CSS</li> </ul> <p>​ </p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span></span><br><span class="line">body {background-color:yellow;}</span><br><span class="line">p {color:blue;}</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br></pre></td></tr></table></figure> <ul> <li>外部引用:引用外部CSS文件</li> </ul> <p>​ </p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"mystyle.css"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br></pre></td></tr></table></figure> <h4 id="6、HTML-图像"><a href="#6、HTML-图像" class="headerlink" title="6、HTML 图像"></a>6、HTML 图像</h4><p> <code><img></code> :表示图像标签</p> <p> <code><src></code> :表示图像路径或者源文件</p> <p> <code><alt></code> : 表示为图像设置一串可以预备的可替换的文本</p> <p> <code><width></code> : 表示图像的宽</p> <p> <code><height></code> :表示图像的高</p> <p> <code><map></code> : 表示定义图像地图</p> <p> <code><area></code> : 表示图像地图中的可点击区域</p> <h4 id="7、HTML-表格-(table)"><a href="#7、HTML-表格-(table)" class="headerlink" title="7、HTML 表格 (table)"></a>7、HTML 表格 (table)</h4><p> <code><tr></code> : 表示表格中的行</p> <p> <code><t></code> : 表示表格中的列</p> <p> <code><th></code> : 表示表格中的表头</p> <p> <code><caption></code> : 定义表格的标题</p> <p> <code><colgroup></code> : 表示表格中的组</p> <p> <code><col></code> : 表示表格中列的属性</p> <p> <code><thead></code> : 表示表格的页眉</p> <p> <code><tbody></code> : 表示表格的字体</p> <p> <code><tfoot></code> : 表示表格的页脚</p> <h4 id="8、HTML-列表"><a href="#8、HTML-列表" class="headerlink" title="8、HTML 列表"></a>8、HTML 列表</h4><ul> <li>有序列表</li> </ul> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br></pre></td></tr></table></figure> <ul> <li><p>无序列表</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure> </li> <li><p>自定义列表</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">dl</span>></span> : 自定义列表的开始标签</span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">dt</span>></span> : 自定义列表项的开始标签</span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">dd</span>></span> : 自定义列表项的具体描述</span><br></pre></td></tr></table></figure> </li> <li><p>列表标签</p> <p>1、<code><ol></code> 有序列表</p> <p> 2、<code><ul></code> 无序列表</p> <p> 3、 <code><li></code> 列表项</p> <p> 4、 <code><dl></code>自定义列表</p> <p> 5、 <code><dt></code> 自定义列表的项</p> <p> 6、 <code><dd></code> 自定义列表项的描述</p> </li> </ul> <h4 id="9、HTML区块-div和span"><a href="#9、HTML区块-div和span" class="headerlink" title="9、HTML区块 div和span"></a>9、HTML区块 div和span</h4><ul> <li>div 元素: 块级元素,可用于组合其他HTML元素的容器</li> <li>span元素: 内联元素,可用作文本的容器</li> </ul> <h4 id="10、HTML-form表单"><a href="#10、HTML-form表单" class="headerlink" title="10、HTML form表单"></a>10、HTML form表单</h4><ul> <li>1、 <code><form></code> 提供用户输入的表单</li> <li>2、 <code><input></code> 输入框</li> <li>3、 <code><textarea></code> 多行文本输入框</li> <li>4、 <code><label></code> input元素的标签,一般为输入标题</li> <li>5、 <code><fieldset></code> 一组相关的表单元素,并用外框包含起来</li> <li>6、 <code><legend></code> fieldset元素的标题</li> <li>7、 <code><select></code> 下来列表</li> <li>8、 <code><optgroup></code> 选项组</li> <li>9、<code><option></code> 下拉列表中的选项</li> <li>10、 <code><button></code> 按钮</li> <li>11、 <code><datalist></code> 指定一个预先定义的输入控件选项列表</li> <li>12、 <code><keygen></code> 表单的密钥对生成器字段</li> <li>13、 <code><output></code> 定义一个计算结果</li> <li>14、 <code><CheckBox></code> 复选框</li> <li>15、 <code><Radio Button></code> 单选框</li> </ul> </style></li></ul>