前端学习笔记

最新推荐文章于 2024-05-20 21:21:56 发布

weixin_44428199

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量57

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44428199/article/details/114954096

版权

HTML基础

HTML基础结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

标准的HTML网页包括最外层的HTML标签和内层的head和body标签
html标签作用：它告诉浏览器在标签内的所有内容就是HTML
head标签：存放着头部信息
body标签：网页中看到的所有内容都要写在body标签内
!DOCTYPE html标签：文档类型声明，没有结束标签。写在html标签前可以标注网页是标准模式，没写网页是混杂模式（不可取，会向以前的版本兼容)
meta标签: 存放着网页的元信息关键属性：http-equiv属性，name属性，content属性 ,charset属性
可以设置网页编码通常有utf-8（适合英文网页），gb2312 或gbk(适合中文网页)；
页面关键词(使用人们可能会搜索)
<meta name ="keywords" content="your tags"/>
优先使用IE最新版本和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

HTML常用标签

HTML标签是由一对尖括号<>及标签名组成的分为起始标签和结束标签例如:<p> </p>
标签一般成对出现
单标签：某些HTML元素没有结束标签如：

<br/>、<hr/>、<img/>、<input />

常用的标签如下：

<body>
	标题符号	<h1>到<h6>
	段落标签 <p></p>
	链接标签 <a></a>
	换行 <br/>
	横线 <hr/>
	文字斜体<i></i> <em></em>
	文字加粗<b></b> <strong></strong>
	预格式化<pre></pre> 字体会发生变化
	文字上标<sup></sup>
	文字下标<sub></sub>
	删除线<del></del>
	下划线<ins></ins>
</body>

一些特殊字符表
在这里插入图片描述

列表标签

无序列表

  type取值：
                          1、disc,实心圆(默认值)
                          2、circle,空心圆
                          3、square,实心矩形
                          4、none,不显示标识

<ul type="disc/circle/square/none">
 <li></li>
 <li></li>
 <li></li>
</ul>

有序列表

type取值：
1、1 (默认数字123456）
2、a (小写英文 abcde）
3、A (大写英文ABCDE)
4、i（小写罗马数字）
5、I（大写罗马数字）

<ol  type="1/a/A/i/I">
 <li></li>
 <li></li>
 <li></li>
</ol>

自定义列表

使用场合: 图文混排

<dl>
 <dt>哈哈哈</dt>    <!--列表可以有多个dt-->
  <dd>哈哈哈</dd>  <!--dd和dt是同级标签 不能嵌套使用-->
  <dd>哈哈哈</dd>   <!--每个dt可以有多个dd-->
   <dd>哈哈哈</dd>
 <dt>哈哈哈</dt>
  <dd>哈哈哈</dd>
  <dd>哈哈哈</dd>
   <dd>哈哈哈</dd>
</dl>

表格标签

<table align="center/right/left" 
name="table" border="5"  width="500" height="500" 
cellpadding="10"//文字距表格边框为10px  
cellspacing="10"//表格间距为20px > //还有frame rules等属性
     <caption>标题</caption> 
     <thead>  <!-- 表格头 可设置属性 设置后整个头发生变化-->
     <tr bgcolor="red" width="" height="">
     <td rowspan="2" colspan="2"></td> <!--跨2行跨2列 -->
     <td></td>
     </tr> 
     </thead>
      <tbody align=”center“ valign=“top/bottom”>  
       <!-- 表格内容  可设置属性 设置后整个内容发生变化-->
   <tr>
     <td></td>
     <td></td>
   </tr> 
    </tbody>
     <tfoot>    <!-- 表格脚  可设置属性 设置后整个表格脚发生变化-->
   <tr>
     <td></td>
     <td></td>
   </tr> 
    </tfoot> 
</table>
同一行或者同一列的宽度或者高度取设置格子属性的最大值

表单标签

<form>
  <input type="submit/text/reset/radio/file/
  /password/button/hidden/image"
   name="" Maxlength="" Size="" value="" placeholder=""> 输入框
 
  <textarea rows="2" cols="2"> 多行文本框 设置为最多两行两列
 
  <select name="">  下拉选择器
  <optgroup label="hha"> 选项组
  <option value="1">1</option>  下拉选择器的选择项
  </optgroup>
  <optgroup label="hh"> 选项组
  <option value="2">2</option>
  </optgroup>
  <optgroup label="h"> 选项组
  <option value="3">3</option>
   </optgroup> 
  </select>
</form>

weixin_44428199

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记

HTML基础HTML基础结构HTML常用标签HTML基础结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body></html>标准的HTML网页包括最外层的HTML标签和内层的head和body标签html标签作用：它告诉浏览器在标
复制链接

扫一扫