HTML学習の基本的な注意点 2015年10月15日_html/css_WEB-ITnose

一个互联网公司的分工，小公司要求全能，拿一个项目全部做出来。大公司分工明细，主要步奏为策划人员策划方案，美工人员设计图有.psd.rp等，前端人员做静态页面，后台人员获取数据java php .net。无论是处于那块的人员，都要对于其他的有所了解。

www网页服务，FTP文件上传下载，telnet远程控制

Apache2.2服务器

windows+r=运行，输入services.msc调出服务控制台

本地：127.0.0.1，访问自己本地服务器，需要使用Apache架起服务器之后，将文件放置到htdocs文件夹当中。安装Apache时要注意不能有中文文字不能有空格，可以直接安装到C盘下，不要安装到默认文件夹中。

主要使用的测试浏览器有IE、firefox、chrome、opera、safari

服务器端技术与客户端技术

常见的服务器端技术（运行在服务器上）：

JSP/PHP/ASPX

（前端）常见的客户端技术（运行在浏览器上）：

HTML/CSS/JS/SWF（flash）

计算机语言，HTML与JAVA/C/PHP不同，一门语言有三种结构，顺序执行、循环执行、选择执行。HTML里没有循环、选择等基本结构，只有纯文本和52个标签。

双标记标签：<标签名>文本

单标记标签：<标签名/> 单标记标签中不能包含内容

---

水平线
换行

Meta标记的使用

多个关键字内容之间可以用“，”分割

设置描述：

设置作者：

设置字符集：或者utf-8

gb2312主要用于中文文字较多的，而utf-8是国标，在国际上使用较多。

设置页面定时跳转：

 

html与xhtml的区别，xhtml首先所有字母都小写，其次所有标记都要有关闭。

格式：<标记 属性1=参数1 属性2=参数2>内容

 

不同标签具有不同的属性，所有标签都具备以下四个属性：

id：整个文档每个标签可以声明一个唯一的id号

style：为元素指定css样式

class：指定元素所属的类型

title:指定标签的弹出提示语

 

写代码前需要声明文档类型，否则会影响到css和javascript的解释执行，很多效果就会出不来。

文档类型声明：（所有工具都能生成这句话）

 

windows+d可以将桌面调出来。

 

meta data:元数据-描述数据的数据（视频1day02视频1的35分）

元数据，写在head里面title上面比较好，这样会告诉浏览器以下的文字内容以这个标准来解析。避免出现乱码问题。

 

转义字符：

<>正常来说是无法显示的，会被认为是告诉浏览器的语言，所以需要使用转义字符来显示到前台。

基本格式：&xxxx

< 是<

>     是>

空格   是

&      是&

©      是©

?       是™

®       是®；

XHTML中不使用描述样式，都是使用CSS来控制样式，而在html中描述样式和描述语义是混杂的。例如和，前面是描述样式，后面是描述语义，在xhtml中描述样式标签就不可存在了。xhtml中，代替。

如今新网页中大多都是用的xhtml，为什么html却没被废弃呢？因为之前很多老网页没有修改过，都还是用的描述样式的方式，所以无法废弃，只是新的不再使用。

HTML 要素タイプには 100 を超える要素タイプがあり、それぞれのほぼ半分はブロック要素でのみ使用できるものと、インライン要素でのみ使用できるものがあります。インライン要素内でブロック要素を使用した場合、効果は表示されません。

1. ブロック要素 (block) は、
   のように、単独で別の行を占有する必要があります
2. インライン要素 (inline) は、同じ幅を占有することができ、他の要素とも整列します要素を同じ行に配置します。

