HTML基本结构、命名及对表单专项练习解释

本文链接：https://blog.csdn.net/king_ho/article/details/104046512

HTML简介

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

整体结构

标签	描述
`<html>`	定义了该文件是用超文本标记语言来描述的
`<head>`	定义了文档的信息
`<link>`	定义了一个文档和外部资源之间的关系
`<title>`	定义了文档的标题
`<style>`	定义了HTML文档的样式文件
`<base>`	定义了页面链接标签的默认链接地址
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`body`	定义了HTML文档中的正文内容

Div、css规范命名

很多同志像我一样，给它们取名字犯难了，用拼音吧，明显很low啊 ~
而且慢慢会发现网上大神都是用一些简短的字母表达一些常用的名字
比如放置图片的div一般取名会叫pic这样。
so，养成一个给各族元素规范命名的习惯，是很有必要的。下面列出一些常见的部分样式命名：

类型	命名	描述
外套	wrap	用于最外层
头部	header	用于头部
主要内容	main	用于主体内容（中部）
左侧	main-left	左侧布局
右侧	main-right	右侧布局
导航条	nav	网页菜单导航条
内容	content	用于网页中部主体

注：所有的命名最好都小写 ,属性的值一定要用双引号("") 括起来，且一定要有值如class=“wrap”,id=“wrap”

HTML示例

下面主要用HTML的表单练习来展示HTML的基本构架：以商品订购为主题的HTML表单练习
这是以商品订购为主题的对HTML表单的练习，源代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8"><!--“utf-8”为万国码-->
<title>商品订购</title><!--“tittle”用来设定标题-->
<link href="index.css" rel="stylesheet" type="text/css">
<!--<link>此处调用了css文件-->
</head>
<body>
<div class="wrap">
<!--属性的值一定要用双引号("")括起来，且一定要有值如class="wrap",id="wrap"-->
  <div class="tittle"><center><h1>商品订购</h1></center>
  <!--居中、并赋予一级标题-->
</div>
<h3>账户登录</h3>
 <p>
 <span>账号:</span>
  <input type="text" value="您的账号" onblur="if (this.value == '') {this.value = 'ID;}" form="#">
    <!--“form="#"”此处无跳转去向先用“#”占位-->
 <br><!--换行符-->
 <span>密码:</span>
  <input type="password">
 </p>
 <input type="submit" value="确认登录" form="#"><input type="reset" value="清空" form="password">
 <!--type="submit"为密码输入框，输入的内容可选择黑点掩盖或不掩盖-->
<h4>饰品类别</h4>
<form name="form1" method="post" action="">
    <label>
      <input type="radio" name="RG1" value="单选" id="RG1_0">
      耳饰</label>
    <label>
      <input type="radio" name="RG1" value="单选" id="RG1_1">
      项链</label>
    <label>
       <input type="radio" name="RG1" value="单选" id="RG1_2">
      头饰</label>
    <label>
      <input type="radio" name="RG1" value="单选" id="RG1_3">
      戒指</label>
      <!--此处从"RG1_0"到"RG1_3"设有四个选项按钮，并且为单选按钮。-->
  </p>
  </form>
<br>
<h3>饰品型号</h3>
<input name="" type="text" value="输入您的饰品型号" size="60px" maxlength="60px">
<br>
 <p>
<h3>邮递方式</h3>
<form name="form2" method="post" action="">
   <label>
      <input type="radio" name="RG2" value="单选" id="RG2_0">
      平邮</label>
    <label>
      <input type="radio" name="RG2" value="单选" id="RG2_1">
      快递</label>
    <label>
          <input type="radio" name="RG2" value="单选" id="RG2_2">
      EMS</label>
  </p>
</form>
<h3>您对所定饰品的希望和要求：</h3>
<textarea name="我们耐心听取用户的意见并虚心改进" cols="50" rows="10" placeholder="我们耐心听取用户的意见并虚心改进">我们耐心听取用户的意见并虚心改进</textarea> 
<h3>您的联系方式：</h3>
<textarea name="" cols="50" rows="5" placeholder="请输入您的联系方式"></textarea>
</div>
</body>
</html>

如果单只有这些源码是不能达到上图效果的，我们需要有一个css样式文件的引入并写入一些修饰的，可以看到我在源码的第六行有一个引入一个css文件,我的这个《商品订购》练习中并没有对外观进行过多的修饰，只是一些简单的颜色更改和边距等的设定以达到一个符合审美的舒适感，代码如下：

@charset "utf-8";/*“utf-8”为万国码*/
/* CSS Document */
.wrap{/*“.”加元素名称对元素进行调用*/
 width: 1200px;/*对宽度进行设定，“px”为像素，此处以像素为单位*/
 margin: 0 auto;/*外边距，不要外边距时的“0”可以不给单位 “auto”居中*/
 border: 3px solid #666;/*让wrap这个div拥有一个3像素的边框，颜色为HEX666灰色*/
 padding: 10px;/*内边距10像素*/
}
.tittle{
 width: 1200px;
 height: 40px;/*高度40像素*/
 background-color: #666;/*背景颜色设为HEX666灰色*/
}
.tittle center h1 {/*对tittle元素中的H1标题进行居中并调用*/
 color: #FFF;/*颜色HEX FFF白色*/
}
.main-left{
 width:550px;
}

注：、/* ....... */为定义注释。
HTML的标签的确不少，觉得这些只是还不够的同学可以去HTML手册中多看看，这一次做的《商品订购》的HTML表单专项练习没有对css过多的写入，界面扁平无趣.
在下一篇文章中，会和大家分享一个我曾经做的一个蛮好玩的_手风琴相册_展示，当中我会有过多的涉及到css中的代码段。
希望大家多多支持，点赞评论转发走一走，蟹蟹~