HTML介绍以及常用代码总结

hellohtml!网页的可视区域(像人的身体,穿的衣服,其他人可以看见的)网页结束

h2标题

8.

html标记语言是由很多的标签组成,不同的标签有不同的样式和功能。

h1

h1-h6标题标签,字体依次由大到小,字体有加粗的效果。

align属性:设置文本对齐方式,属性值有left,center,right。默认左对齐,可以不写。

:p标签,段落标签,p标签上下自带16px外边距


:显示一根横线

没有任何默认样式,主要是给css样式使用


:换行标签,br后面的内容换行显示,没有边距。

b标签包裹的文本会加粗显示,没有任何的语义。html4的版本标签

有强调的语义,包裹的文本会加粗显示。html5版本新加的标签

没有任何语义,单纯的斜体。html4的标签

有强调的语义,包裹的文本显示为斜体。h5增加。

2:上标,包裹文本显示偏上显示

2下标,包裹文本偏小显示

表示引用的一段话(如名人名言),有默认的外边距

引用的内容出自某处或某人

表示引用,内容用""包裹

表示内容是一段代码,显示为等宽字体样式

标记一段内容,背景显示为黄色

可以保留换行和空格符号,但是不好控制网页显示效果,一般没有特殊需求不用。

 半角符号,一个英文字母的宽度,半个中文字符的宽度

 全角符号,2个字母的宽度,1个中文字符的宽度

比标题内容小一号字体,默认效果在h标签里生效。h5新加

100元用于数据文本——》value属性:可选,可以设置一个值,方便搜索引擎抓取

用于地址文本,默认斜体

190.00表示删除的内容,文本会有一个横线

7.9折表示插入的内容,文本会有下划线

HTML用于专业术语文本——》title属性的内容可以作为对术语的解释

注释内容是浏览器不会渲染处界面,主要是给编程人员看的。vscode里面的注释快捷键是ctrl+/

安装汉化包

常用插件

HTMLSnippets对html代码进行提示

AutoRenameTag自动闭合标签,同步修改标签

HTMLCSSSupport智能提示css类名和id名称

openinbrowser当前的html文件可以用浏览器打开

LiveServer创建一个本地服务器打开文件

shift+!选择第一个,可以快速生成网页的基本结构

默认有人样式和语义,表示一个块级区域,是主要的网页布局区域。

表示网页的主题内容,一个网页只有一个main

主要表示一个独立主题,可以取代div元素。

导航元素,表示导航模块,一般网页只有一个nav

html标签嵌套规则:1.布局元素可以嵌套任意元素2.块级元素可以嵌套行内元素3.行内元素不能嵌套块级元素4.p标签不能嵌套其他的块级元素

a超链接标签:

属性

例如

2

很好

target是跳转网页打开的方式,属性值默认是_self当前窗口打开,-blank是新开一个窗口打开。

ping:点击a标签,可以像ping指定的地址发送一个post请求,主要用于跟踪用户的行为。

图片标签:

3

4

5

6

7

大桥图片

信息包裹起来。

figcaption对图片的描述,可以做图片的标题。

列表

