HTML新手教程

HTML入门

教程:【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili 

一.初识HTML 

  • HyperTextMarkupLanguage(超文本标记语言)
    • 超文本包括:文字、图片、音频、视频、动画。

HTML新手教程_第1张图片

  • HTML5的优势
    • 世界知名浏览器厂商对HTML5的支持
    • 市场的需求
    • 跨平台
  • W3C标准
    • W3C
      • 万维网联盟 (World Wide Web Consortium) 。
      • 成立于1994年,Web领域最权威和最具影响力的国际中立性技术标准机构。
      • W3C
      • W3C中国
    • W3C标准包括
      • 结构化标准语言(HTML、XML)
      • 表现标准语言(CSS)
      • 行为标准语言(DOM、ECMAScript)
  • 常见IDE
    • 记事本
    • Dreamweaver
    • IDEA
    • WebStorm
    • ……
  • < body >、< /body>等成对的标签,分别叫做开放标签和闭合标签。
  • 单独呈现的标签(空元素),如< hr/ >;意为用/来关闭空元素。

HTML新手教程_第2张图片

二.网页基本信息与标签 







 


    
    
    
    
    
   
    
    Title
    





    

一级标签

二级标签

三级标签

四级标签

五级标签
六级标签

p换行1

p换行2


换行1
换行2

字体样式标签

粗体:I am CSS.
斜体:HTML5 and CSS3
空格:1 2  3   4
空格:1 2 3 4
大于号:>
小于号:<
版权符号:©

HTML新手教程_第3张图片

三.图像,超链接,网页布局 



    
    fuck

HTML新手教程_第4张图片


    
    

    
    请跳转页面咨询百度


    请点击照片再次页面咨询百度
        
fuck
回到顶部
百度底部
点击联系我

HTML新手教程_第5张图片HTML新手教程_第6张图片

四.列表、表格、媒体元素 


    

  1. Java
  2. Python
  3. 前端
  4. 运维
  5. C/C++
  6. Android

  • Java
  • Python
  • 前端
  • 运维
  • C/C++
  • Android

df
df1
df2
du
du1
du2

HTML新手教程_第7张图片



 
学生成绩
狂神 语文 100
数学 100
秦疆 语文 100
数学 100

HTML新手教程_第8张图片


HTML新手教程_第9张图片

五.页面结构 

元素名 描述
header 标题头部区域的内容(用于页面或者页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容


    
        

页面头部

页面主体

页面脚部

HTML新手教程_第10张图片

 六.iframe内联框架


    


 

 555555

HTML新手教程_第11张图片

七.表单及表单应用 


    
    

注册

名字:

密码:

HTML新手教程_第12张图片HTML新手教程_第13张图片


    
    

注册

名字:

密码:

性别:

爱好: 睡觉 敲代码 聊天 游戏

HTML新手教程_第14张图片


    
    

注册

名字:

密码:

性别:

爱好: 睡觉 敲代码 聊天 游戏

国家:

反馈:

HTML新手教程_第15张图片


    
    

注册

名字:

密码:

性别:

爱好: 睡觉 敲代码 聊天 游戏

国家:

反馈:

邮箱: url:

商品数量:

音量:

搜索:

属性 说明
readonly 只读,不可更改
disable 禁用
hidden 隐藏,虽然不可见但是会提交
id 标识符,可以配合label的for属性增加鼠标的可用性
placehoder text 文字域等输入框内的提示信息
required 不能为空
patten 正则表达式验证

 这些参数可以添加到表单与表单的任何组件中 

你可能感兴趣的:(前端,html,前端)