码迷,mamicode.com
首页 > Web开发 > 详细

##HTML基础

时间:2019-06-23 20:39:53      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:文件夹   程序   ash   属性   cal   代码提示   text   sha   red   

HTML基础

 一:基础

  HTMLHyper Text Markup Language):超文本标记语言
  目前学习最新的版本:HTML5.
  优点:1,智能代码补全 2,代码提示 3,自动保存 4,多个浏览器支持

 

  用来表达网页而用来编辑的程序:nootpad,写字板,记事本,webstrom

    W3C:外围网联盟

    W3C标准:

      HTML 标签是由尖括号包围的关键词,比如 <html>

      HTML 标签通常是成对出现的,比如 <b> </b>

      标签对中的第一个标签是开始标签,第二个标签是结束标签

      开始和结束标签也被称为开放标签和闭合标签

开始工作:

  File----new---HTML file(建立一个html文件)

  File----new---direction(建立一个文件夹)

  <html> </html> 之间的文本描述网页
  <body> </body> 之间的文本是可见的页面内容
  <h1> </h1> 之间的文本被显示为标题(h1-h6都是标题标签,h1字体最大,h6字体最小)
  <p> </p> 之间的文本被显示为段落
  Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。

  文本样式:
  水平线:<hr>                    --------------------------------------------------------------------------

  <em>斜体</em>                    <em>我的世界</em>              我的世界

  <Strong>加粗</Strong>            <Strong>我的世界</Strong>       我的世界

标签属性:

  添加图片:语法:<img src="相对路径/绝对路径" >(现在多用相对路径)

  ../用于返回上一级  ../../用于返回上一级的上一级

超链接文本:用a标签  语法:<a href="">内容</a> 出现的是:内容

  注:英文“”中间可以用自身窗口(self):就是在原本的网页打开你想要的内容

  也可以用新建窗口(blank):就是原本的网页不变,新建一个网页窗口

添加视频:语法:<video src="相对路径" controls></video> 里面的相对路径和上面相同的道理,controls这个是视频的功能键,加上这个会看到这个视频的播放,快进,音量等功能键。

添加音频:语法:<audio src="相对路径" controls></audio> 同上。

  Source  :标签

  Src:     属性

  autoplay :自动播放

注释和特殊符号:

空格: 

大于号:>;  内容+符号+内容

小于号:<;   内容+符号+内容

引号:";  必须用承兑的";引起来

版权符号:©;       

二:属性:

  header 标题头部内容----------------页面中的一块

  footer 脚部区域内容-----------------整个页面

  section web页面一块独立区域

  article  独立文章内容

  aside  相关内容-------------------------侧边栏

  nav    导航类辅助内容

  内容属性:style

  设置边框尺寸:width宽    height

  font-family:字体             font-family:楷体;        宋体:(我的世界)楷体(我的世界)

  font-size:大小            font-size20px;       我的世界(字体默认大小为16px

  font-style:风格               font-styleitalic;(斜体)  我的世界(默认为normal:正常)

  font-weight:粗细           font-weight200px;     我的世界(输入的数字为1-900正整数

  Color:颜色                 colorred                     我的世界

  注:color后面有三种表达方式:1,英文red 2,十六进制# 3RGB三原色设置

  文本属性:

    text-align:对齐方式        center居中    right偏右   left偏左

    text-indent:首行缩进       一般用10px,如果是在段落中用2em

    line-hight:行高

    text-decoration:文本装饰   underline下划线  line-through中划线  overline上划线

    None没有

    Padding 内边距     margin  外边距

  伪类语法:

    ahover{

    Cursor:

    }

    Cursor鼠标   water 等待  move 移动 pinter 小手 crosshair 十字光标  alias 跳转

    All-scroll 移动  auto 文本符

  Div标签

    Background:背景

    Background-color颜色

    Background-repeat:是否平铺

    Background-position:背景定位

    Background-imageur”相对路径”

    去小圆点:

    *{

    Padding0

    Magrin0

    }

    line-height30px;设置行高,这样可以让内容居中

    text-decorationnone;这样去下划线

三:列表

  列表:

  无序列表:

  <ul>    

     <li>1</li>          ·1

      <li>2</li>          ·2

      <li>3</li>          ·3

    </ul>

  有序列表:

    <ol>

      <li>桔子</li>       桔子

      <li>香蕉</li>       香蕉

      <li>苹果</li>       苹果

  </ol>

  自定义列表(现在不用)

    <dl>

   <dt>所属学院</dt>

      <dd>计算机应用</dd>

      <dt>所属专业</dt>

      <dd>计算机软件工程</dd>

  </dl>

  表格的语法:

  <table>

      <tr>

           <td>单元格1</td>

           <td>单元格2</td>

          ……

      </tr>

        ……

  </table>

  补充type=squarc正方块   circle 空心圆

  Table表格容器:    tr行   td

  Rowspan行合并     colspan列合并

  表单的结构:

  姓名:<input type="text"><br>            text文本框
  信息:<input type="text"><br>
  密码:<input type="password"><br>       password密码框
  <input type="radio" name="sex" id="man"><label for="man"></label>
  <input type="radio" name="sex" id="woman"><label for="woman"></label>

  Radio单选框    label是如果点在字上也能选中。
  <input type="checkbox" id="tile"><label for="tile">同意此协定</label>

  Checkbox同意框
  <select name="" id="">
      <option value="">请选择</option>
      <option value="">事业部</option>
      <option value="">技术部</option>
      <option value="">人事部</option>
      <option value="">财务部</option>
  </select>

  Select这个结构是用来选择
  <input type="submit" value="登陆">
  <button>登陆</button>

  登陆注册框的两种不同写法
  <textarea name=""  cols="30" rows="10"></textarea><button>提交</button>

  评论框

四:选择器:

  并集选择器:多个选择器通过逗号连接而成,同时声明多个风格相同样式。

  交集选择器:由两个选择器连接构成,选中二者范围的交集,两个选择器之间不能有空格。

  第一个必须是标签选择器,第二个必须是类选择器或者ID选择器

  后代选择器:外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔标签嵌套时,内层的标签成为外层标签的后代。

  子元素选择器:通过>连接在一起而成,仅作用于子元素

  属性选择器:选取带有指定属性的元素,或选取带有指定属性和值的元素。

  盒子类型:

  上边框样式:border-top-style

  右边框样式:border-right-style

  下边框样式:border-bottom-style

  左边框样式:border-left-style

  设置四个边框样式:border-style

  none:无边框

  solid:实线边框

  dashed:虚线边框

  dotted:点状边框

  double:双线边框

  hidden:与none相同,应用于表解决边框冲突

##HTML基础

标签:文件夹   程序   ash   属性   cal   代码提示   text   sha   red   

原文地址:https://www.cnblogs.com/liurui-bk517/p/11074047.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!