ol有序列表

  • 一年级1班
  • 一年级2板
  • ...

    有序列表,每一列前面都有一个数字。

    属性值设置列前面的数字类型:

    1阿拉伯数字(默认值)。

    a小写字母排序

    A大写字母排序

    i小写罗马数字排序

    I大写罗马数字排序

    ul无序列表

    无序列表,没有序号,每一列前面有一个符号

    type属性设置列表每一列的符号:disc实心圆(默认值),cirlce空心圆,square矩形。可以做网页的布局元素。

    dl自定义列表

    web前端

    网页前台

    dl列表,dl里面可以有多组dt,dd的组合。

    dt表示一个术语dd是对术语的解释

    iframe网页容器

    embed/XNTg2MzEyMjY2NA=="

    frameborder="0"allowfullscreen>

    iframe网页容器,可以在一个区域显示其他网页以及网页内容src属性设置显示网页的地址width设置iframe的宽度,height设置iframe的高度frameborder设置边框的尺allowfullscreen点击全屏按钮,可以全屏显示多媒体标签

    video:可以播放视频

    8

    9

    10

    src="./media/test.mp4"

    controls

    autoplay

    muted

    loop

    height="300"

    poster="./imgs/shop_33.jpg"

    preload="auto"

    src是视频地址,可以是本地地址或者网络地址controls播放器的控制条autoplay自动播放(chrome浏览器需要设置muted)muted静音loop循环播放width设置宽度,height设置高度,一般设置一个,让另外一个尺寸自动计算poster视频封面图片,可以是网络图片,也可以是本地图片preload视频缓存属性值:auto(默认值)缓冲整个视频,none不缓冲,metadata缓冲视频文文件的元数据,一般不设置,保持默认。

    为了兼容不同浏览器播放视频文件的格式,用source元素直到找到能播放的视频文件为止

    html符号输入:

    可以用搜狗输入法输入特殊符号

    通过html符号源代码显示符号(推荐方法)

    table表格

    table表示一个表格

    属性:

    tr表示一行

    th表头单元格-默认字体加粗,水平居中

    td标准单元格,主要显示数据(显示内容放在td元素里面)

    caption表格的标题

    thead表格的头部(没有头部,可以不写,如果写了thead必须要有tbody和tfoot),表格头部的单元格一般用th表头元素

    tbody表格的身体部分

    tfoot表格的底部

    url:统一资源定位符,也叫网址

    **form表单:**标签包含很多表单控件,表单控件可以允许用户输入输入数据并通过form标签传递这些数据到后端。(表单控件都有一个name属性,通过name属性可以把表单控件输入的数据通过查询参数传递到后端。)

    值:get请求(默认)数据以查询参数的方式传递。优点:数据传输比较快,缺点:直接能在网址看见数据,传输数据大小有限制,只能传递字符串。如果是get请求可以不写method属性

    post请求,数据通过请求体传递,在网址后面看不见数据。缺点:数据传输没get快,缺点:数据在请求体相对安全,传输数据几乎没有显示,可以传递各种数据。

    enctype指定post请求,浏览器传递数据的MIME类型(后端根据不同的mime类型取值方式不一样)

    input输入框标签,自闭合标签

    type属性值:

    fieldset标签

    fieldset标签是一个块级容器,表示表单件的集合legend设置fieldset控件的标题,通常在fieldset的第一个元素,会嵌入到fieldset上角。

    语法:

    个人信息

    lable标签

    lable表单控件的文字说明,一般用预form表单里面

    未知

    可以把表单控件放入label标签里面,自动关

    联。

    button按钮

    属性:

    type按钮的类型:submit(提交form表单数据),reset重置(重置表单数据为初始状态),button普通按钮,没有任何行为。——》button标签可以用在form标签外面。会具有submit属性,可以提交

    提交

    select下拉菜单

    生成一个下拉菜单,需要配合option标签设置选项

    四川

    广东

    1.select——》name表单名称,数据以name=value方式传到后端(value是选中option的vlaue值)

    disabled表单不能选择

    required必填

    multiple可以选中多个选项(需要按ctrl多选)size设置了multiple,可以设置一次可见的行数。

    2.option设置下拉菜单的一个选项。——》value选择的值selected设置默认选中项

    3.对option进行分组——》label是分组名称,分组不能选择。disabled设置后,分组下面的所有option都不能选择。

    datalist容器

    textarea多行文本输入框

    output

    10+1020表示一个

    用户的操作结果。

    progress

    50%s行内元素,表示任务的完成进度,一般显示为进度条样式。

    meter指示器

    max="500"value="455"low="150"high="350">

    meter指示器,显示已知范围内的一个值,value在low和high显示绿色,其他区域显示橘色。

    details折叠标签

    details折叠标签,浏览器默认会折叠标签包裹内容,点击才能展开查看内容

    THE END
    1.HTML代码大全(完整版).docx《HTML代码大全(完整版)》一、HTML基础1.HTML概述HTML(HyperTextMarkupLanguage)是一种用于创建网页的标记语言,是万维网的核心技术之一。HTML文档由一系列的元素组成,每个元素都由开始标签和结束标签包围,用于描述网页的内容和结构。2.HTML文档结构`<!DOCTYPE>`:声明文档类型,告诉浏览器这是一个HTML5文档。`<>`:根...https://www.renrendoc.com/paper/361071411.html
    2.37款优质的HTML5网站模板国外扁平化网页设计源代码div+css素材...37款优质的HTML5网站模板 国外扁平化网页设计源代码div+css素材 潮州,潮州设计联盟商城网价:5.00,潮州设计联盟商城网掌柜:staticpulse,http://chaozhou.witcp.com/shop/c124/t5b69d8e8655e.html
    3.网页模板,网站模板免费下载,做网站首选模板无忧模板无忧是国内最具人气的网站模板、网页模板下载站,提供网站模板、网页模板、程序模板下载及建站相关素材、教程资源。众多专业模板设计师,新模板每日更新http://www.mb5u.com/
    4.分享73个Html前端模板,总有一款适合您73个Html前端模板下载链接:https://pan.baidu.com/s/1TZyCBJ1vWIRNor3-qiFgyw?pwd=8888 提取码:8888 Python采集代码下载链接:采集代码.zip - 蓝奏云 学习知识费力气,收集整理更不易。知识付费甚欢喜,为咱码农谋福利。 牙齿保健医疗机构网站模板 HTML5机械配件工厂宣传网站模板 ...https://developer.aliyun.com/article/1439853
    5.网页模板html模板下载网页布局 响应式网站模板 树形菜单 木马旋转 表单美化 登录界面 下拉列表 图片叠加 网页背景 缩略图 放大镜图片 select美化 图片拖动 大图切换 日历选择器 table 拖拽 对联广告 html5游戏 二维码 图片延迟加载 进度条 搜索框 提示框 表单验证 倒计时 图片悬停 ...http://www.100sucai.com/web/templates/html/
    6.50个免费的响应式网站HTML5网页设计模板上海网站设计建设公司您是否正在寻找一种快速简便的编辑方法来加速您的网页设计过程?好吧,你来对了地方。我们尚略上海网站设计建设公司已经收集了50个精彩的预制响应式网站HTML5网站模板,只需进行一些创意调整,您的网页设计项目就可以立即生效。最棒的是所有的网站模板都是完全免费的! https://www.shinerayad.com/news_info.asp?id=3752
    7.pbootcms网站模板织梦模板网站源码jquery建站特效html5模板网(www.html5code.net)是专业的pbootcms模板、dedecms织梦模板源码下载网站,整理与建站相关的网站源码、html静态模板、jQuery网页特效、js网页代码等素材,网站同时提供编程专业技术问答、建站教程和编程技术教程,为需要建网站和学习编程技术的朋友助力。http://m.html5code.net/
    8.《HTML5个人网站模板源代码》分享模板介绍 该模板为纯HTML模板,不包含任何服务器端code,模板中只有首页index.html一个页面,PC端和手持端自适应,即响应式布局,网页的目录结构为:images、css、js、fonts,网页采用div+css布局, h5标签开发和扁平化设计,该网页适合h5初学者下载学习。 浏览器兼容 ...https://www.jianshu.com/p/17277657e7a2
    1.html网页详细代码简便html网页代码大全 1)贴图:<imgsrc="图片地址"> 2)加入连接:<ahref="所要连接的相关地址">写上你想写的字</a> 3)在新窗口打开连接:<ahref="相关地址"target="_blank">写上要写的字</a> 4)移动字体(走马灯):<marquee>写上你想写的字</marquee> ...https://blog.csdn.net/2403_88512467/article/details/143723805
    2.html5网页模板源码登陆界面跳转其他网页教你实现 HTML5 网页模板的登录界面跳转功能 在现代网页开发中,登录界面往往是网站的第一道门槛。今天,我将指导你如何使用 HTML5 创建一个简单的登录界面,并通过用户输入跳转到其他网页。整个过程将很简单,适合刚入行的小白。下面是实现的步骤。 整体流程 ...https://blog.51cto.com/u_16213424/12542067
    3.1网页模版源代码,了解一下100套html5网页静态模板吧!这一套html5网页静态模板源代码是我最喜欢的一套,简约大气,适合各种类型的网站使用。 HTML源代码: !DOCTYPE html html lang="en" head meta charset="UTF-8" title简约网页模板/title /head body h1欢迎来到简约网页模板/h1 p这是一个简约大气的网页模板,适合各种类型的网站使用。/p ...http://www.860246666.com/gsdt/13261.html
    4....TDK查询结果Title:响应式网站模板jQuery特效前40名 前50名 191 277 301 331 365 前10名 前20名 前30名 前40名 前50名 98 140 172 219 250 百度 360 神马 搜狗 谷歌 收录 104000 - - - - 反链 - 470 - 9161 - 最近访问 stja.cnqdjhhb.netittime.com.cnwww.nhrjn.comwww.jmkrius.comxytctest.topwww.ybzhan.cnwww.cnchangsu.cnbai26...http://www.youkaixin.cn/tools/seo/erdangjiade.com
    5.css/html网站政府模板源码「51前端」网站前端模板分享平台。标签页展示:css/html网站政府模板源码、css3/html5网页政府模板实例以及展示了很多css3/html5政府网站模板案例等等。https://www.51qianduan.com/temp/tag/370
    6.干货!23套全新的免费HTML5网页模版优设网@Gaoyoungor 目前互联网上存在很多专业的高质量HTML5模版,并且是免费的,如果你熟悉编程的话,只需要研究一下它们的代码就可以学到很多便捷的操作和新的技术。在今天的文章当中我不是列出一长串可用模版的列表,而是精挑细选出高质量的响应式HTML5模版。更重要的是,它们都https://www.uisdc.com/23-new-and-free-html5-templates
    7.html5模板织梦模板wordpress主题商业源码app源码金点网专注于优质站长资源分享,提供下载最新最全html5模板、dedecms织梦模板、wordpress主题、商业源码、小程序源码、php源码、net源码、java源码、app源码、jquery特效、网页播放器代码、建站教程等站长资源。https://www.jindianweb.com/
    8.html单页模板单页网站宣传单页设计模板单页模板 html+css网页设计,生活门户网站源码下载 5.00776 单页模板 网页设计html,倒计时PHP源码模板 5.00690 单页模板 html网页制作模板代码,单页美容工具介绍网页模板 5.00653 单页模板 网页设计制作网站代码,书籍类网页设计模板 5.00124 单页模板 html5网站源码成品,简单着陆页js代码模板 ...https://www.99ziyuan.net/html5css3/dymb/index.html
    9.前端200道面试题及答案(更新中)嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。https://leheavengame.com/article/64d7982931f3516f1405dd03
    10.html游戏代码html游戏网站模板html游戏素材下载html网页制作,即将上线页面素材下载 网页设计模板html代码,露营品牌网页设计模板 网页设计模板html代码,个性的blog网站源码 网页模板免费html,大气慈善捐款网页模板 html网页制作,实用企业官网设计 注册页面html代码,实用步骤表格模板下载 网页模板免费html,娱乐游戏网站页面设计模板 动画标签html,标签栏图标设计素材 html5网页...https://www.17sucai.com/hots/5385.html?p=8
    11.详解HTML5中的<template>标签html5网页制作实际上,并不存在type="text/template"这样的标准写法,<template>元素的出现旨在让HTML模板HTML变得更加标准与规范。 以前,我们可能还使用过<textarea>或者<xmp>(废止但依然可用)嵌套非转义的HTML标签代码,实现一些特定的前端功能,但,同样的,跟上面的流行用法一样,都是不规范的。从未来趋势来讲,显然<template>标签才...https://www.jb51.net/html5/344457.html
    12.大家都在找的HTML5模板下载全屏式的响应式设计网站HTML模板:Striped,包含很多样式 (如:blockquotes, tables, lists, 等.)代码由 HTML5/CSS3 构建,容易算定义。 19、Mnml Lightweight Template MNML是一个HMLT5/SCSS响应式网站模板。 20、Agency Agency是一个简洁的HTML5响应式商业网站模板,并使用了 Twitter Bootstrap框架搭建。 https://www.w3cschool.cn/html5/html5-template.html
    13.简洁HTML5单页作品展示模板,免费下载,适用于企业网站本资源来自:代码?企业网站模板?简洁的html5单页作品展示html5网页模板下载 注:此资源非帝国CMS模板/特效/源码,需要帝国CMS整站模板源码的小伙伴,请移步帝国CMS模板,感谢支持! 点击这里复制本文地址 以上内容由墨鱼部落格整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢! https://www.moyublog.com/codes/15325.html