インライン タグ: <sub><sup>< a></p> ブロックラベル: <h1><h6> ;div><p></p> <hr> <pre class="brush:php;toolbar:false"></pre> <table><ul>gt;<li><ol><dl> <dt></dt> <dd><form> <p> </p>説明タグ: <b><i>_{^{<width><color><align><p> </p>セマンティックタグ: <p><strong><em> <h1> ; to <h6><p> </p>Partition 要素は要素をグループ化するために使用され、ページ レイアウトでよく使用されます。 <span> と <div><p> </p> ブロック パーティション要素 <div></div>、コンテンツの階層化とページ レイアウトに使用される要素グループ化ツールは、CSS とともに使用する必要があります <p> </p> インライン パーティション要素 <span> ; </span>CSS と JS を有効にする必要があります<p> </p> <p> 下付き文字: _gt;</p> <p>上付き文字: </p> <p> </p>ctrl +d 削除行全体<p> </p> ctrl+alt+↓行全体をコピー<p> </p> <p> </p> デフォルトのフォントの高さとタイトルの単語の間隔はブラウザによって異なるため、互換性の問題が発生します。この問題をブロックするには CSS を使用してください。 <p> </p><b/>、「/」はhtmlやhtml5では省略できますが、xhmtlでは省略できません。 <p> </p><hr> セパレーター要素、水平線を作成します。共通の属性は (サイズ、幅、配置、色) です。 <p> </p><img/> 現時点でサーバーへの画像リクエストを開始する必要があることをブラウザーに通知します。 , srcには画像のURL、alt属性を指定しており、画像が表示できない場合は代わりにこのテキストが表示されます。 <p> </p> <p> </p> HTML ページで使用できるリソース: 画像、CSS、JS、別のページ <p> </p>Web 開発で使用される画像形式<p> </p>bmp: 非圧縮ビット画像、通常 Web 開発には使用されません<p> </p> psd: ps オリジナルドキュメント、サポートレイヤー、ページ内で直接使用されません <p> </p>tiff: 公開および印刷 <p> </p> <p>raw: 大きすぎます </p> <p class="sycode"> </p> <p>jpeg: 圧縮画像、高忠実度、豊富なカラー、Web 上の写真に適しています、完全に許容されます1024*768 を 100k またはさらに小さいサイズに圧縮します </p> png: 色は jpg ほど豊富ではありませんが、透明度がよくサポートされており、圧縮率が大きく、アイコンに適しています <p> </p>gif: 色が豊かです、アニメーション効果をサポートしており、透明度もある程度サポートされています。 <p> </p> <p> </p>リンクの表現形式<p> </p> <p>対象文書はダウンロードリソース<a href=”DAY02.zip”>Download</a></p> <ol>メールリンク<a href=”mailto:balabala@163 .com ”>お問い合わせ</a><li> </li>ページ上部の空のリンクに戻る<a href=”#”>…</a><li> </li>JavaScriptへのリンク<a href=”javascript:…” > js 関数</a><li> </li> <li> </li> </ol> 3 つのページ レイアウトの方法: <p> </p>table は主にデータのバッチを表示するために使用されますが、ページ レイアウトとしては時代遅れです。 <p> </p>div+css は現在主流です<p> </p>html5 レイアウトタグ、将来のトレンド<p> </p> <p> </p> 青はコンテンツが占める領域、オレンジは間隔、緑は塗りつぶしです。 <p> </p> <p> </p>フォーム フォーム。ユーザー データを収集してサーバーに送信するために使用されます。 Action には 2 つの属性があり、フォーム データの処理ページを指定します。これは動的ページである必要があります。入力タイプもあります。 <p> </p> <p> </p> アドレスバー URL に入力する最大文字数は 1024 バイトを超えることはできません。 <p> </p> <p></p> </form></dd> </dl></ol></li> </ul></table></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="HTML を学ぶ初心者です。アドバイスをお願いします_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/271883.html">HTML を学ぶ初心者です。アドバイスをお願いします_html/css_WEB-ITnose</a></span><span>次の記事：<a class="dBlack" title="HTML を学ぶ初心者です。アドバイスをお願いします_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/271885.html">HTML を学ぶ初心者です。アドバイスをお願いします_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>}}