html简单入门

结构:

 <DOCTYPE html>
  <html>
          <head><!--头部里面的内容不显示-->
             <meta charset="utf-8">
              <title>内容</title><!--可以显示-->
               <style type="text/css">
                      css样式
               </style>
          </head>
          <body>
                    内容部分
          </body>
  </html>

charset="utf-8"代表html使用的字符编码Unicode 字符。
meta:原信息,对某些事物的描述。

基本标签

注释:格式:
<!--内容-->
标题:h1~h6;

格式:<hn>标题内容</hn>
h1定义级别最高的标题,h6定义级别最低的标题。字体大小依次减弱,粗细不变。

段落:p

格式:<p>内容</p> 能够使文本独占一行

span标签

格式:<span>文字</span>
就相当于一个装文字的容器,使用<span>标签时,若格式如下:

    <span>sfdsdffsfsdf</span>
    <span>sfdad</afasdaf>

两段文字出现在一行,且中间会有一个小空隙,这是由于换行符引起的。行内元素基本都有这个特性。

div:万能容器
超链接:a

格式:<a href="连接地址" target="跳转方式" >abc</a>
默认状态下,abc带有下划线并且是蓝色的,点击abc可以跳转到链接地址指向的地方;
常用的跳转方式:_self(本身所在界面打开),_blank(新的界面打开);

图像:img

格式:<img src=''图像链接地址'' alt="图像加载失败时显示的内容" title="鼠标划过图片显示的内容" border=" 图像边框数值" width=" 图像的宽" height="高度数值" />
以上数值可以先使用px(像素)做单位,对于字体来说,可作为数值单位还有em rem;

斜体:i/em

格式:<i>ddgf</i> <em>sfsdfds</em>

粗体:b/strong

格式:<b>fsdf</b> <strong>sfdfsd</strong>

换行:br

格式:<br />

水平线:hr

格式:


表格:table

格式:

 <table>
      <tr>
          <th>标题</th>
      </tr>
     <tr>
          <td>内容</td>
      </tr>
  </table>
  • tr定义行,th定义表头,td定义表格单元;
  • table内常用属性:align="left/right/center"整个表格的对齐方式,cellspacing="数值"单元格间的填充,cellpadding="数值"单元格内的填充,bordercolor="颜色"设置边框的颜色,bgcolor="数值"表格背景色;
    例如:<table align="left" bgcolor="red"></table>

合并单元格的属性在td里面填写,例如:

 <table>
      <tr>
          <th>标题</th>
          <th>标题</th>
          <th>标题</th>
          <th>标题</th>
      </tr>
       <tr >
          <td colspan="2" rowspan="2">内容</td>
            <td>内容</td>
            <td>内容</td>
      </tr>
      <tr >
            <td>内容</td>
            <td>内容</td>
      </tr>
  </table>

合并行(rowspan) 合并l列(colspan) 要删除被合并的单元格;

表单:form 向服务器提交信息

格式:

 <form action=" 数据提交的位置"  method="数据上传的方式:get/post">
      <!--get 方式提交的数据显示在地址栏,有大小限制-->
      <!--post方式提交的数据地址栏不可见,可用于敏感信息大小基本无限制-->
      <fieldset >
      <legend>Personal information:</legend>
          <input type="text" value=""><!--文本框-->
          <input type="password" value=""><!--密码框-->
          <input type=" button" value=""><!--按钮-->
           <legend>Personal information:</legend>
       </fieldset >
      <input type="radio" value="1" name=""><!--单选框,name值一样的为一组框-->
      <input type="checkbox" value="1" name=" li"><!--复选框,name值一样的为一组框-->
      <input type=" file" ><!--文件-->
      <input type="submit"><!--自动提交按钮-->
      <input type="reset"><!--清空-->
      <textarea cols=" 数值" rows="数值"><!--多行文本,属性值代表多少行多少列-->
      <select name=""><!--下拉框-->
                <option selected>下拉内容 </option><!--代表当前被选中-->
                <option>下拉内容</option>
      </select>
 </form>
  • fieldset用来组合表单元素,会自动生成一个线框,legend在生成的线框左上角显示;
  • 单选框和复选框里面的value值代表移交给服务器的值;
  • 按钮里面的value值显示在按钮上
  • 文本框和密码框里面的value值是框内的默认值;
  • 想要数据正确的被提交,每一个都要设置一个name值
  • 下拉框里面的value值代表当前选中的值,option页面显示的值和value值没有关系
列表:有序,无序,自定义

常用属性:type;

有序:ol li

格式:

<ol type="none/1/a/A/i/I"><!--无样式,数字(默认),字母,罗马数字作为列表序列-->
    <li></li>
     <li></li>
</ol>
无序:ul li

格式:

<ul type="none/disc/circle/square"><!--无样式,实心圆,空心圆(默认),正方块作为列表序列-->
    <li></li>
     <li></li>
</ul>
自定义:dl dt dd

格式:

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

显示格式: 标题
内容

常用转义字符:
    &nbsp; <!--空格-->
    &lt;<!--小于号-->
    &gt;<!--大于号-->
    &amp;<!--&-->
    &quot;<!--引用-->
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,657评论 18 139
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,890评论 0 0
  • 一,HTML语言的一般语法: 1,围堵标记:<>… 1)带属性的标记: … 2)无属性的标记:加粗 居中 标题 2...
    清水易蓝阅读 1,264评论 0 2
  • 我们 每日晚推送最新科技动态,移动互联网、智能手机、智能家居、VR、AI、电商、大数据、云计算、创业、人物、互金等...
    火迅云阅读 393评论 0 3
  • 一年前的今天,天气也如今天这般好,透澈的蓝天,暖暖的春风。在这样美好的日子里,我嫁给了心爱的你! 没错,今天是我们...
    米兔姐姐阅读 651评论 1 2